Fix scrolling issues

Fixes #507

Author: Ryan Wilson

static/base.less

@@ -1,6 +1,5 @@
 body {
   height: 100%;
-  overflow: hidden;
   margin: 0px;
 }
 html {

static/header.less

@@ -8,16 +8,18 @@
     }
 }
 .header {
+    position: fixed;
+    background-color: #FFFFFF;
+    width: 100%;
+    box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
     display: flex;
     align-items: center;
     flex-shrink: 0;
     padding: 0 @gutter*2;
     @media screen and (max-width: 499px){
         padding: 0 @gutter;
     }
-    background-color: #FFFFFF;
-    z-index: 1;
-    box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
+    z-index: 101;
 }
 .brand {
     display: flex;
@@ -47,7 +49,6 @@
         display: none;
     }
 }
-
 // ----- CANJS LOGO AND VERSION DESKTOP -----
 @media screen and (min-width: @breakpoint) {
     .brand {

static/layout.less

@@ -1,69 +1,22 @@
-#everything {
-  .flex;
-  -webkit-flex-flow: row wrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  flex-wrap: nowrap;
-  box-sizing: border-box;
-  height: 100%;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: 0;
-  transition: padding-bottom @transition-speed ease;
-}
 #left {
   position: fixed;
-  scroll-behavior: smooth;
+  float: left;
   width: @sidebar-width;
-  min-width: 0;
-  transition: min-width @transition-speed ease;
-  border-right: 3px solid #F4F4F4;
-  @media screen and (min-width: @breakpoint){
-    flex-shrink: 0;
-    padding: 0px;
-    position: relative;
-    width: auto;
-  }
+  height: 100%;
+  margin-top: @brand-height;
+  padding-bottom: @gutter*2;
+  z-index: 51;
+  overflow-y: auto;
 }
 #right {
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  background: white;
-  overflow-x: hidden;
-  // z-index: 90;
   position: relative;
-  left: 0;
-  .transition-left;
-  flex-grow: 1;
-  @media screen and (min-width: @breakpoint){
-    display: flex;
-    flex-grow: 1;
-  }
-}
-.column {
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-  .flex;
-  justify-content: flex-start;
-  align-items: stretch;
-  flex-wrap: nowrap;
-  flex-direction: column;
+  float: right;
+  width: ~"calc(100% - " @sidebar-width ~")";
+  margin-top: @brand-height;
+  z-index: 1;
 }
-
-@media screen and (min-width: @breakpoint){
-  .top-left {
+@media screen and (max-width: @breakpoint){
+  #right {
     width: 100%;
-    height: auto;
-  }
-}
-.top-right {
-  flex-shrink: 0;
-  flex-wrap: nowrap;
-  height: auto;
-  width: 100%;
-  .border-bottom;
-  @media screen and (min-width: @breakpoint){
-    border: none;
   }
 }

static/mobile.less

@@ -24,21 +24,26 @@ label[for="nav-trigger"] {
 label:hover{
   background: @border-color;
 }
-.nav-trigger ~ #everything #right {
-	width: 100%;
-}
-.nav-trigger:checked ~ #everything #right {
-  @media screen and (max-width: @breakpoint){
-    flex-shrink: 0;
-    width: auto;
-    position: fixed;
-    left: @sidebar-width;
+
+@media screen and (max-width: @breakpoint){
+  .nav-trigger:not(:checked) ~ #everything #left {
+    left: -@sidebar-width;
     overflow-x: hidden;
+    transition: left .5s ease-in-out;
   }
-}
-@media screen and (max-width: 999px) {
-  .nav-trigger:not(:checked) ~ #everything #left {
-    visibility: hidden;
+  .nav-trigger:checked ~ #everything #left {
+    left: 0;
+    transition: left .5s ease-in-out;
+  }
+  .nav-trigger:not(:checked) ~ #everything #right {
+    left: 0;
+    overflow-x: hidden;
+    transition: left .5s ease-in-out;
+  }
+  .nav-trigger:checked ~ #everything #right {
+    left: @sidebar-width;
+    overflow-x: hidden;
+    transition: left .5s ease-in-out;
   }
 }
 .nav-trigger + label {

static/sidebar.less

@@ -56,6 +56,9 @@ img.social-icon-small{
 		#left {
 			display: none;
 		}
+		#right {
+			width: 100%;
+		}
 	}
 }
 #left {

static/variables.less

@@ -14,7 +14,7 @@
 @brand-height: 53px;
 @breakpoint: 1000px;
 @gutter: 15px;
-@sidebar-width: 274px;
+@sidebar-width: 275px;
 @transition-speed: .25s;
 
 /*----- TYPE -----*/