feat: responsive design grid (jackyzha0#1354)

* Responsive design grid * Addressed PR feedback * Bump Quartz version 4.3.1 => 4.4.0 * Moved page-header into center * Updated docs with new layouts * Sync updated version number with package-lock * Table of Content scrollbar auto * Reset node_modules * Updated layout images * Fixed tablet layout * Finilazed layout images
parkisutama · Sep 28, 2024 · a4436f6 · a4436f6
1 parent 1cfe417
commit a4436f6
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 95 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.3.1",
+  "version": "4.4.0",
   "type": "module",
   "author": "jackyzha0 <[email protected]>",
   "license": "MIT",

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -242,8 +242,8 @@ export function renderPage(
               </div>
             </div>
             {RightComponent}
+            <Footer {...componentData} />
           </Body>
-          <Footer {...componentData} />
         </div>
       </body>
       {pageResources.js

diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
@@ -1,8 +1,9 @@
+@use "../../styles/variables.scss" as *;
+
 .backlinks {
-  @media all and not ($mobile) {
+  @media all and not ($desktop) {
     overflow-y: auto;
-    display: flex;
-    flex-direction: column;
+    display: initial;
     &:after {
       pointer-events: none;
       content: "";
@@ -16,15 +17,19 @@
       background: linear-gradient(transparent 0px, var(--light));
     }
 
-  & > h3 {
-    font-size: 1rem;
-    margin: 0;
-  }
+    &:has(> .overflow) {
+      position: unset;
+    }
+
+    & > h3 {
+      font-size: 1rem;
+      margin: 0;
+    }
 
-  & > ul {
-    list-style: none;
-    padding: 0;
-    margin: 0.5rem 0;
+    & > ul {
+      list-style: none;
+      padding: 0;
+      margin: 0.5rem 0;
 
       & > li {
         & > a {

diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
@@ -1,13 +1,8 @@
 @use "../../styles/variables.scss" as *;
 
 .explorer {
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
   &.desktop-only {
-    @media all and not ($mobile) {
-      display: flex;
-    }
+    overflow-y: auto;
   }
   &:after {
     pointer-events: none;
@@ -83,10 +78,6 @@ button#explorer {
     visibility: hidden;
   }
 
-  &.collapsed > .overflow::after {
-    opacity: 0;
-  }
-
   & ul {
     list-style: none;
     margin: 0.08rem 0;
@@ -101,6 +92,9 @@ button#explorer {
       pointer-events: all;
     }
   }
+  > #explorer-ul {
+    max-height: none;
+  }
 }
 
 svg {

diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
@@ -62,7 +62,7 @@
       height: 60vh;
       width: 50vw;
 
-      @media all and (max-width: $fullPageWidth) {
+      @media all and ($desktop) {
         width: 90%;
       }
     }

diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss
@@ -13,7 +13,7 @@ li.section-li {
     display: grid;
     grid-template-columns: fit-content(8em) 3fr 1fr;
 
-    @media all and (max-width: $mobileBreakpoint) {
+    @media all and ($mobile) {
       & > .tags {
         display: none;
       }

diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
@@ -70,7 +70,7 @@
     opacity 0.3s ease,
     visibility 0.3s ease;
 
-  @media all and (max-width: $mobileBreakpoint) {
+  @media all and ($mobile) {
     display: none !important;
   }
 }

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
@@ -3,7 +3,9 @@
 .search {
   min-width: fit-content;
   max-width: 14rem;
-  flex-grow: 0.3;
+  @media all and ($mobile) {
+    flex-grow: 0.3;
+  }
 
   & > .search-button {
     background-color: var(--lightgray);
@@ -62,7 +64,7 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $fullPageWidth) {
+      @media all and ($desktop) {
         width: 90%;
       }
 
@@ -104,7 +106,7 @@
           flex: 0 0 min(30%, 450px);
         }
 
-        @media all and (min-width: $tabletBreakpoint) {
+        @media all and not ($tablet) {
           &[data-preview] {
             & .result-card > p.preview {
               display: none;
@@ -130,7 +132,7 @@
           border-radius: 5px;
         }
 
-        @media all and (max-width: $tabletBreakpoint) {
+        @media all and ($tablet) {
           & > #preview-container {
             display: none !important;
           }

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
@@ -1,10 +1,5 @@
 .toc {
-  display: flex;
-  flex-direction: column;
-  &.desktop-only {
-    display: flex;
-    max-height: 40%;
-  }
+  overflow-y: auto;
 }
 
 button#toc {

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
@@ -14,7 +14,6 @@ html {
 body,
 section {
   margin: 0;
-  max-width: 100%;
   box-sizing: border-box;
   background-color: var(--light);
   font-family: var(--bodyFont);
@@ -113,25 +112,21 @@ a {
 
 .desktop-only {
   display: initial;
-  @media all and (max-width: $fullPageWidth) {
+  @media all and ($mobile) {
     display: none;
   }
 }
 
 .mobile-only {
   display: none;
-  @media all and (max-width: $fullPageWidth) {
+  @media all and ($mobile) {
     display: initial;
   }
 }
 
 .page {
-  @media all and (max-width: $fullPageWidth) {
-    margin: 0 auto;
-    padding: 0 1rem;
-    max-width: $pageWidth;
-  }
-
+  max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
+  margin: 0 auto;
   & article {
     & > h1 {
       font-size: 2rem;
@@ -159,74 +154,106 @@ a {
   }
 
   & > #quartz-body {
-    width: 100%;
-    display: flex;
-    @media all and (max-width: $fullPageWidth) {
-      flex-direction: column;
+    display: grid;
+    grid-template-columns: #{map-get($desktopGrid, templateColumns)};
+    grid-template-rows: #{map-get($desktopGrid, templateRows)};
+    column-gap: #{map-get($desktopGrid, columnGap)};
+    row-gap: #{map-get($desktopGrid, rowGap)};
+    grid-template-areas: #{map-get($desktopGrid, templateAreas)};
+    @media all and ($desktop) {
+      grid-template-columns: #{map-get($tabletGrid, templateColumns)};
+      grid-template-rows: #{map-get($tabletGrid, templateRows)};
+      column-gap: #{map-get($tabletGrid, columnGap)};
+      row-gap: #{map-get($tabletGrid, rowGap)};
+      grid-template-areas: #{map-get($tabletGrid, templateAreas)};
+    }
+    @media all and ($mobile) {
+      grid-template-columns: #{map-get($mobileGrid, templateColumns)};
+      grid-template-rows: #{map-get($mobileGrid, templateRows)};
+      column-gap: #{map-get($mobileGrid, columnGap)};
+      row-gap: #{map-get($mobileGrid, rowGap)};
+      grid-template-areas: #{map-get($mobileGrid, templateAreas)};
+    }
+
+    @media all and ($desktop) {
+      padding: 0 1rem;
+    }
+    @media all and ($mobile) {
+      margin: 0 auto;
     }
 
     & .sidebar {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
+      gap: 2rem;
       top: 0;
-      width: $sidePanelWidth;
-      margin-top: $topSpacing;
       box-sizing: border-box;
-      padding: 0 1rem;
-      position: fixed;
-
-      @media all and (max-width: $fullPageWidth) {
-        position: initial;
-        flex-direction: row;
-        padding: 0;
-        width: initial;
-        margin-top: 2rem;
-      }
+      padding: $topSpacing 2rem 2rem 2rem;
+      display: flex;
+      height: 100vh;
+      position: sticky;
     }
 
     & .sidebar.left {
       z-index: 1;
-      left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
-      @media all and (max-width: $fullPageWidth) {
+      grid-area: sidebar-left;
+      flex-direction: column;
+      @media all and ($mobile) {
         gap: 0;
         align-items: center;
+        position: initial;
+        display: flex;
+        height: unset;
+        flex-direction: row;
+        padding: 0;
+        padding-top: 2rem;
       }
     }
 
     & .sidebar.right {
-      right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
-      & > * {
-        @media all and (max-width: $fullPageWidth) {
+      grid-area: sidebar-right;
+      margin-right: 0;
+      flex-direction: column;
+      @media all and ($mobile) {
+        margin-left: inherit;
+        margin-right: inherit;
+      }
+      @media all and ($desktop) {
+        position: initial;
+        height: unset;
+        width: 100%;
+        flex-direction: row;
+        padding: 0;
+        & > * {
           flex: 1;
-          min-width: 140px;
+        }
+        & > .toc {
+          display: none;
         }
       }
     }
-  }
+    & .page-header,
+    & .page-footer {
+      margin-top: 1rem;
+    }
 
-  & .page-header,
-  & .page-footer {
-    width: $pageWidth;
-    margin-top: 1rem;
+    & .page-header {
+      grid-area: page-header;
+      margin: $topSpacing 0 0 0;
+      @media all and ($mobile) {
+        margin-top: 0;
+        padding: 0;
+      }
+    }
 
-    @media all and (max-width: $fullPageWidth) {
-      width: initial;
+    & .center > article {
+      grid-area: page-center;
     }
-  }
 
-  & .page-header {
-    margin: $topSpacing auto 0 auto;
-    @media all and (max-width: $fullPageWidth) {
-      margin-top: 2rem;
+    & .page-footer {
+      grid-area: page-footer;
     }
-  }
 
     & .center,
     & footer {
-      max-width: 100%;
-      min-width: 100%;
       margin-left: auto;
       margin-right: auto;
       @media all and ($desktop) {
@@ -238,7 +265,6 @@ a {
     }
     & footer {
       margin-left: 0;
-      margin-right: 0;
     }
   }
 }