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

@@ -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;