From 91189dfd2f4cb32e205117b327e0ae7a0c2dd716 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Mon, 03 Feb 2025 14:25:42 +0000
Subject: [PATCH] feat(explorer): collapsible mobile explorer (#1471)

---
 quartz/styles/base.scss |   76 +++++++++++++++++++++++---------------
 1 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 8511b2d..4389491 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "./variables.scss" as *;
 @use "./syntax.scss";
 @use "./callouts.scss";
@@ -85,7 +87,7 @@
     line-height: 1.4rem;
 
     &:has(> img) {
-      background-color: none;
+      background-color: transparent;
       border-radius: 0;
       padding: 0;
     }
@@ -121,7 +123,7 @@
 }
 
 .page {
-  max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
+  max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
   margin: 0 auto;
   & article {
     & > h1 {
@@ -151,27 +153,28 @@
 
   & > #quartz-body {
     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)};
+    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 ($tablet) {
+      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)};
+      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) {
+    @media all and not ($desktop) {
       padding: 0 1rem;
     }
     @media all and ($mobile) {
@@ -190,7 +193,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,14 +208,14 @@
     }
 
     & .sidebar.right {
-      grid-area: sidebar-right;
+      grid-area: grid-sidebar-right;
       margin-right: 0;
       flex-direction: column;
       @media all and ($mobile) {
         margin-left: inherit;
         margin-right: inherit;
       }
-      @media all and ($desktop) {
+      @media all and not ($desktop) {
         position: initial;
         height: unset;
         width: 100%;
@@ -232,7 +235,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 +244,11 @@
     }
 
     & .center > article {
-      grid-area: page-center;
+      grid-area: grid-center;
     }
 
-    & .page-footer {
-      grid-area: page-footer;
+    & footer {
+      grid-area: grid-footer;
     }
 
     & .center,
@@ -254,10 +257,11 @@
       min-width: 100%;
       margin-left: auto;
       margin-right: auto;
-      @media all and ($desktop) {
+      @media all and ($tablet) {
         margin-right: 0;
       }
       @media all and ($mobile) {
+        margin-right: 0;
         margin-left: 0;
       }
     }
@@ -387,7 +391,7 @@
     font-size: 0.9rem;
     padding: 0.1rem 0.5rem;
     border: 1px solid var(--lightgray);
-    width: max-content;
+    width: fit-content;
     border-radius: 5px;
     margin-bottom: -0.5rem;
     color: var(--darkgray);
@@ -511,6 +515,7 @@
   max-width: 100%;
   border-radius: 5px;
   margin: 1rem 0;
+  content-visibility: auto;
 }
 
 p > img + em {
@@ -554,7 +559,7 @@
   & > li:last-of-type {
     margin-bottom: 30px;
   }
-  &:after {
+  /*&:after {
     pointer-events: none;
     content: "";
     width: 100%;
@@ -565,7 +570,7 @@
     opacity: 1;
     transition: opacity 0.3s ease;
     background: linear-gradient(transparent 0px, var(--light));
-  }
+  }*/
 }
 
 .transclude {
@@ -586,3 +591,14 @@
   width: 100%;
   border-radius: 5px;
 }
+
+.navigation-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: var(--secondary);
+  transition: width 0.2s ease;
+  z-index: 9999;
+}

--
Gitblit v1.10.0