From 68c1405e07c91eb0307b5c0ec91cc6ca52d51b4a Mon Sep 17 00:00:00 2001
From: Yuqian Yang <crupest@crupest.life>
Date: Sat, 29 Mar 2025 17:49:09 +0800
Subject: feat(www): update css.

---
 www/assets/res/css/base.css | 50 +++++++++++++++++++++++----------------------
 www/assets/res/css/home.css |  8 +-------
 www/layouts/index.html      |  4 ++--
 3 files changed, 29 insertions(+), 33 deletions(-)

(limited to 'www')

diff --git a/www/assets/res/css/base.css b/www/assets/res/css/base.css
index 14e2819..c628271 100644
--- a/www/assets/res/css/base.css
+++ b/www/assets/res/css/base.css
@@ -1,7 +1,12 @@
 html {
   width: 100%;
-  --fg-color: black;
-  --bg-color: white;
+  --body-fg-color: unset;
+  --body-bg-color: unset;
+  --table-border-color: black;
+  --toast-fg-color: white;
+  --toast-bg-color: black;
+  --code-fg-color: var(--body-fg-color);
+  --code-bg-color: #eff1f5;
 }
 
 * {
@@ -11,8 +16,8 @@ html {
 body {
   width: 100%;
   margin: 0;
-  color: var(--fg-color);
-  background-color: var(--bg-color);
+  color: var(--body-fg-color);
+  background-color: var(--body-bg-color);
 }
 
 .mono {
@@ -31,21 +36,19 @@ div.mono-container {
 }
 
 table  {
-  --border-color: black;
-
   border-collapse: collapse;
 
   &, :is(td,th) {
     padding: 0.4em;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--table-border-color);
   }
 }
 
 .toast {
   font-size: large;
   font-family: monospace;
-  color: var(--bg-color);
-  background-color: var(--fg-color);
+  color: var(--toast-fg-color);
+  background-color: var(--toast-bg-color);
   padding: 0.5em 0.3em;
   border-radius: 6px;
 
@@ -87,6 +90,13 @@ nav {
   max-width: 880px;
   padding: 0 1em;
   margin-top: 1em;
+
+  code:not(.chroma code) {
+    border-radius: 4px;
+    color: var(--code-fg-color);
+    background-color: var(--code-bg-color);
+    padding-inline: 0.4em;
+  }
 }
 
 #license a {
@@ -123,8 +133,12 @@ nav {
 }
 
 html[data-theme="dark"] {
-  --fg-color: white;
-  --bg-color: black;
+  --body-fg-color: white;
+  --body-bg-color: black;
+  --table-border-color: hsl(0, 0%, 25%);
+  --toast-fg-color: var(--body-bg-color);
+  --toast-bg-color: var(--body-fg-color);
+  --code-bg-color: #1e1e2e;
 
   & a:link {
     color:#34ffd9;
@@ -135,19 +149,7 @@ html[data-theme="dark"] {
   }
 
   & #slogan {
-    color: var(--fg-color);
+    color: var(--body-fg-color);
     background-color: midnightblue;
   }
-
-  & :is(.chroma,.chroma *) {
-    background-color: hsl(0, 0%, 3%);
-
-    & .n {
-      color: var(--fg-color);
-    }
-  }
-
-  table  {
-    --border-color: hsl(0, 0%, 25%);
-  }
 }
diff --git a/www/assets/res/css/home.css b/www/assets/res/css/home.css
index 1db357e..3df42ff 100644
--- a/www/assets/res/css/home.css
+++ b/www/assets/res/css/home.css
@@ -4,12 +4,6 @@
   top: 0;
 }
 
-#title-name {
-  font-family: monospace;
-  color: var(--bg-color);
-  background-color: var(--fg-color);
-}
-
 #avatar {
   float: right;
 }
@@ -76,4 +70,4 @@ html[data-theme="dark"] {
   & .friend-github {
     filter: invert(1);
   }
-}
\ No newline at end of file
+}
diff --git a/www/layouts/index.html b/www/layouts/index.html
index 7b33a6a..7c608f1 100644
--- a/www/layouts/index.html
+++ b/www/layouts/index.html
@@ -22,7 +22,7 @@
 
 {{ define "content"}}
   <img id="avatar" src="/avatar.png" alt="My avatar" width="80" height="80" />
-  <h1 id="title">Hello! This is <span id="title-name">crupest</span> !</h1>
+  <h1 id="title">Hello! This is <code>crupest</code> !</h1>
   <hr />
   <section>
     <p>Welcome to my home page! Nice to meet you here! 🥰</p>
@@ -89,4 +89,4 @@
       </figcaption>
     </figure>
   </section>
-{{ end }}
\ No newline at end of file
+{{ end }}
-- 
cgit v1.2.3