From 0114b6d68ef62d47d7f9d1021b6097b46cc0111c Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Sat, 15 Jun 2019 12:04:15 -0600
Subject: [PATCH] Reverse media queries for hiding/showing sidebar

Chrome is showing a brief flash of the page rearranging while loading,
where it initially has the sidebar hidden but then it "pops in" and
moves the page to the left. I believe this is due to the HTML ordering
(the sidebar is after the main content) combined with it being hidden by
default, which prevents it from being included in the layout while the
main content is still being loaded.

This should hopefully resolve it, but may need some more changes still.
---
 tildes/scss/_layout.scss | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/tildes/scss/_layout.scss b/tildes/scss/_layout.scss
index a92cb06..c5edbac 100644
--- a/tildes/scss/_layout.scss
+++ b/tildes/scss/_layout.scss
@@ -6,20 +6,21 @@ body {
     display: grid;
     grid-template-rows: auto 1fr auto;
 
-    grid-template-columns: 1fr minmax(auto, $main-max-width) 1fr;
+    grid-template-columns: 1fr minmax(auto, $main-max-width) auto 1fr;
     grid-template-areas:
-      ". header ."
-      ". main   ."
-      ". footer .";
-    grid-row-gap: 0.2rem;
+      ". header header  ."
+      ". main   sidebar ."
+      ". footer footer  .";
+    grid-gap: 0.4rem;
 
-    @media (min-width: $show-sidebar-width) {
-      grid-template-columns: 1fr minmax(auto, $main-max-width) auto 1fr;
+    @media (max-width: $show-sidebar-width) {
+      grid-template-columns: 1fr minmax(auto, $main-max-width) 1fr;
       grid-template-areas:
-        ". header header  ."
-        ". main   sidebar ."
-        ". footer footer  .";
-      grid-gap: 0.4rem;
+        ". header ."
+        ". main   ."
+        ". footer .";
+      grid-row-gap: 0.2rem;
+      grid-column-gap: 0;
     }
   }
 }
@@ -76,12 +77,13 @@ body {
 }
 
 #sidebar {
-  // hidden by default, show on wider screens
-  display: none;
+  // displayed by default, hide on smaller screens - doing it this way (vs. hidden by
+  // default) seems to be necessary to prevent a layout "shift" while loading
+  display: block;
+  grid-area: sidebar;
 
-  @media (min-width: $show-sidebar-width) {
-    display: block;
-    grid-area: sidebar;
+  @media (max-width: $show-sidebar-width) {
+    display: none;
   }
 
   width: $sidebar-width;