From b0c079f24af6f93a01c4a0c619702effdcb3b21a Mon Sep 17 00:00:00 2001
From: Emile Bangma <ewjbangma@hotmail.com>
Date: Tue, 1 Oct 2024 17:49:13 +0200
Subject: [PATCH] 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 |  1 +
 quartz/styles/base.scss           | 12 ++++++------
 quartz/styles/variables.scss      | 24 ++++++++++++------------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 512b01d..3b2b6b3 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -74,6 +74,7 @@ button#toc {
   }
   > ul.overflow {
     max-height: none;
+    width: 100%;
   }
 
   @for $i from 0 through 6 {
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 9cf8cc9..61c918f 100644
--- a/quartz/styles/base.scss
+++ b/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,
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 3ac5a8b..9335e55 100644
--- a/quartz/styles/variables.scss
+++ b/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"',
 );