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,7 +67,28 @@ $animate-time: 0.03s;
     ), webkit moz o);
 }
 
-.flag {
+
+.flagText {
+    font: {
+        family: $sidebar-font;
+        size: 20px;
+        weight: 600;
+    }
+    position: absolute;
+
+    line-height: normal;
+    text-align: center;
+
+    width: 160px;
+    right:0;
+    top:15px;
+
+    color: $sidebar-text;
+}
+
+@media screen and (min-width: $mobile-width){
+    #navFlags {
+        .flag {
             display: inline-block;
             position: relative;
             left: -3px;
@@ -147,24 +113,6 @@ $animate-time: 0.03s;
 
                 @include prefix(transition-property, width, webkit moz o);
                 @include prefix(transition-property, border-radius, webkit moz o);
-
-        .flagText {
-            font: {
-                family: $sidebar-font;
-                size: 20px;
-                weight: 600;
-            }
-            position: absolute;
-
-            line-height: normal;
-            text-align: center;
-
-            width: 160px;
-            right:0;
-            top:15px;
-
-            color: $sidebar-text;
-        }
             }
 
             .flagButton::after{
@@ -239,11 +187,12 @@ $animate-time: 0.03s;
                 width: 3px;
                 height: 3px;
                 mask-image: url('../svg/fold.svg');
+                -webkit-mask-image: url('../svg/fold.svg');
             }
 
-}
+        }
 
-.flag:hover {
+        .flag:hover {
 
             .flagButton {
                 width: 170px;
@@ -262,6 +211,61 @@ $animate-time: 0.03s;
             .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%;
+                }
+            }
+        }
+    }
+
+    #navLinks {
+        display: none;
+    }
+
+
+}

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;
+    }
+}