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 |  138 +++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 117 insertions(+), 21 deletions(-)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 99613f9..e741755 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -1,16 +1,13 @@
-@import "./syntax.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);
@@ -23,7 +20,7 @@
   border-radius: 5px;
 }
 
-p, ul, text, a, tr, td, li, ol, ul {
+p, ul, text, a, tr, td, li, ol, ul, .katex {
   color: var(--darkgray);
   fill: var(--darkgray);
 }
@@ -31,7 +28,7 @@
 a {
   font-weight: 600;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
   color: var(--secondary);
 
   &:hover {
@@ -47,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 {
@@ -62,12 +118,28 @@
     & > 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 {
-  font-style: italic;
-  margin-left: 0;
+  margin: 1rem 0;
   border-left: 3px solid var(--secondary);
   padding-left: 1rem;
   transition: border-color 0.2s ease;
@@ -85,12 +157,26 @@
   font-weight: revert;
   margin: 2rem 0 0;
 
-  &:hover > .hanchor {
-    color: var(--secondary);
-  }
-
   article > & > a {
-    color: var(--dark)
+    color: var(--dark);
+    &.internal {
+      background-color: transparent;
+    }
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  &[id] > a[href^="#"] {
+    margin: 0 0.5rem;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    transform: translateY(-0.1rem);
+    display: inline-block;
+    font-family: var(--codeFont);
+    user-select: none;
+  }
+  &[id]:hover > a {
+    opacity: 1;
   }
 }
 
@@ -120,7 +206,7 @@
   & > code {
     background: none;
     padding: 0;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     counter-reset: line;
     counter-increment: line 0;
     display: grid;
@@ -150,6 +236,7 @@
 
 code {
   font-size: 0.9em;
+  color: var(--dark);
   font-family: var(--codeFont);
   border-radius: 5px;
   padding: 0.1rem 0.2rem;
@@ -205,3 +292,12 @@
     padding: 0 1em
   }
 }
+
+audio, video {
+  width: 100%;
+  border-radius: 5px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

--
Gitblit v1.10.0