Updating the Navigation and Page styling to better handle breakpoints

Author: skipjack

components/navigation/navigation-style.scss

@@ -34,6 +34,10 @@
   padding: 0.6em 1em;
 
   @include break {
+    padding:0 1.5em;
+  }
+
+  @include break('large') {
     padding:0 0 0 1.5em;
   }
 }
@@ -69,21 +73,33 @@
     align-items: center;
     justify-content: flex-end;
   }
+
+  @include break('large') {
+    padding-right:0;
+  }
 }
 
 .navigation__link {
-  font-size: getFontSize(-1);
-  padding:1.5em;
-  text-transform: uppercase;
-  color: map-get($colors, dusty-grey);
-  transition:all 250ms;
+  @include break {
+    font-size: getFontSize(-1);
+    text-transform: uppercase;
+    color: map-get($colors, dusty-grey);
+    transition:all 250ms;
+    padding:1.75em 0;
+    margin-left:1.5em;
+  }
 
-  &:hover,
-  &--active {
-    color: map-get($colors, white);
+  @include break('large') {
+    padding:1.5em;
+    margin-left:0;
+
+    &--active {
+      background: map-get($colors, emperor);
+    }
   }
 
+  &:hover,
   &--active {
-    background: map-get($colors, emperor);
+    color: map-get($colors, white);
   }
 }

components/page/page-style.scss

@@ -10,12 +10,15 @@
 
 // XXX: Temporary hack to fix sidebar width
 .page div:first-of-type {
-  flex:0 0 auto;
-  overflow:auto;
+  flex: 0 0 auto;
+  overflow: auto;
 
   @include break {
+    flex:0 0 30%;
+  }
+
+  @include break('large') {
     flex:0 0 25%;
-    overflow:hidden;
   }
 }