give up on sidebar, add normal nav menu

_includes/header.html

@@ -5,7 +5,7 @@
             <span class="slash">/</span>
             <a href="/Projects">Projects</a>
             <span class="slash">/</span>
-            FooBar
         </span>
+        <span id="page">FooBar</span>
     </div>
 </header>

_includes/sidebar.html

@@ -1,8 +1,3 @@
-<input id="sidebarToggle" type="checkbox"/>
-<span id="sidebarToggleImage">
-    <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
-</span>
-
 <nav id="sidebar">
 
     <ul id="navFlags">

_sass/_mobile.scss

@@ -0,0 +1,3 @@
+$mobile-width: 800px;
+
+$mobile-header-height: 70px;

_sass/_util.scss

@@ -42,4 +42,3 @@
     }
 }
 
-$mobile-width: 800px;

css/sidebar.scss

@@ -3,12 +3,14 @@
 @import 'util';
 @import 'colors';
 @import 'fonts';
+@import 'mobile';
 
 $flag-shadow: rgba(black, 0.2);
 $animate-time: 0.03s;
 
 #sidebar {
-    display: block;
+    display: flex;
+    flex-direction: column;
     flex-shrink: 0;
     width: 180px;
     margin: 0;
@@ -19,44 +21,6 @@ $animate-time: 0.03s;
     }
 }
 
-#sidebarToggle {
-    display:none;
-    @media screen and (max-width: $mobile-width){
-        display: block;
-        position: fixed;
- 
-
-        top: 0;
-        left: 0;
-        width: 30px;
-        height: 30px;
-        margin: 0;
-        z-index: 2;
-
-        cursor: pointer;
-        opacity: 0;
-    }
-}
-
-#sidebarToggleImage {
-    display:none;
-    @media screen and (max-width: $mobile-width){
-        display: block;
-        position: fixed;
-
-        text-align: center;
-        color: $title-text;
-
-        top: 7px;
-        left: 0;
-        width: 30px;
-        z-index: 1;
-
-        cursor: pointer;
-        //opacity: 0;
-    }
-}
-
 #navFlags {
     display: block;
     margin-block-start: 0;
@@ -70,28 +34,9 @@ $animate-time: 0.03s;
     }
 }
 
-@media screen and (max-width: $mobile-width){
-    #sidebar{
-        position: fixed;
-        left: -180px;
-        background-color: #FFE;
-        width: 145px;
-        height: 100%;
-
-        padding-top: 40px;
-
-    }
-
-    #sidebarToggle:checked ~ #sidebar{
-        left: 0px;
-    }
-
-    #navLinks a:hover {
-        color: $sidebar-text;
-    }
-}
 
 #navLinks {
+    display: block;
     padding: {
         left: 10px;
     }
@@ -122,146 +67,205 @@ $animate-time: 0.03s;
     ), webkit moz o);
 }
 
