menu tweaks

_src/_assets/scss/_grid.scss

@@ -39,12 +39,12 @@
     max-width: 55em;
     margin-left: auto;
     margin-right: auto;
-    padding-left: ($spacer / 2);
-    padding-right: ($spacer / 2);
+    padding-left: $spacer;
+    padding-right: $spacer;
 
     @media ($screen-sm) {
-        padding-left: $spacer;
-        padding-right: $spacer;
+        padding-left: $spacer * 2;
+        padding-right: $spacer * 2;
     }
 }
 

_src/_assets/scss/_hero.scss

@@ -1,6 +1,7 @@
 .hero {
     background: $brand-03;
-    padding: $spacer * 2;
+    padding-top: $spacer * 2;
+    padding-bottom: $spacer * 2;
     min-height: 100vh;
 
     &,
@@ -18,14 +19,28 @@
     }
 
     .menu__link {
-        color: #fff;
+        color: rgba(#fff, .8);
 
         &:after {
-            background: #fff;
+            background: rgba(#fff, .8);
+        }
+
+        &:hover,
+        &:focus,
+        &.active {
+            color: #fff;
+
+            &:after {
+                background: #fff;
+            }
+
+            .logo {
+                fill: #fff;
+            }
         }
     }
 
     .logo {
-        fill: #fff;
+        fill: rgba(#fff, .95);
     }
 }

_src/_assets/scss/_menus.scss

@@ -3,22 +3,31 @@
     padding-top: $spacer;
 }
 
+.menu__items {
+    max-width: 100%;
+}
+
 .menu__link {
     display: inline-block;
     padding: $spacer;
     text-decoration: none;
     font-size: $font-size-base;
     font-weight: $font-weight-bold;
-    color: $link-color;
+    color: $brand-04;
     position: relative;
 
+    &,
+    &:after {
+        transition: .25s ease-out;
+    }
+
     // link line
     &:after {
         content: '';
         position: absolute;
         height: 2px;
         width: 30px;
-        background: $link-color;
+        background: $brand-04;
         display: block;
         left: 50%;
         margin-left: -15px;
@@ -26,14 +35,18 @@
         // hidden by default
         transform: scale(0);
         transform-origin: center;
-        transition: transform .2s ease-out;
     }
 
     &:hover,
     &:focus,
     &.active {
+        color: $brand-03;
+
         // show link line
-        &:after { transform: scale(1); }
+        &:after {
+            transform: scale(1);
+            background: $brand-03;
+        }
     }
 }
 
@@ -43,10 +56,22 @@
     height: 100%;
     display: flex;
     align-items: center;
+    transition: .25s ease-out;
 
     &:after {
         display: none;
     }
+
+    .logo {
+        transition: .25s ease-out;
+    }
+
+    &:hover,
+    &:focus {
+        .logo {
+            fill: $brand-03;
+        }
+    }
 }
 
 .menu--main {
@@ -54,7 +79,13 @@
 
     .row {
         display: flex;
-        justify-content: space-between;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        @media ($screen-sm) {
+            justify-content: space-between;
+            flex-wrap: nowrap;
+        }
     }
 
     .menu__link {
@@ -73,3 +104,26 @@
     padding-top: $spacer * 2;
     padding-bottom: $spacer * 2;
 }
+
+
+.menu-overflow {
+    // yummy scrolling
+    white-space: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-left: -$spacer;
+    margin-right: -$spacer;
+    padding-left: $spacer;
+    padding-right: $spacer;
+    text-align: center;
+
+    &::-webkit-scrollbar { display: none; }
+
+    @media ($screen-md) {
+        margin: 0;
+        padding: 0;
+        white-space: normal;
+        overflow: visible;
+        text-align: right;
+    }
+}

_src/_includes/menu-main.html

@@ -8,17 +8,22 @@
 
         <div class="menu__items">
 
-            {% for link in site.data.menus.main %}
-                {% assign active = nil %}
-                {% if page.url contains link.url %}
-                    {% assign active = 'active' %}
-                {% endif %}
+            <div class="menu-overflow">
 
-                <a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
-            {% endfor %}
+                {% for link in site.data.menus.main %}
+                    {% assign active = nil %}
+                    {% if page.url contains link.url %}
+                        {% assign active = 'active' %}
+                    {% endif %}
+
+                    <a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+                {% endfor %}
+
+                <a class="menu__link button button--small button--primary" href="/foundation/">Signup</a>
+                <a class="menu__link button button--small" href="/foundation/">Login</a>
+
+            </div>
 
-            <a class="menu__link button button--small button--primary" href="/foundation/">Signup</a>
-            <a class="menu__link button button--small" href="/foundation/">Login</a>
         </div>
     </div>
 </nav>