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

This reverts commit 0114b6d68ef62d47d7f9d1021b6097b46cc0111c.

This was unnecessary, just setting the width of the grid column will do
the job.
---
 tildes/scss/_layout.scss | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/tildes/scss/_layout.scss b/tildes/scss/_layout.scss
index b6cdbe8..73188ad 100644
--- a/tildes/scss/_layout.scss
+++ b/tildes/scss/_layout.scss
@@ -6,21 +6,20 @@ body {
     display: grid;
     grid-template-rows: auto 1fr auto;
 
-    grid-template-columns: 1fr minmax(auto, $main-max-width) $sidebar-width 1fr;
+    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;
 
-    @media (max-width: $show-sidebar-width) {
-      grid-template-columns: 1fr minmax(auto, $main-max-width) 1fr;
+    @media (min-width: $show-sidebar-width) {
+      grid-template-columns: 1fr minmax(auto, $main-max-width) $sidebar-width 1fr;
       grid-template-areas:
-        ". header ."
-        ". main   ."
-        ". footer .";
-      grid-row-gap: 0.2rem;
-      grid-column-gap: 0;
+        ". header header  ."
+        ". main   sidebar ."
+        ". footer footer  .";
+      grid-gap: 0.4rem;
     }
   }
 }
@@ -77,13 +76,12 @@ body {
 }
 
 #sidebar {
-  // 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;
+  // hidden by default, show on wider screens
+  display: none;
 
-  @media (max-width: $show-sidebar-width) {
-    display: none;
+  @media (min-width: $show-sidebar-width) {
+    display: block;
+    grid-area: sidebar;
   }
 
   width: $sidebar-width;