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

Emile Bangma

2024-10-01 b0c079f24af6f93a01c4a0c619702effdcb3b21a

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 @@
  }
  > ul.overflow {
    max-height: none;
    width: 100%;
  }

  @for $i from 0 through 6 {

 quartz/styles/base.scss

@@ -190,7 +190,7 @@

    & .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 @@
    }

    & .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 @@
    }

    & .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 @@
    }

    & .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 @@
  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 @@
  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 @@
  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"',
);