Fix buttons and dropdowns on main page

scss/_footer.scss

@@ -8,26 +8,78 @@
     margin: 0 !important;
   }
 
+  & > div > div  {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+
+    /* GitHub logo */
+    & > div:first-child {
+      text-align: center;
+      justify-content: center;
+      align-self: center;
+      flex-grow: 5;
+      width: auto;
+    }
+
+    /* Columns */
+    & > div:not(:first-child) {
+      @include window;
+
+      margin: 0 5px !important;
+
+      h2 {
+        @include window-header;
+        margin: 3px 3px 0 3px !important;
+        padding: 0 10px;
+        font-family: sans-serif !important;
+        font-weight: bold !important;
+      }
+
+      padding-left: 0 !important;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+    }
+  }
+
   & > ul {
     @include statusbar;
-    padding: 0 5px !important;
+    padding: 0 !important;
     margin: 2px;
   }
 
   & > div:nth-child(1) {
     padding: 0 !important;
     border: none !important;
-    justify-content: stretch !important;
+    max-width: 100%;
+    padding: 0 10px !important;
 
     ul {
       @include statusbar;
-      padding: 0 5px !important;
-      margin: 2px;
+      margin: 2px 3px 3px 3px;
 
       &:nth-child(1) {
         flex-grow: 1;
       }
     }
+
+    li {
+      margin-bottom: 0 !important;
+      padding: 4px 10px;
+      &:hover {
+        a {
+          color: $color-highlight-text !important;
+        }
+        background: $color-highlight !important;
+      }
+    }
+
+    li:not(:last-child) {
+      @include border-bottom-separator;
+    }
   }
 
   .text-gray {

scss/_mixins.scss

@@ -141,23 +141,24 @@
 
 @mixin reset-text-styles {
   font-weight: normal !important;
-  font-size: inherit !important;
+  font-size: 14px !important;
   opacity: 1 !important;
   text-decoration: none !important;
   color: $color-text !important;
 }
 
 @mixin text-disabled {
   font-weight: normal !important;
-  font-size: inherit !important;
+  font-size: 14px !important;
   opacity: 1 !important;
   text-decoration: none !important;
   color: $color-text-disabled !important;
   text-shadow: 1px 1px $color-text-disabled-shadow;
 }
 
 @mixin reset-borders {
-  outine: none !important;
+  box-shadow: none;
+  outline: none !important;
   border-top-width: 0 !important;
   border-bottom-width: 0 !important;
   border-left-width: 0 !important;

scss/_reset.scss

@@ -89,3 +89,14 @@ table.files td.message a,
 {
   font-size: inherit !important;
 }
+
+.Bump-link-symbol {
+  display: none;
+}
+
+.icon-chevon-down-mktg {
+  stroke: rgba(0, 0, 0, 1) !important;
+  stroke-width: 2px;
+  stroke-linecap: square;
+  width: 9px !important;
+}

scss/components/_buttons.scss

@@ -1,4 +1,6 @@
 %btn-focus {
+  @include reset-borders;
+
   &:not(.tooltipped) {
     outline: dotted 1px $color-text !important;
     outline-offset: -4px !important;
@@ -58,6 +60,14 @@
 }
 
 %btn {
+  transition: 0;
+  background: $color-button-background !important;
+  padding: 5px 10px !important;
+  text-decoration: none;
+
+  @include reset-text-styles;
+  @include reset-borders;
+
   &, &:hover {
     background: $color-button-background;
     @include reset-text-styles;
@@ -119,14 +129,16 @@
 }
 
 .btn,
+.btn-mktg,
 .filter-item,
 .full-commit .btn-outline,
 .js-jump-to-badge-jump,
 .js-repo-topics-form-toggle,
 .menu-item,
 .social-count,
 .subnav-links a,
-.toolbar-item
+.toolbar-item,
+.HeaderMenu-link
 {
   @extend %btn;
 }

scss/components/_dropdowns.scss

@@ -44,6 +44,7 @@
   @include border-bottom-separator;
 }
 
+.dropdown-menu h4,
 .dropdown-header {
   @include text-disabled;
 }
@@ -55,7 +56,29 @@
 .dropdown-menu {
   padding: 5px !important;
 
-  background-color: $color-window-background;
+  & > ul {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin: 0 !important;
+    font-size: 14px !important;
+    line-height: 1 !important;
+    & > li > a {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      color: $color-text !important;
+    }
+  }
+
+  & > span, & > ul > li, & > a, & > div, & > h4 {
+    padding-top: 6px !important;
+    padding-bottom: 6px !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+    margin: 0 !important;
+    line-height: 1 !important;
+  }
+
+  background-color: $color-window-background !important;
 
   &::before {
     display: none;
@@ -64,6 +87,10 @@
   &::after {
     display: none;
   }
+
+  .border-lg-top {
+    @include border-top-separator;
+  }
 }
 
 .dropdown-header {
@@ -85,6 +112,10 @@
 .jump-to-suggestions-results-container [aria-selected="true"] .jump-to-suggestions-path,
 .jump-to-suggestions-results-container .navigation-focus .jump-to-suggestions-path,
 .select-menu-item:hover,
+.dropdown-menu > a:hover,
+.dropdown-menu > a:hover.selected,
+.dropdown-menu li:hover,
+.dropdown-menu li:hover.selected,
 .select-menu-item:hover.selected,
 .select-menu-item:hover.select-menu-action,
 .select-menu-item:hover .description-inline,
@@ -103,6 +134,10 @@
 {
   color: $color-highlight-text !important;
   background: $color-highlight !important;
+
+  a {
+    color: $color-highlight-text !important;
+  }
 }
 
 .jump-to-suggestions {
@@ -122,3 +157,5 @@
 #jump-to-results {
   border: none !important;
 }
+
+

scss/components/_tooltips.scss

@@ -9,6 +9,8 @@ body > div.Popover {
 .tooltipped::after,
 .Popover-message,
 .flash,
+.Tile,
+.create-account-callout,
 .js-notice:not(.js-repository-recommendation):not(summary) {
   @include tooltip;
 }

scss/optional/_clippy.scss

@@ -28,3 +28,7 @@
 .js-notice:not(.js-repository-recommendation):not(summary) {
   @extend %clippy;
 }
+
+.create-account-callout {
+  @extend %clippy;
+}