Quartz sync: May 19, 2025, 12:05 PM

Author: codeyoma

quartz/components/PageTitle.tsx

@@ -22,7 +22,7 @@ PageTitle.css = `
   gap: 0.5rem;
   text-decoration: none;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1025px) {
     flex-direction: column;
   }
 }
@@ -34,7 +34,7 @@ PageTitle.css = `
   font-family: var(--titleFont);
   white-space: nowrap;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1025px) {
     font-size: 1.7rem;
   }
 }
@@ -44,7 +44,7 @@ PageTitle.css = `
   width: 1.6rem;
   height: 1.6rem;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1025px) {
     width: auto;
     height: auto;
   }

quartz/styles/custom.scss

@@ -1,35 +1,28 @@
 @use "./base.scss";
+@use "./variables.scss" as *;
 
 // put your custom CSS here!
 
 .center article,
 p {
-    @media (min-width: 1400px) {
+    @media (#{$desktop}) {
         font-size: 1.2rem;
         line-height: 1.6;
     }
 }
 
 footer {
-    margin-top: 10rem;
+    margin-top: 6em;
 
     & p {
         font-size: small;
     }
 }
 
-// .explorer-content .folder-container {
-//     padding: 0.1em 0;
-
-//     @media (min-width: 1400px) {
-//         padding: 0.1em 0;
-//     }
-// }
-
 .explorer-content li {
     padding: 0.2em 0;
 
-    @media (min-width: 1400px) {
+    @media (#{$desktop}) {
         padding: 0.4em 0;
         line-height: 1.3;
     }
@@ -39,7 +32,7 @@ footer {
     margin: 0.3em;
     list-style-type: disc;
 
-    @media (min-width: 1400px) {
+    @media (#{$desktop}) {
         margin: 0.6em 0;
     }
 
@@ -48,11 +41,19 @@ footer {
 .center ul {
     padding-left: 1.2em;
 
-    @media (min-width: 1400px) {
+    @media (#{$desktop}) {
         padding-left: 1.4em;
     }
 }
 
+.center .section-li {
+    margin: 0.8em 0;
+
+    @media (#{$desktop}) {
+        margin: 1em 0;
+    }
+}
+
 .center h1 {
     margin-top: 2.5em;
 }
@@ -62,7 +63,8 @@ footer {
 }
 
 .page>#quartz-body>.sidebar.right>.toc {
-    @media (min-width: 1400px) {
+
+    @media (#{$desktop}) {
         li {
             margin: 0.4em 0;
         }
@@ -101,13 +103,39 @@ footer {
 
 .page>#quartz-body .sidebar {
 
-    padding: 2rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+
+    @media (min-width: #{$pageWidth}) {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+        // padding: 6rem 2rem 2rem;
+    }
+}
+
+.page>#quartz-body .left {
+
+    padding-left: 1rem;
+    padding-right: 1rem;
 
-    @media (min-width: 1024px) {
-        padding: 6rem 2rem 2rem;
+    @media (min-width: #{$pageWidth}) {
+        padding-left: 0.5rem;
+        padding-right: 1.5rem;
     }
 }
 
+.page>#quartz-body .right {
+
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    @media (min-width: #{$pageWidth}) {
+        padding-left: 1.5rem;
+        padding-right: 0.5rem;
+    }
+}
+
+
 .page-footer {
-    padding: 10rem 0;
+    padding: 6rem 0;
 }

quartz/styles/variables.scss

@@ -8,8 +8,8 @@
  * assuming mobile < desktop
  */
 $breakpoints: (
-  mobile: 800px,
-  desktop: 1200px,
+    mobile: 1024px,
+    desktop: 1200px,
 );
 
 $mobile: "(max-width: #{map.get($breakpoints, mobile)})";
@@ -24,35 +24,32 @@ $semiBoldWeight: 600;
 $normalWeight: 400;
 
 $mobileGrid: (
-  templateRows: "auto auto auto auto auto",
-  templateColumns: "auto",
-  rowGap: "5px",
-  columnGap: "5px",
-  templateAreas:
-    '"grid-sidebar-left"\
+    templateRows: "auto auto auto auto auto",
+    templateColumns: "auto",
+    rowGap: "5px",
+    columnGap: "5px",
+    templateAreas: '"grid-sidebar-left"\
       "grid-header"\
       "grid-center"\
       "grid-sidebar-right"\
       "grid-footer"',
 );
 $tabletGrid: (
-  templateRows: "auto auto auto auto",
-  templateColumns: "#{$sidePanelWidth} auto",
-  rowGap: "5px",
-  columnGap: "5px",
-  templateAreas:
-    '"grid-sidebar-left grid-header"\
+    templateRows: "auto auto auto auto",
+    templateColumns: "#{$sidePanelWidth} auto",
+    rowGap: "5px",
+    columnGap: "5px",
+    templateAreas: '"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",
-  templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
-  rowGap: "5px",
-  columnGap: "5px",
-  templateAreas:
-    '"grid-sidebar-left grid-header grid-sidebar-right"\
+    templateRows: "auto auto auto",
+    templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
+    rowGap: "5px",
+    columnGap: "5px",
+    templateAreas: '"grid-sidebar-left grid-header grid-sidebar-right"\
       "grid-sidebar-left grid-center grid-sidebar-right"\
       "grid-sidebar-left grid-footer grid-sidebar-right"',
 );