fix(layout): restore footer to the proper position (#1470)

* fix(layout): restore footer to the proper position

* align ToC scrollbar properly on short headers

quartz/components/styles/toc.scss

@@ -74,6 +74,7 @@ button#toc {
   }
   > ul.overflow {
     max-height: none;
+    width: 100%;
   }
 
   @for $i from 0 through 6 {

quartz/styles/base.scss

@@ -190,7 +190,7 @@ a {
 
     & .sidebar.left {
       z-index: 1;
-      grid-area: sidebar-left;
+      grid-area: grid-sidebar-left;
       flex-direction: column;
       @media all and ($mobile) {
         gap: 0;
@@ -205,7 +205,7 @@ a {
     }
 
     & .sidebar.right {
-      grid-area: sidebar-right;
+      grid-area: grid-sidebar-right;
       margin-right: 0;
       flex-direction: column;
       @media all and ($mobile) {
@@ -232,7 +232,7 @@ a {
     }
 
     & .page-header {
-      grid-area: page-header;
+      grid-area: grid-header;
       margin: $topSpacing 0 0 0;
       @media all and ($mobile) {
         margin-top: 0;
@@ -241,11 +241,11 @@ a {
     }
 
     & .center > article {
-      grid-area: page-center;
+      grid-area: grid-center;
     }
 
-    & .page-footer {
-      grid-area: page-footer;
+    & footer {
+      grid-area: grid-footer;
     }
 
     & .center,

quartz/styles/variables.scss

@@ -27,11 +27,11 @@ $mobileGrid: (
   rowGap: "5px",
   columnGap: "5px",
   templateAreas:
-    '"sidebar-left"\
-      "page-header"\
-      "page-center"\
-      "sidebar-right"\
-      "page-footer"',
+    '"grid-sidebar-left"\
+      "grid-header"\
+      "grid-center"\
+      "grid-sidebar-right"\
+      "grid-footer"',
 );
 $tabletGrid: (
   templateRows: "auto auto auto auto",
@@ -39,10 +39,10 @@ $tabletGrid: (
   rowGap: "5px",
   columnGap: "5px",
   templateAreas:
-    '"sidebar-left page-header"\
-      "sidebar-left page-center"\
-      "sidebar-left sidebar-right"\
-      "sidebar-left page-footer"',
+    '"grid-sidebar-left grid-header"\
+      "grid-sidebar-left grid-center"\
+      "grid-sidebar-left grid-sidebar-right"\
+      "grid-sidebar-left grid-footer"',
 );
 $desktopGrid: (
   templateRows: "auto auto auto",
@@ -50,7 +50,7 @@ $desktopGrid: (
   rowGap: "5px",
   columnGap: "5px",
   templateAreas:
-    '"sidebar-left page-header sidebar-right"\
-      "sidebar-left page-center sidebar-right"\
-      "sidebar-left page-footer sidebar-right"',
+    '"grid-sidebar-left grid-header grid-sidebar-right"\
+      "grid-sidebar-left grid-center grid-sidebar-right"\
+      "grid-sidebar-left grid-footer grid-sidebar-right"',
 );