-.flag {
-    display: inline-block;
-    position: relative;
-    left: -3px;
 
-    text-align: center;
+.flagText {
-    z-index: 1;
+    font: {
-
+        family: $sidebar-font;
-    padding: {
+        size: 20px;
-        top: 5px;
+        weight: 600;
-        bottom: 5px;
-        left: 0px;
     }
-    
+    position: absolute;
-    .flagButton {
-        display: block;
-        float: left;
 
-        height: 50px;
+    line-height: normal;
-        width: 160px;
+    text-align: center;
 
-        border-radius: 0 5px 5px 0;
+    width: 160px;
+    right:0;
+    top:15px;
 
-        @include prefix(transition-property, width, webkit moz o);
+    color: $sidebar-text;
-        @include prefix(transition-property, border-radius, webkit moz o);
+}
 
-        .flagText {
+@media screen and (min-width: $mobile-width){
-            font: {
+    #navFlags {
-                family: $sidebar-font;
+        .flag {
-                size: 20px;
+            display: inline-block;
-                weight: 600;
+            position: relative;
-            }
+            left: -3px;
-            position: absolute;
 
-            line-height: normal;
             text-align: center;
+            z-index: 1;
 
-            width: 160px;
+            padding: {
-            right:0;
+                top: 5px;
-            top:15px;
+                bottom: 5px;
+                left: 0px;
+            }
+            
+            .flagButton {
+                display: block;
+                float: left;
 
-            color: $sidebar-text;
+                height: 50px;
+                width: 160px;
+
+                border-radius: 0 5px 5px 0;
+
+                @include prefix(transition-property, width, webkit moz o);
+                @include prefix(transition-property, border-radius, webkit moz o);
+            }
+
+            .flagButton::after{
+                z-index: -1;
+                content: " ";
+                display: block;
+                position: relative;
+                left: 3px;
+                top: 4px;
+
+                height: 50px;
+                width: 160px;
+                background-color: $flag-shadow;
+                border-radius: 0 5px 5px 0;
+
+                @include prefix(transition-property, width, webkit moz o);
+                @include prefix(transition-property, border-radius, webkit moz o);
+            }
+
+            .flagPoint{
+                position: absolute;
+                width: 0; 
+                height: 0;
+                left: 160px;
+                border-top: 25px solid transparent; 
+                border-bottom: 25px solid transparent;
+                border-left-width: 0px; 
+                border-left-style: solid;
+                background-color: transparent;
+
+                @include prefix(transition-property, left, webkit moz o);
+                @include prefix(transition-property, border-left-width, webkit moz o);
+            }
+
+            .flagPoint.blue {
+                border-left-color: $blue;
+            }
+            
+            .flagPoint.orange {
+                border-left-color: $orange;
+            }
+            
+            .flagPoint.green {
+                border-left-color: $green;
+            }
+            
+            .flagPoint.magenta {
+                border-left-color: $magenta;
+            }
+
+            .flagPoint::after{
+                position: absolute;
+                width: 0; 
+                height: 0;
+                border-top: 25px solid transparent; 
+                border-bottom: 25px solid transparent;
+                border-left: 0px solid $flag-shadow; 
+                z-index: -1;
+                content: " ";
+                left: -20 + 3px;
+                top: -25 + 4px;
+
+                @include prefix(transition-property, border-left-width, webkit moz o);
+            }
+
+            .flagFold{
+                display: block;
+                position: absolute;
+                z-index: -100;
+                left:0px;
+                top:55px;
+                width: 3px;
+                height: 3px;
+                mask-image: url('../svg/fold.svg');
+                -webkit-mask-image: url('../svg/fold.svg');
+            }
+
+        }
+
+        .flag:hover {
+
+            .flagButton {
+                width: 170px;
+                border-radius: 0;
+            }
+
+            .flagButton::after{
+                width: 170px;
+                border-radius: 0;
+            }
+
+            .flagPoint {
+                left: 170px;
+                border-left-width: 20px;
+            }
+            .flagPoint::after{
+                border-left-width: 20px;
+            }
+        }
+    }
+}
+ 
+
+@media screen and (max-width: $mobile-width){
+    #sidebar{
+        position: -webkit-sticky;
+        display: flex;
+        justify-content: space-between;
+        top: 0;
+        width: 100%;
+    }
+
+    #navFlags {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        li {
+            padding: 5px;
+            flex-grow: 1;
+            flex-shrink: 0;
+            min-width: 100px;
+        }
+        .flag {
+            text-decoration: none;
+
+            display: block;
+            flex-shrink: 0;
+            flex-grow: 1;
+            width: 100%;
+
+            .flagPoint, .flagFold {
+                display: none;
+            }
+
+            .flagButton{
+                border-radius: 5px;
+                display: block;
+                height: 50px;
+                width: 100%;
+
+                .flagText {
+                    display: block;
+                    position: relative;
+                    width: 100%;
+                }
+            }
         }
     }
 
-    .flagButton::after{
+    #navLinks {
-        z-index: -1;
+        display: none;
-        content: " ";
-        display: block;
-        position: relative;
-        left: 3px;
-        top: 4px;
-
-        height: 50px;
-        width: 160px;
-        background-color: $flag-shadow;
-        border-radius: 0 5px 5px 0;
-
-        @include prefix(transition-property, width, webkit moz o);
-        @include prefix(transition-property, border-radius, webkit moz o);
     }
 
-    .flagPoint{
-        position: absolute;
-        width: 0; 
-        height: 0;
-        left: 160px;
-        border-top: 25px solid transparent; 
-        border-bottom: 25px solid transparent;
-        border-left-width: 0px; 
-        border-left-style: solid;
-        background-color: transparent;
 
-        @include prefix(transition-property, left, webkit moz o);
+}
-        @include prefix(transition-property, border-left-width, webkit moz o);
-    }
-
-    .flagPoint.blue {
-        border-left-color: $blue;
-    }
-    
-    .flagPoint.orange {
-        border-left-color: $orange;
-    }
-    
-    .flagPoint.green {
-        border-left-color: $green;
-    }
-    
-    .flagPoint.magenta {
-        border-left-color: $magenta;
-    }
-
-    .flagPoint::after{
-        position: absolute;
-        width: 0; 
-        height: 0;
-        border-top: 25px solid transparent; 
-        border-bottom: 25px solid transparent;
-        border-left: 0px solid $flag-shadow; 
-        z-index: -1;
-        content: " ";
-        left: -20 + 3px;
-        top: -25 + 4px;
-
-        @include prefix(transition-property, border-left-width, webkit moz o);
-    }
-
-    .flagFold{
-        display: block;
-        position: absolute;
-        z-index: -100;
-        left:0px;
-        top:55px;
-        width: 3px;
-        height: 3px;
-        mask-image: url('../svg/fold.svg');
-    }
-
-}
-
-.flag:hover {
-
-    .flagButton {
-        width: 170px;
-        border-radius: 0;
-    }
-
-    .flagButton::after{
-        width: 170px;
-        border-radius: 0;
-    }
-
-    .flagPoint {
-        left: 170px;
-        border-left-width: 20px;
-    }
-    .flagPoint::after{
-        border-left-width: 20px;
-    }
-}
-
- 

