Revert "Fix scrolling issues"

This reverts commit 272cf80.

Author: Chasen Le Hara

static/base.less

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

static/header.less

@@ -8,18 +8,16 @@
     }
 }
 .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;
     }
-    z-index: 101;
+    background-color: #FFFFFF;
+    z-index: 1;
+    box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
 }
 .brand {
     display: flex;
@@ -51,6 +49,7 @@
         display: none;
     }
 }
+
 // ----- CANJS LOGO AND VERSION DESKTOP -----
 @media screen and (min-width: @breakpoint) {
     .brand {

static/layout.less

@@ -1,22 +1,69 @@
+#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;
-  float: left;
+  scroll-behavior: smooth;
   width: @sidebar-width;
-  height: 100%;
-  margin-top: @brand-height;
-  padding-bottom: @gutter*2;
-  z-index: 51;
-  overflow-y: auto;
+  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;
+  }
 }
 #right {
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  background: white;
+  overflow-x: hidden;
+  // z-index: 90;
   position: relative;
-  float: right;
-  width: ~"calc(100% - " @sidebar-width ~")";
-  margin-top: @brand-height;
-  z-index: 1;
+  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;
 }
-@media screen and (max-width: @breakpoint){
-  #right {
+
+@media screen and (min-width: @breakpoint){
+  .top-left {
     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,26 +24,21 @@ label[for="nav-trigger"] {
 label:hover{
   background: @border-color;
 }
-
-@media screen and (max-width: @breakpoint){
-  .nav-trigger:not(:checked) ~ #everything #left {
-    left: -@sidebar-width;
-    overflow-x: hidden;
-    transition: left .5s ease-in-out;
-  }
-  .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 {
+.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;
     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 + label {

static/sidebar.less

@@ -56,9 +56,6 @@ 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: 275px;
+@sidebar-width: 274px;
 @transition-speed: .25s;
 
 /*----- TYPE -----*/