From ab9da02c60c962128820e6874e6f07c98bc3dda7 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 04 Jul 2023 17:08:32 +0000
Subject: [PATCH] fix indexing causing main thread freeze, various polish

---
 quartz/styles/base.scss |  105 +++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 91 insertions(+), 14 deletions(-)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index d7a1891..e741755 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -1,17 +1,13 @@
-@import "./syntax.scss";
-@import "./callouts.scss";
+@use "./syntax.scss";
+@use "./callouts.scss";
+@use "./variables.scss" as *;
 
 html {
   scroll-behavior: smooth;
-  & footer > p {
-    text-align: center !important;
-  }
 }
 
 body {
   margin: 0;
-  height: 100vh;
-  width: 100vw;
   max-width: 100%;
   box-sizing: border-box;
   background-color: var(--light);
@@ -32,7 +28,7 @@
 a {
   font-weight: 600;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
   color: var(--secondary);
 
   &:hover {
@@ -48,11 +44,70 @@
 }
 
 .page {
-  padding: 4rem 30vw;
-  margin: 0 auto;
-  max-width: 1000px;
-  @media all and (max-width: 1200px) {
-    padding: 25px 5vw;
+  & > .page-header {
+    max-width: $pageWidth;
+    margin: $topSpacing auto 0 auto;
+  }
+
+  & > #quartz-body {
+    width: 100%;
+    display: flex;
+
+    & .left, & .right {
+      flex: 1;
+      width: calc(calc(100vw - $pageWidth) / 2);
+    }
+
+    & .left-inner, & .right-inner {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      top: 0;
+      width: $sidePanelWidth;
+      margin-top: $topSpacing;
+      box-sizing: border-box;
+      padding: 0 4rem;
+      position: fixed;
+    }
+
+    & .left-inner {
+      left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+    }
+
+    & .right-inner {
+      right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+    }
+
+    & .center {
+      width: $pageWidth;
+      margin: 0 auto;
+    }
+  }
+}
+
+.desktop-only {
+  display: initial;
+  @media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
+    display: none;
+  }
+}
+
+.mobile-only {
+  display: none;
+  @media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
+    display: initial;
+  }
+}
+
+.page {
+  @media all and (max-width: $tabletBreakpoint) {
+    margin: 25px 5vw;
+    & .left, & .right {
+      padding: 0;
+      height: initial;
+      max-width: none;
+      position: initial;
+    }
   }
 
   & p {
@@ -63,9 +118,26 @@
     & > h1 {
       font-size: 2rem;
     }
+
+    // darkmode diagrams
+    & svg {
+      stroke: var(--dark);
+    }
+
+    & ul:has(input[type='checkbox']) {
+      list-style-type: none;
+      padding-left: 0;
+    }
   }
 }
 
+input[type="checkbox"] {
+  transform: translateY(2px);
+  color: var(--secondary);
+  border-color: var(--lightgray);
+  background-color: var(--light);
+}
+
 blockquote {
   margin: 1rem 0;
   border-left: 3px solid var(--secondary);
@@ -94,7 +166,7 @@
 }
 
 h1, h2, h3, h4, h5, h6 {
-  &[id] > a {
+  &[id] > a[href^="#"] {
     margin: 0 0.5rem;
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -164,6 +236,7 @@
 
 code {
   font-size: 0.9em;
+  color: var(--dark);
   font-family: var(--codeFont);
   border-radius: 5px;
   padding: 0.1rem 0.2rem;
@@ -224,3 +297,7 @@
   width: 100%;
   border-radius: 5px;
 }
+
+.spacer {
+  flex: 1 1 auto;
+}

--
Gitblit v1.10.0