From b90590b9f487cdd49f019375fa5a09aad2e8ec1f Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 08 Jul 2023 21:36:02 +0000
Subject: [PATCH] polish

---
 quartz/styles/base.scss |  182 +++++++++++++++++++++++++++++++++++++++------
 1 files changed, 157 insertions(+), 25 deletions(-)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 99613f9..33eae9c 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 {
@@ -46,12 +43,23 @@
   }
 }
 
+.desktop-only {
+  display: initial;
+  @media all and (max-width: $fullPageWidth) {
+    display: none;
+  }
+}
+
+.mobile-only {
+  display: none;
+  @media all and (max-width: $fullPageWidth) {
+    display: initial;
+  }
+}
+
 .page {
-  padding: 4rem 30vw;
-  margin: 0 auto;
-  max-width: 1000px;
-  @media all and (max-width: 1200px) {
-    padding: 25px 5vw;
+  @media all and (max-width: $fullPageWidth) {
+    margin: 0 5vw;
   }
 
   & p {
@@ -62,12 +70,89 @@
     & > h1 {
       font-size: 2rem;
     }
+
+    & li:has(> input[type='checkbox']) {
+      list-style-type: none;
+      padding-left: 0;
+      margin-left: -1.4rem;
+    }
+  }
+
+  & > #quartz-body {
+    width: 100%;
+    display: flex;
+    @media all and (max-width: $fullPageWidth) {
+      flex-direction: column;
+    }
+
+    & .sidebar {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      top: 0;
+      width: $sidePanelWidth;
+      margin-top: $topSpacing;
+      box-sizing: border-box;
+      padding: 0 4rem;
+      position: fixed;
+      @media all and (max-width: $fullPageWidth) {
+        position: initial;
+        flex-direction: row;
+        padding: 0;
+        width: initial;
+        margin-top: 4rem;
+      }
+    }
+
+    & .sidebar.left {
+      left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      @media all and (max-width: $fullPageWidth) {
+        gap: 1rem;
+        align-items: center;
+      }
+    }
+
+    & .sidebar.right {
+      right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      & > * {
+        @media all and (max-width: $fullPageWidth) {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  & .page-header {
+    width: $pageWidth;
+    margin: $topSpacing auto 0 auto;
+    @media all and (max-width: $fullPageWidth) {
+      width: initial;
+      margin-top: 2rem;
+    }
+  }
+
+  & .center, & footer {
+    width: $pageWidth;
+    margin-left: auto;
+    margin-right: auto;
+    @media all and (max-width: $fullPageWidth) {
+      width: initial;
+      margin-left: 0;
+      margin-right: 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 +170,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;
   }
 }
 
@@ -114,13 +213,17 @@
   font-family: var(--codeFont);
   padding: 0.5rem;
   border-radius: 5px;
-  overflow-x: scroll;
+  overflow-x: auto;
   border: 1px solid var(--lightgray);
 
+  &:has(> code.mermaid) {
+    border: none;
+  }
+
   & > code {
     background: none;
     padding: 0;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     counter-reset: line;
     counter-increment: line 0;
     display: grid;
@@ -150,6 +253,7 @@
 
 code {
   font-size: 0.9em;
+  color: var(--dark);
   font-family: var(--codeFont);
   border-radius: 5px;
   padding: 0.1rem 0.2rem;
@@ -161,15 +265,14 @@
 }
 
 table {
-  border: 2px solid var(--gray);
-  width: 100%;
+  border: 1px solid var(--gray);
   padding: 1.5rem;
   border-collapse: collapse;
 }
 
 td, th {
   padding: 0.2rem 1rem;
-  border: 2px solid var(--gray);
+  border: 1px solid var(--gray);
 }
 
 img {
@@ -205,3 +308,32 @@
     padding: 0 1em
   }
 }
+
+audio, video {
+  width: 100%;
+  border-radius: 5px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+ul.overflow, ol.overflow {
+  height: 400px;
+  overflow-y: scroll;
+
+  & > li:last-of-type {
+    margin-bottom: 50px;
+  }
+
+  &:after {
+    pointer-events: none;
+    content: '';
+    width: 100%;
+    height: 50px;    
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background: linear-gradient(transparent 0px, var(--light));
+  }
+}

--
Gitblit v1.10.0