From 17113d0c197b2a055c4c0f1d959ec72646afb705 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 25 Apr 2024 15:11:45 +0800
Subject: [PATCH] refactor: css files

Signed-off-by: Innei <i@innei.in>
---
 src/styles/index.css       |   2 +-
 src/styles/layer.css       | 297 +++++++++++++++++++++++++++++++++++++
 src/styles/tailwindcss.css |  17 ---
 src/styles/theme.css       | 211 ++------------------------
 tailwind.config.ts         |   2 +-
 5 files changed, 312 insertions(+), 217 deletions(-)
 create mode 100644 src/styles/layer.css

diff --git a/src/styles/index.css b/src/styles/index.css
index 07cf64137e..8b48100f47 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,6 +1,6 @@
 @import './tailwindcss.css';
 @import './variables.css';
-@import './uikit.css';
+
 @import './scrollbar.css';
 @import './print.css';
 @import './clerk.css';
diff --git a/src/styles/layer.css b/src/styles/layer.css
new file mode 100644
index 0000000000..8be88606fa
--- /dev/null
+++ b/src/styles/layer.css
@@ -0,0 +1,297 @@
+@media print {
+  /* styles for print */
+  html.noise body::before {
+    display: none;
+  }
+}
+
+@layer components {
+  /* Extend Tailwind classnames */
+  .border-border {
+    @apply border-zinc-900/10 dark:border-zinc-700;
+  }
+
+  .mask-both {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 20px,
+      rgb(255, 255, 255) calc(100% - 20px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+  .mask-both-lg {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 50px,
+      rgb(255, 255, 255) calc(100% - 50px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-b {
+    mask-image: linear-gradient(
+      rgb(255, 255, 255) calc(100% - 20px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-b-lg {
+    mask-image: linear-gradient(
+      rgb(255, 255, 255) calc(100% - 50px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-t {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 20px
+    );
+  }
+
+  .mask-t-lg {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 50px
+    );
+  }
+
+  .cover-mask-b {
+    mask-image: linear-gradient(180deg, #fff -17.19%, #00000000 92.43%);
+  }
+}
+
+@layer components {
+  .scrollbar-none::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  .shiro-link--underline,
+  .shiro-timeline a {
+    color: currentColor;
+    background-image: linear-gradient(
+      theme(colors.accent),
+      theme(colors.accent)
+    );
+    background-size: 0% 1.5px;
+    background-repeat: no-repeat;
+    /* NOTE: this won't work with background images   */
+    text-shadow:
+      0.05em 0 theme(colors.base-100),
+      -0.05em 0 theme(colors.base-100);
+    transition: all 500ms ease;
+
+    @apply border-0 no-underline;
+
+    background-position: left 1.2em;
+
+    &:hover {
+      background-size: 100% 1.5px;
+
+      transition: all 250ms ease;
+    }
+  }
+
+  .shiro-timeline {
+    position: relative;
+
+    & a {
+      line-height: 1.6;
+    }
+
+    @apply min-w-0 flex-1 list-inside justify-between;
+
+    & > li::before {
+      content: '';
+      position: absolute;
+      left: -17px;
+      bottom: 0;
+      border-left: 2px solid theme(colors.accent);
+    }
+
+    & > li:first-child:last-child::before {
+      border-left: 0;
+    }
+
+    & > li:not(:first-child):not(:last-child)::before {
+      top: 0;
+    }
+
+    & > li:first-child::before {
+      top: 50%;
+    }
+
+    & > li:last-child::before {
+      bottom: 50%;
+      top: 0;
+    }
+
+    & > li {
+      position: relative;
+      list-style-type: none;
+
+      line-height: 1.6;
+      padding: 3px 0;
+      margin: 0 0 0 1rem;
+    }
+
+    & > li::after {
+      content: '';
+      left: calc(-1rem - 6px);
+      top: 50%;
+      transform: translateY(-50%);
+      height: 8px;
+      width: 8px;
+      border-radius: 50%;
+      position: absolute;
+      background-color: theme(colors.accent);
+    }
+  }
+}
+
+@layer components {
+  .mask-cover {
+    mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 100%) 90%);
+    opacity: 0.3;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .group:hover .mask-cover {
+    opacity: 0.5;
+  }
+
+  .animation-blink {
+    animation: blink 1.2s linear infinite;
+  }
+
+  .mask-top {
+    mask-image: linear-gradient(to top, transparent, rgb(0 0 0 / 100%) 90%);
+    opacity: 0.3;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 0;
+    }
+    40% {
+      opacity: 0;
+    }
+    40.1% {
+      opacity: 1;
+    }
+    99.9% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  /* 404 */
+  .hit-the-floor {
+    font-size: 12em;
+    font-weight: bold;
+    font-family: Helvetica;
+    text-shadow:
+      0 1px 0 #ccc,
+      0 2px 0 #c9c9c9,
+      0 3px 0 #bbb,
+      0 4px 0 #b9b9b9,
+      0 5px 0 #aaa,
+      0 6px 1px rgba(0, 0, 0, 0.1),
+      0 0 5px rgba(0, 0, 0, 0.1),
+      0 1px 3px rgba(0, 0, 0, 0.3),
+      0 3px 5px rgba(0, 0, 0, 0.2),
+      0 5px 10px rgba(0, 0, 0, 0.25),
+      0 10px 10px rgba(0, 0, 0, 0.2),
+      0 20px 20px rgba(0, 0, 0, 0.15);
+  }
+}
+
+@layer components {
+  .page-head-gradient {
+    @apply pointer-events-none absolute inset-x-0 top-0 h-[500px] w-full;
+
+    background: linear-gradient(
+      to right,
+      rgb(var(--gradient-from) / 0.3) 0,
+      rgb(var(--gradient-to) / 0.3) 100%
+    );
+
+    mask-image: linear-gradient(#000 0, #ffffff00 70%);
+
+    animation: fade-in 1s ease 0.2s both;
+  }
+
+  [data-theme='dark'] .page-head-gradient {
+    @apply brightness-75;
+
+    background: linear-gradient(
+      90deg,
+      rgb(var(--gradient-from) / 0.2) 0,
+      rgb(var(--gradient-to) / 0.2) 100%
+    );
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-80%);
+    }
+    50% {
+      opacity: 0.5;
+      transform: translateY(-80%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .signature-animated path {
+    stroke-dasharray: 2400;
+    stroke-dashoffset: 2400;
+    fill: transparent;
+    animation: drawSignature 8s linear infinite both;
+    stroke-width: 2px;
+    stroke: theme(colors.base-content);
+  }
+
+  @keyframes drawSignature {
+    0% {
+      stroke-dashoffset: 2400;
+    }
+
+    15% {
+      fill: transparent;
+    }
+
+    35%,
+    75% {
+      stroke-dashoffset: 0;
+      fill: theme(colors.base-content);
+    }
+
+    90%,
+    100% {
+      stroke-dashoffset: 2400;
+      fill: transparent;
+    }
+  }
+
+  .animation-wave {
+    animation: wave 2s infinite;
+  }
+
+  @keyframes wave {
+    0%,
+    100% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(20deg);
+    }
+  }
+}
diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css
index 9360f2a31b..e374d196db 100644
--- a/src/styles/tailwindcss.css
+++ b/src/styles/tailwindcss.css
@@ -44,23 +44,6 @@ html body {
   outline: 0 !important;
   box-shadow: theme(colors.accent) 0px 0px 0px 1px;
 }
-
-html.noise body::before {
-  position: fixed;
-  inset: 0;
-  content: '';
-  opacity: 0.04;
-  background-repeat: repeat;
-  filter: blur(3px);
-}
-
-@media print {
-  /* styles for print */
-  html.noise body::before {
-    display: none;
-  }
-}
-
 * {
   tab-size: 2;
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 01153378e4..38bd86f71e 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,205 +1,20 @@
-@layer components {
-  /* Extend Tailwind classnames */
-  .border-border {
-    @apply border-zinc-900/10 dark:border-zinc-700;
-  }
-
-  .mask-both {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 20px,
-      rgb(255, 255, 255) calc(100% - 20px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-  .mask-both-lg {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 50px,
-      rgb(255, 255, 255) calc(100% - 50px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-
-  .mask-b {
-    mask-image: linear-gradient(
-      rgb(255, 255, 255) calc(100% - 20px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-
-  .mask-b-lg {
-    mask-image: linear-gradient(
-      rgb(255, 255, 255) calc(100% - 50px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-
-  .mask-t {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 20px
-    );
-  }
-
-  .mask-t-lg {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 50px
-    );
-  }
-
-  .cover-mask-b {
-    mask-image: linear-gradient(180deg, #fff -17.19%, #00000000 92.43%);
-  }
+html.noise body::before {
+  position: fixed;
+  inset: 0;
+  content: '';
+  opacity: 0.04;
+  background-repeat: repeat;
+  /* filter: blur(3px); */
 }
 
-@layer components {
-  .scrollbar-none::-webkit-scrollbar {
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  .shiro-link--underline,
-  .shiro-timeline a {
-    color: currentColor;
-    background-image: linear-gradient(
-      theme(colors.accent),
-      theme(colors.accent)
-    );
-    background-size: 0% 1.5px;
-    background-repeat: no-repeat;
-    /* NOTE: this won't work with background images   */
-    text-shadow:
-      0.05em 0 theme(colors.base-100),
-      -0.05em 0 theme(colors.base-100);
-    transition: all 500ms ease;
-
-    @apply border-0 no-underline;
-
-    background-position: left 1.2em;
-
-    &:hover {
-      background-size: 100% 1.5px;
-
-      transition: all 250ms ease;
-    }
-  }
-
-  .shiro-timeline {
-    position: relative;
-
-    & a {
-      line-height: 1.6;
-    }
-
-    @apply min-w-0 flex-1 list-inside justify-between;
-
-    & > li::before {
-      content: '';
-      position: absolute;
-      left: -1.05rem;
-      bottom: 0;
-      border-left: 1px solid theme(colors.accent);
-    }
-
-    & > li:first-child:last-child::before {
-      border-left: 0;
-    }
-
-    & > li:not(:first-child):not(:last-child)::before {
-      top: 0;
-    }
-
-    & > li:first-child::before {
-      top: 50%;
-    }
-
-    & > li:last-child::before {
-      bottom: 50%;
-      top: 0;
-    }
-
-    & > li {
-      position: relative;
-      list-style-type: none;
-
-      line-height: 1.6;
-      padding: 3px 0;
-      margin: 0 0 0 1rem;
-    }
-
-    & > li::after {
-      content: '';
-      left: -1.28rem;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 0.5rem;
-      width: 0.5rem;
-      border-radius: 50%;
-      position: absolute;
-      background-color: theme(colors.accent);
-    }
-  }
+html[data-theme='dark'].noise body::before {
+  opacity: 0.01;
 }
 
-@layer components {
-  .mask-cover {
-    mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 100%) 90%);
-    opacity: 0.3;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .group:hover .mask-cover {
-    opacity: 0.5;
-  }
-
-  .animation-blink {
-    animation: blink 1.2s linear infinite;
-  }
-
-  .mask-top {
-    mask-image: linear-gradient(to top, transparent, rgb(0 0 0 / 100%) 90%);
-    opacity: 0.3;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-    40% {
-      opacity: 0;
-    }
-    40.1% {
-      opacity: 1;
-    }
-    99.9% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  /* 404 */
-  .hit-the-floor {
-    font-size: 12em;
-    font-weight: bold;
-    font-family: Helvetica;
-    text-shadow:
-      0 1px 0 #ccc,
-      0 2px 0 #c9c9c9,
-      0 3px 0 #bbb,
-      0 4px 0 #b9b9b9,
-      0 5px 0 #aaa,
-      0 6px 1px rgba(0, 0, 0, 0.1),
-      0 0 5px rgba(0, 0, 0, 0.1),
-      0 1px 3px rgba(0, 0, 0, 0.3),
-      0 3px 5px rgba(0, 0, 0, 0.2),
-      0 5px 10px rgba(0, 0, 0, 0.25),
-      0 10px 10px rgba(0, 0, 0, 0.2),
-      0 20px 20px rgba(0, 0, 0, 0.15);
+@media print {
+  /* styles for print */
+  html.noise body::before {
+    display: none;
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8364d6f42f..5af2dbed10 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -302,7 +302,7 @@ const twConfig: Config = {
     require('tailwindcss-animated'),
 
     require('./src/styles/theme.css'),
-    require('./src/styles/uikit.css'),
+    require('./src/styles/layer.css'),
   ],
 }