From 94f9998f450f1d5249daafc4a7a974388b678ffc Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Sun, 18 May 2025 16:29:45 +0100
Subject: [PATCH] chore: reorganize css files

---
 src/layouts/Layout.astro              | 11 ++--
 src/styles/animation.css              | 74 +--------------------------
 src/styles/extend.css                 |  7 ++-
 src/styles/font.css                   | 38 ++++++++++++++
 src/styles/global.css                 | 49 ++++--------------
 src/styles/{heti.css => markdown.css} | 13 -----
 6 files changed, 61 insertions(+), 131 deletions(-)
 rename src/styles/{heti.css => markdown.css} (95%)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4a96ccd..6217cb2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -5,14 +5,15 @@ import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
 import GithubCard from '@/components/Widgets/GithubCard.astro'
 import GsapAnimation from '@/components/Widgets/GsapAnimation.astro'
-import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
+// import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
-import '@/styles/global.css'
-import '@/styles/font.css'
-import '@/styles/heti.css'
+import '@/styles/animation.css'
 import '@/styles/extend.css'
+import '@/styles/font.css'
+import '@/styles/global.css'
+import '@/styles/markdown.css'
 
 interface Props {
   postTitle?: string
@@ -50,6 +51,6 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
     <GsapAnimation />
     <Button supportedLangs={supportedLangs} />
     <GithubCard />
-    <PhotoSwipe />
+    <!-- <PhotoSwipe /> -->
   </body>
 </html>
diff --git a/src/styles/animation.css b/src/styles/animation.css
index 2231b6b..e45510d 100644
--- a/src/styles/animation.css
+++ b/src/styles/animation.css
@@ -31,76 +31,4 @@ html[data-theme-changing] [data-disable-theme-transition] {
   html {
     --at-apply: 'transition-colors duration-300 ease-out';
   }
-}
-
-/* Fade Up Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(3rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animation-fade-up > * {
-  opacity: 0;
-  animation: fadeUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc((var(--animation-order, 0) - 1) * var(--animation-interval, 0.08s));
-}
-.animation-fade-up > *:nth-child(1) { --animation-order: 1; }
-.animation-fade-up > *:nth-child(2) { --animation-order: 2; }
-.animation-fade-up > *:nth-child(3) { --animation-order: 3; }
-.animation-fade-up > *:nth-child(4) { --animation-order: 4; }
-.animation-fade-up > *:nth-child(5) { --animation-order: 5; }
-.animation-fade-up > *:nth-child(6) { --animation-order: 6; }
-.animation-fade-up > *:nth-child(7) { --animation-order: 7; }
-.animation-fade-up > *:nth-child(8) { --animation-order: 8; }
-.animation-fade-up > *:nth-child(9) { --animation-order: 9; }
-.animation-fade-up > *:nth-child(10) { --animation-order: 10; }
-.animation-fade-up > *:nth-child(11) { --animation-order: 11; }
-.animation-fade-up > *:nth-child(12) { --animation-order: 12; }
-.animation-fade-up > *:nth-child(13) { --animation-order: 13; }
-.animation-fade-up > *:nth-child(14) { --animation-order: 14; }
-.animation-fade-up > *:nth-child(15) { --animation-order: 15; }
-.animation-fade-up > *:nth-child(16) { --animation-order: 16; }
-.animation-fade-up > *:nth-child(17) { --animation-order: 17; }
-.animation-fade-up > *:nth-child(18) { --animation-order: 18; }
-.animation-fade-up > *:nth-child(19) { --animation-order: 19; }
-.animation-fade-up > *:nth-child(n+20) { --animation-order: 20; }
-
-/* Fade In Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(var(--animation-distance, 3rem));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animation-fade-in {
-  opacity: 0;
-  animation: fadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: var(--animation-delay, 0s);
-}
-
-@keyframes fadeInGoBack {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-  }
-}
-
-.animation-fade-goback {
-  opacity: 0;
-  animation: fadeInGoBack 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-}
+}
\ No newline at end of file
diff --git a/src/styles/extend.css b/src/styles/extend.css
index 16e9947..6b7e71c 100644
--- a/src/styles/extend.css
+++ b/src/styles/extend.css
@@ -1,4 +1,4 @@
-/* GitHub Card */
+/* GitHub Card >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 .gc-container {
   --at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5';
   --at-apply: 'transition-colors duration-300 ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
@@ -113,6 +113,11 @@
 }
 
 /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Video */
+/* iframe {
+  --at-apply: 'mb-4 w-full aspect-video';
+} */
+
 /* :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
 }
diff --git a/src/styles/font.css b/src/styles/font.css
index 7fc1fa1..0c2e030 100644
--- a/src/styles/font.css
+++ b/src/styles/font.css
@@ -1,3 +1,41 @@
+/* Snell Roundhand Static Font */
+@font-face {
+  font-family: "Snell-Bold";
+  src: url("/fonts/Snell-Bold.woff2") format("woff2");
+  font-display: swap;
+  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
+}
+@font-face {
+  font-family: "Snell-Black";
+  src: url("/fonts/Snell-Black.woff2") format("woff2");
+  font-display: swap;
+  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
+}
+
+/* STIXTwoText Variable Font */
+@font-face {
+  font-family: "STIX";
+  src: url("/fonts/STIX.woff2") format("woff2-variations");
+  font-display: swap;
+  font-weight: 400 700;
+  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
+}
+@font-face {
+  font-family: "STIX-Italic";
+  src: url("/fonts/STIX-Italic.woff2") format("woff2-variations");
+  font-display: swap;
+  font-weight: 400 700;
+  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
+}
+
+/* Minimal Subset of EarlySummerSerif Variable Font */
+@font-face {
+  font-family: "EarlySummer-Subset";
+  src: url("/fonts/EarlySummer-Subset.woff2") format("woff2-variations");
+  font-display: swap;
+  font-weight: 400 700;
+}
+
 /* EarlySummerSerif Variable Font */
 @font-face {font-family:"EarlySummer";src:url("/fonts/EarlySummer-Split/264097d8d9da16491b480a1c46afe035.woff2") format("woff2-variations");font-display: swap;font-weight: 400 700;unicode-range:U+B7,U+9F2C,U+9F3B,U+9F3E,U+9F84,U+9F99,U+9F9F;}
 @font-face {font-family:"EarlySummer";src:url("/fonts/EarlySummer-Split/c0df1afa44c13da520351e6aa9be3d9a.woff2") format("woff2-variations");font-display: swap;font-weight: 400 700;unicode-range:U+9711,U+9784,U+97A6,U+97C1,U+97C6,U+982C,U+983C,U+9854-9855,U+98B1,U+98B3,U+98BA,U+9935,U+993D,U+9951,U+99C4-99C6,U+9A12-9A13,U+9AEA,U+9AEE,U+9B06,U+9B0D,U+9B1A,U+9B28,U+9D12,U+9E78,U+9EB5,U+9EBA,U+9ED2,U+9ED9,U+9F07,U+9F15,U+9F62-9F63,U+FF01,U+FF08-FF09,U+FF0C,U+FF1A-FF1B,U+FF1F;}
diff --git a/src/styles/global.css b/src/styles/global.css
index 8573ced..c87ba4c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,6 +19,14 @@ body::selection {
   --at-apply: 'bg-mark';
 }
 
+/* Fix KaTeX Overflow Issue */
+.katex-display {
+  --at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
+}
+.katex-display::-webkit-scrollbar {
+  display: none;
+}
+
 /* Heading Anchor Link */
 .heading-anchor-link {
   --at-apply: 'inline-block translate-y-0.1em';
@@ -55,7 +63,8 @@ h4:hover .heading-anchor-link svg:hover {
 .highlight-hover::after {
   --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300';
 }
-/* Fix Position Issue on iOS */
+
+/* Fix Highlight Position Issue on iOS */
 @supports (-webkit-touch-callout: none) {
   .navbar-highlight-position-fix {
     --at-apply: 'after:bottom-0.68em';
@@ -64,41 +73,3 @@ h4:hover .heading-anchor-link svg:hover {
     --at-apply: 'after:bottom-0.39em';
   }
 }
-
-/* Snell Roundhand Static Font >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-@font-face {
-  font-family: "Snell-Bold";
-  src: url("/fonts/Snell-Bold.woff2") format("woff2");
-  font-display: swap;
-  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
-}
-@font-face {
-  font-family: "Snell-Black";
-  src: url("/fonts/Snell-Black.woff2") format("woff2");
-  font-display: swap;
-  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
-}
-
-/* STIXTwoText Variable Font */
-@font-face {
-  font-family: "STIX";
-  src: url("/fonts/STIX.woff2") format("woff2-variations");
-  font-display: swap;
-  font-weight: 400 700;
-  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
-}
-@font-face {
-  font-family: "STIX-Italic";
-  src: url("/fonts/STIX-Italic.woff2") format("woff2-variations");
-  font-display: swap;
-  font-weight: 400 700;
-  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
-}
-
-/* Minimal Subset of EarlySummerSerif Variable Font */
-@font-face {
-  font-family: "EarlySummer-Subset";
-  src: url("/fonts/EarlySummer-Subset.woff2") format("woff2-variations");
-  font-display: swap;
-  font-weight: 400 700;
-}
diff --git a/src/styles/heti.css b/src/styles/markdown.css
similarity index 95%
rename from src/styles/heti.css
rename to src/styles/markdown.css
index 140fb3c..9bb0305 100644
--- a/src/styles/heti.css
+++ b/src/styles/markdown.css
@@ -15,14 +15,6 @@
   --at-apply: 'mb-2 text-8.6 font-bold lg:text-9';
 }
 
-/* KaTeX Overflow Fix */
-.heti .katex-display {
-  --at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
-}
-.heti .katex-display::-webkit-scrollbar {
-  display: none;
-}
-
 /* Headings */
 .heti :where(h1, h2, h3, h4, h5, h6) {
   --at-apply: 'mb-4 font-semibold';
@@ -77,11 +69,6 @@
   --at-apply: 'mt-3 text-center text-sm text-secondary/80';
 }
 
-/* Video */
-.heti :where(iframe) {
-  --at-apply: 'mb-4 w-full aspect-video';
-}
-
 /* Code Blocks */
 .heti :where(pre) {
   --at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';