Improved mobile navigation for homepage and side menu

client-side-source/styles/components.less

@@ -6,18 +6,21 @@
  * Side Nav *
 \************/
 .side-nav{
-  padding-top: 65px;
+  padding-top: 1em;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  position: fixed;
 
-li{
-   height: 2.5em;
-  padding: 5px 0 0 5px;
+  ul.flex{ flex: 1; }
+  li{
+    height: 2.5em;
+    padding: 5px 0 0 5px;
     a{ line-height: 10px; height: 45px; }
- }
+  }
 
   .nav-fixed-bottom{
-    position: absolute;
-    bottom: 8em;
-    height: 8em;
+    height: 10em;
     width: 100%;
   }
 }

client-side-source/styles/general.less

@@ -12,6 +12,10 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  @media only screen and (max-width:640px) {
+    height: auto !important;
+  }
+
 }
 
 main {
@@ -22,6 +26,9 @@ main {
 
 footer{
   padding: 0;
+  @media only screen and (max-width:640px) {
+    .col{ margin: 0.5em 0; }
+  }
 }
 
 .whitebg{

client-side-source/styles/pages.less

@@ -18,6 +18,17 @@ h1.title{
   }
 }
 
+//nav{
+//  @media all and (max-width: 600px) {
+//    position: fixed;
+//    z-index: 10;
+//  }
+//}
+//
+//.mobile-nav-trick{
+//  margin-bottom: 3em;
+//}
+// TODO come back to this - make navbar fixed for mobile
 
 #nav-mobile li a{
   z-index: 5;
@@ -47,7 +58,7 @@ h1.title{
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 10;
+  z-index: 11;
   opacity: 0.65;
   img{ width: 5em; }
 }

views/layout.jade

@@ -14,7 +14,7 @@ html
     unless hideNav
       include ./navbar
     else
-      .hide-on-med-and-up: include ./navbar
+      .hide-on-med-and-up.mobile-nav-trick: include ./navbar
     block content
     include ./footer_scripts
     block scripts

views/sidenav.jade

@@ -1,5 +1,5 @@
 #slide-out.side-nav
-    ul
+    ul.flex
         li: a(href='/') Home Page
         each page in pages
             li: a(href='/#{page.page}')= page.title