From 44cb4a43e1151ed2c4cd41b1bbfa8c2bd4e7a15f Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Wed, 14 Aug 2024 16:12:01 +0200
Subject: [PATCH] Configurable layout breakpoints

---
 quartz/components/styles/graph.scss    |  2 +-
 quartz/components/styles/listPage.scss |  2 +-
 quartz/components/styles/popover.scss  |  2 +-
 quartz/components/styles/search.scss   |  6 ++--
 quartz/styles/base.scss                | 44 ++++++++++++++------------
 quartz/styles/variables.scss           | 20 ++++++++++--
 6 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
index 5c18bdfb2..c2ce6ec90 100644
--- 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: $desktopBreakpoint) {
+      @media all and ($desktop) {
         width: 90%;
       }
     }
diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss
index d51568dc0..4d305d22d 100644
--- 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
index b1694f97c..38d612697 100644
--- 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
index b6e63fe74..3f97b1441 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -62,7 +62,7 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $desktopBreakpoint) {
+      @media all and ($desktop) {
         width: 90%;
       }
 
@@ -104,7 +104,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 +130,7 @@
           border-radius: 5px;
         }
 
-        @media all and (max-width: $tabletBreakpoint) {
+        @media all and ($tablet) {
           & > #preview-container {
             display: none !important;
           }
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 18945e481..7a3722c50 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -109,11 +109,11 @@ a {
 
 .desktop-only {
   display: initial;
-  @media all and (max-width: $mobileBreakpoint) {
+  @media all and ($mobile) {
     display: none;
   }
   &.toc {
-    @media all and (max-width: $tabletBreakpoint) {
+    @media all and ($tablet) {
       display: none;
     }
   }
@@ -121,21 +121,21 @@ a {
 
 .mobile-only {
   display: none;
-  @media all and (max-width: $mobileBreakpoint) {
+  @media all and ($mobile) {
     display: initial;
   }
   &.toc {
-    @media all and (max-width: $tabletBreakpoint) {
+    @media all and ($tablet) {
       display: initial;
     }
   }
 }
 
 .page {
-  @media all and (max-width: $desktopBreakpoint) {
+  @media all and ($desktop) {
     padding: 0 1rem;
   }
-  @media all and (max-width: $mobileBreakpoint) {
+  @media all and ($mobile) {
     margin: 0 auto;
     max-width: 100%;
   }
@@ -169,10 +169,10 @@ a {
   & > #quartz-body {
     width: 100%;
     display: flex;
-    @media all and (max-width: $desktopBreakpoint) {
+    @media all and ($desktop) {
       flex-direction: column;
     }
-    @media all and (max-width: $mobileBreakpoint) {
+    @media all and ($mobile) {
       padding: 0 1rem;
     }
 
@@ -190,11 +190,11 @@ a {
     }
 
     & .sidebar.left {
-      left: 0;
-      @media all and (min-width: $desktopBreakpoint) {
-        left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      @media all and ($desktop) {
+        left: 0;
       }
-      @media all and (max-width: $mobileBreakpoint) {
+      @media all and ($mobile) {
         gap: 0;
         align-items: center;
         position: initial;
@@ -208,11 +208,13 @@ a {
     & .sidebar.right {
       right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
       flex-wrap: wrap;
-      @media all and (min-width: $mobileBreakpoint) {
-        margin-left: $sidePanelWidth;
-        margin-right: 0;
+      margin-left: $sidePanelWidth;
+      margin-right: 0;
+      @media all and ($mobile) {
+        margin-left: inherit;
+        margin-right: inherit;
       }
-      @media all and (max-width: $desktopBreakpoint) {
+      @media all and ($desktop) {
         position: initial;
         flex-direction: row;
         padding: 0;
@@ -232,17 +234,17 @@ a {
     width: $pageWidth;
     margin-top: 1rem;
 
-    @media all and (max-width: $tabletBreakpoint) {
+    @media all and ($tablet) {
       width: initial;
     }
   }
 
   & .page-header {
     margin: $topSpacing auto 0 auto;
-    @media all and (max-width: $desktopBreakpoint) {
+    @media all and ($desktop) {
       margin: $topSpacing 0 0 0;
     }
-    @media all and (max-width: $mobileBreakpoint) {
+    @media all and ($mobile) {
       margin-top: 2rem;
     }
   }
@@ -252,13 +254,13 @@ a {
     margin-left: auto;
     margin-right: auto;
     width: $pageWidth;
-    @media all and (max-width: $desktopBreakpoint) {
+    @media all and ($desktop) {
       width: calc(100% - $sidePanelWidth);
       right: 0;
       margin-left: $sidePanelWidth;
       margin-right: 0;
     }
-    @media all and (max-width: $mobileBreakpoint) {
+    @media all and ($mobile) {
       width: initial;
       margin-left: 0;
     }
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 03cf68f78..338e8d5ee 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -1,7 +1,21 @@
+/**
+ * Layout breakpoints
+ * $mobile: screen width below this value will use mobile styles
+ * $tablet: screen width below this value will use tablet styles
+ * $desktop: screen width below this value will use desktop styles
+ * assuming mobile < tablet < desktop
+ */
+$breakpoints: (
+  mobile: 750px,
+  tablet: 1000px,
+  desktop: 1500px,
+);
+
+$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
+$tablet: "(max-width: #{map-get($breakpoints, tablet)})";
+$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
+
 $pageWidth: 750px;
-$mobileBreakpoint: 750px;
-$tabletBreakpoint: 1000px;
-$desktopBreakpoint: 1500px;
 $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $boldWeight: 700;