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

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

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index dbbdc5ae8..b0c09dcb9 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,397 +1,3 @@
 @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);
-  }
-}