From d7a6f04f7b3d6efd63f53e74c014d2a14e3e8490 Mon Sep 17 00:00:00 2001
From: enneaa <shenb12@hotmail.com>
Date: Tue, 18 Mar 2025 20:47:52 +0800
Subject: [PATCH] Update custom.scss

---
 quartz/styles/custom.scss | 394 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 394 insertions(+)

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index b0c09dcb9..dbbdc5ae8 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,3 +1,397 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+@use "./variables.scss" as *;
+
+body[data-slug="index"] img {
+  filter: invert(0%);
+  opacity: 0.85;
+}
+
+body {
+  position: relative;
+  min-height: 100vh;
+
+  // only allow synthesizing italics but not bold
+  font-synthesis: style;
+}
+
+img[src*="banner.svg"] {
+  opacity: 0.8;
+}
+
+[saved-theme="dark"] body[data-slug="index"] img[src*="banner.svg"] {
+  filter: invert(100%);
+}
+
+body[data-slug="thoughts/craft"] {
+  & li:has(> img, > video) {
+    list-style-type: none;
+
+    & > img,
+    & > video {
+      margin: 1rem 0;
+    }
+  }
+
+  article > ul {
+    padding-left: 0;
+
+    & > li {
+      list-style-type: none;
+      margin: 1rem 0;
+    }
+  }
+}
+
+.left {
+  display: grid !important;
+  gap: 1.5rem !important;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content min-content min-content min-content;
+  align-items: center;
+
+  .page-title {
+    grid-area: 1 / 1 / 2 / 3;
+  }
+
+  .search {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+
+  .darkmode {
+    grid-area: 2 / 2 / 3 / 3;
+  }
+
+  .toc {
+    grid-row: 3;
+    grid-column: 1 / 3;
+  }
+
+  .recent-notes:nth-last-child(2) {
+    grid-area: 3 / 1 / 3 / 3;
+  }
+
+  .recent-notes:nth-last-child(1) {
+    grid-area: 4 / 1 / 4 / 3;
+  }
+
+  @media all and ($mobile) {
+    display: flex !important;
+  }
+}
+
+hr {
+  overflow: visible;
+  padding: 0;
+  height: 0;
+  margin: 2em auto;
+  border: none;
+  text-align: center;
+  width: 100%;
+
+  &:after {
+    content: "* * *";
+    display: inline-block;
+    margin: -1em 0 0.5em;
+    font-size: 1.5em;
+    padding: 0.5em 1em;
+    color: var(--gray);
+  }
+}
+
+pre.poetry {
+  font-size: 2rem;
+  font-family: biro_script_standardRgus;
+  border: none;
+  padding: 0;
+  position: unset;
+}
+
+.meta,
+.content-meta {
+  font-family: biro_script_standardRgus, var(--bodyFont);
+  font-size: 1.25rem;
+}
+
+audio::-webkit-media-controls-panel {
+  background-color: var(--lightgray);
+}
+
+#quartz-root {
+  isolation: isolate;
+}
+
+// fade-in elements
+#quartz-body {
+  [saved-theme="dark"] & {
+    --animation-name: fade2;
+  }
+
+  [saved-theme="light"] & {
+    --animation-name: fade;
+  }
+
+  @for $i from 1 through 4 {
+    @for $j from 1 through 8 {
+      & > *:nth-child(#{$i}) > *:nth-child(#{$j}) {
+        animation: var(--animation-name) 2s ease 1 normal backwards;
+        animation-delay: #{0.1 * $j + 0.4 * $i}s;
+      }
+    }
+  }
+}
+
+// hack to duplicate the fade-in animation so that we reset the animation in both directions
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade2 {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// dappled light
+#dappled-light {
+  animation-duration: 0s;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  pointer-events: none;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  isolation: isolate;
+
+  --day: #fffdfa;
+  --evening: #fccc83;
+  --dusk: #db7a2a;
+  --night: #0f131c;
+  --dawn: #16132b;
+  --morning: #9fb3bf;
+
+  --shadow: #1a1917;
+  --bounce-light: #f5d7a6;
+  --timing-fn: cubic-bezier(0.455, 0.19, 0, 0.985);
+
+  body.animation-ready & {
+    animation-play-state: running;
+    animation-duration: 1s;
+    animation-name: sunrise;
+  }
+
+  [saved-theme="dark"] body.animation-ready & {
+    animation-duration: 1.5s;
+    animation-name: sunset;
+  }
+
+  [saved-theme="dark"] & {
+    --shadow: #030307;
+    --bounce-light: #1b293f;
+  }
+
+  & > #progressive-blur {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+
+    & > div {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      backdrop-filter: blur(var(--blur-amount));
+      mask-image: linear-gradient(
+        252deg,
+        transparent,
+        transparent var(--stop1),
+        black var(--stop2),
+        black
+      );
+
+      &:nth-child(1) {
+        --blur-amount: 8px;
+        --stop1: 0%;
+        --stop2: 0%;
+      }
+
+      &:nth-child(2) {
+        --blur-amount: 72px;
+        --stop1: 30%;
+        --stop2: 60%;
+      }
+    }
+  }
+
+  #glow {
+    position: absolute;
+    background: linear-gradient(309deg, var(--bounce-light), var(--bounce-light) 20%, transparent);
+    transition: background 1s var(--timing-fn);
+    height: 100%;
+    width: 100%;
+    opacity: 0.5;
+  }
+
+  #glow-bounce {
+    content: "";
+    position: absolute;
+    background: linear-gradient(355deg, var(--bounce-light) 0%, transparent 30%, transparent 100%);
+    transition: background 1s var(--timing-fn);
+    opacity: 0.5;
+    height: 100%;
+    width: 100%;
+    bottom: 0;
+  }
+
+  & > .perspective {
+    position: absolute;
+    transition:
+      transform 1.7s var(--timing-fn),
+      opacity 4s ease;
+    top: -30vh;
+    right: 0;
+    width: 80vw;
+    height: 130vh;
+    opacity: 0.07;
+    background-blend-mode: darken;
+    transform-origin: top right;
+    transform-style: preserve-3d;
+    transform: matrix3d(0.75, -0.0625, 0, 0.0008, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+
+    [saved-theme="dark"] & {
+      opacity: 0.3;
+      transform: matrix3d(0.8333, 0.0833, 0, 0.0003, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+  }
+
+  #leaves {
+    position: absolute;
+    background-size: cover;
+    background-repeat: no-repeat;
+    bottom: 0px;
+    right: -600px;
+    width: 1600px;
+    height: 1400px;
+    background-image: url("/static/leaves.png");
+    perspective: 400px;
+    animation: billow 8s ease-in-out infinite;
+  }
+
+  #blinds {
+    position: relative;
+    width: 100%;
+
+    & .shutter,
+    & .bar {
+      background-color: var(--shadow);
+    }
+
+    & .shutter {
+      width: 100%;
+      height: 40px;
+      transition: height 1s var(--timing-fn);
+
+      [saved-theme="dark"] & {
+        height: 80px;
+      }
+    }
+
+    & .shutters {
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      gap: 60px;
+      transition: gap 1s var(--timing-fn);
+
+      [saved-theme="dark"] & {
+        gap: 20px;
+      }
+    }
+
+    & > .vertical {
+      top: 0;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+
+      & > .bar {
+        width: 12px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+@keyframes sunrise {
+  0% {
+    background-color: var(--night);
+  }
+
+  10% {
+    background-color: var(--dawn);
+  }
+
+  35% {
+    background-color: var(--morning);
+  }
+
+  100% {
+    background-color: var(--day);
+  }
+}
+
+@keyframes sunset {
+  0% {
+    background-color: var(--day);
+  }
+
+  30% {
+    background-color: var(--evening);
+  }
+
+  60% {
+    background-color: var(--dusk);
+  }
+
+  90% {
+    background-color: var(--dawn);
+  }
+
+  100% {
+    background-color: var(--night);
+  }
+}
+
+@keyframes billow {
+  0% {
+    transform: rotateX(0deg) rotateY(0deg) scale(1);
+  }
+
+  18% {
+    transform: rotateX(1deg) rotateY(2deg) scale(1.03);
+  }
+
+  32% {
+    transform: rotateX(-4deg) rotateY(-2deg) scale(0.96);
+  }
+
+  66% {
+    transform: rotateX(3deg) rotateY(-1deg) scale(1.04);
+  }
+
+  100% {
+    transform: rotateX(0deg) rotateY(0deg) scale(1);
+  }
+}