css/style.scss

@@ -3,6 +3,7 @@
 @import 'util';
 @import 'colors';
 @import 'fonts';
+@import 'mobile';
 
 
 .blue {
@@ -80,25 +81,11 @@ body {
     }
 }
 
+
 // HEADER
+
+
 header {
-
-    @media screen and (max-width: $mobile-width){
-        top: 0;
-        right: 0;
-        z-index: 1;
-        background-color: darken($background, 5%);
-
-        border-bottom: 1px solid $subtle;
-        padding: {
-            top: 0;
-            bottom: 0;
-            left: 30px;
-        }
-           
-        line-height: 10px;
-    }
-
     #title {
         margin:0;
         padding: 10px;
@@ -107,10 +94,6 @@ header {
         font-weight: normal;
         font-size: 28px;
 
-        @media screen and (max-width: $mobile-width){
-            font-size: 16px;
-        }
-
         a {
             color: inherit;
             text-decoration: none;
@@ -128,10 +111,6 @@ header {
             font: {
                 size: 36px;
             }
-
-            @media screen and (max-width: $mobile-width){
-                font-size: 20px;
-            }
         }
     }
 
@@ -159,6 +138,45 @@ header {
 }
 
 
+@media screen and (max-width: $mobile-width){
+    header {
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        background-color: darken($background, 5%);
+
+
+        border-bottom: 1px solid $subtle;
+        padding: {
+            top: 0;
+            bottom: 0;
+        }
+        
+
+        #title {
+            font-size: $mobile-header-height * 0.5;
+            text-align: center;
+            padding: {
+                top: 0;
+                bottom: 5px;
+            }
+
+            #path {
+                display: none;
+            }
+
+            #page {
+                display: block;
+            }
+
+        }
+    }
+
+    #main {
+        flex-direction: column;
+    }
+}