Prevent structural FOUC

hydecorp · Sep 29, 2016 · 3211332 · 3211332
1 parent aad8799
commit 3211332
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 15 deletions.
diff --git a/_sass/hydejack/_base-essential.scss b/_sass/hydejack/_base-essential.scss
@@ -14,6 +14,10 @@
   }
 }
 
+body {
+  border-left: 0.5rem solid #e8e8e8;
+}
+
 .sr-only {
   // will be properly styled in the non-essential part
   display: none;

diff --git a/_sass/hydejack/_content.scss b/_sass/hydejack/_content.scss
@@ -5,12 +5,12 @@
  */
 
 .content {
-  padding-top:    4rem;
   padding-bottom: 4rem;
 }
 
 @media (min-width: 48em) {
   .content {
+    padding-top: 4rem;
     max-width: 38rem;
     margin-left: 20rem;
     margin-right: 2rem;

diff --git a/_sass/hydejack/_drawer.scss b/_sass/hydejack/_drawer.scss
@@ -1,15 +1,13 @@
+// Use larg desktop styles for mobile as well when the JS "drawer" is active
 .drawer {
-  padding-left: 0.5rem;
-
-  /* Use larg desktop styles for mobile as well when the JS "drawer" is active */
   > .sidebar {
     position: fixed;
     bottom: 0;
     top: 0;
     left: -17.5rem;
     width: 18rem;
     will-change: transform;
-    /*box-shadow: 0.25rem 0 0.5rem rgba(0, 0, 0, 0.15)*/
+    margin-left: 0;
   }
 
   > .backdrop {
@@ -33,15 +31,11 @@
       pointer-events: all;
     }
   }
-
-  > .menu {
-    left: 0.5rem;
-  }
 }
 
 @media (min-width: 48em) {
+  // Disable drawer positiioning on larger screens (already done via JS, but just to be sure)
   .sidebar {
-    /* Disable drawer positiioning on larger screens (already done via JS, but just to be sure) */
     -webkit-transform: translate3d(0,0,0)!important;
     -ms-transform: translate3d(0,0,0)!important;
     transform: translate3d(0,0,0)!important;

diff --git a/_sass/hydejack/_menu.scss b/_sass/hydejack/_menu.scss
@@ -1,11 +1,8 @@
 .menu {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: inline-block;
   padding: 1.25rem 1rem ;
   color: #9a9a9a;
-  z-index: 2;
+  border-bottom: none;
 }
 
 @media (min-width: 48em) {

diff --git a/_sass/hydejack/_sidebar-essential.scss b/_sass/hydejack/_sidebar-essential.scss
@@ -20,6 +20,7 @@
   background-position: center center;
   min-height: 640px; // fallback
   min-height: 100vh;
+  margin-left: -0.5rem;
 
   /* Sidebar links */
   a {
@@ -64,5 +65,6 @@
     left: 0;
     bottom: 0;
     width: 18rem;
+    margin-left: 0;
   }
 }