Merge pull request #18 from ClovertaTheTrilobita/dev

Update Color Palette (.light) & Rewrite Footer

package.json

@@ -6,10 +6,10 @@
     "node": ">=22.12.0"
   },
   "scripts": {
-    "dev": "astro dev",
+    "dev": "PUBLIC_GIT_COMMIT=$(git rev-parse HEAD) astro dev",
     "preview": "astro preview",
     "astro": "astro",
-    "build": "astro build"
+    "build": "PUBLIC_GIT_COMMIT=$(git rev-parse HEAD) astro build"
   },
   "dependencies": {
     "@astrojs/rss": "^4.0.17",

public/images/email.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M957.1 183.2c-0.2-0.4-0.3-0.8-0.5-1.2-0.7-1.7-1.6-3.3-2.5-4.8-0.3-0.5-0.7-1.1-1-1.6-0.5-0.8-1.1-1.6-1.6-2.3-0.2-0.3-0.4-0.6-0.7-0.9-0.4-0.6-0.9-1.1-1.4-1.7-0.5-0.5-1-1.1-1.5-1.6-2.3-2.4-4.9-4.6-7.7-6.4-0.7-0.4-1.4-0.9-2.1-1.3-2.8-1.7-5.9-3-9-4l-0.6-0.2c-0.5-0.2-1.1-0.3-1.7-0.4-3.7-1-7.6-1.5-11.4-1.5H106.7l-0.9 0.1h-0.2C82.2 157 64 176.6 64.1 200.1c0 12.2 5 23.9 13.8 32.3l404.8 404.8c18 17.6 46.7 17.7 64.8 0.2l323.3-323.3v468.6h-717V648.2c0-24.7-20.1-44.8-44.8-44.8-24.7 0-44.8 20.1-44.8 44.8v179.3c0 24.7 20.1 44.8 44.8 44.8h806.6c24.7 0 44.8-20.1 44.8-44.8V200.1c-0.1-5.8-1.2-11.5-3.3-16.9z m-442 359.7l-298-298h596l-298 298z" fill="" /><path d="M108.9 513.8c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-24.7-20.1-44.8-44.8-44.8-24.7 0-44.8 20.1-44.8 44.8V469c0 24.7 20 44.8 44.8 44.8z" fill="" /></svg>

public/images/github-outline-7.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M692.906667 938.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-110.933333a91.733333 91.733333 0 0 0-23.04-70.826667 42.666667 42.666667 0 0 1 26.026667-71.253333C757.333333 630.613333 853.333333 597.333333 853.333333 416.853333a170.666667 170.666667 0 0 0-28.586666-94.72 117.333333 117.333333 0 0 1-17.493334-87.893333 158.293333 158.293333 0 0 0 0-60.16 326.4 326.4 0 0 0-89.173333 46.506667 42.666667 42.666667 0 0 1-35.84 6.4 433.066667 433.066667 0 0 0-235.52 0 42.666667 42.666667 0 0 1-35.84-6.4 315.733333 315.733333 0 0 0-90.026667-46.506667 150.186667 150.186667 0 0 0 0 60.16 121.173333 121.173333 0 0 1-18.346666 88.746667 173.653333 173.653333 0 0 0-28.586667 95.146666c0 165.973333 80.213333 210.346667 200.533333 225.706667a42.666667 42.666667 0 0 1 34.986667 28.16 42.666667 42.666667 0 0 1-8.96 42.666667 87.893333 87.893333 0 0 0-23.466667 66.56V896a42.666667 42.666667 0 0 1-85.333333 0v-24.32a256 256 0 0 1-224.853333-89.173333 166.4 166.4 0 0 0-49.493334-37.546667 42.666667 42.666667 0 1 1 21.333334-82.773333 210.346667 210.346667 0 0 1 85.333333 58.026666c42.666667 42.666667 85.333333 80.213333 166.4 64.853334a165.973333 165.973333 0 0 1 9.813333-67.413334c-87.893333-22.186667-213.333333-85.333333-213.333333-298.666666a256 256 0 0 1 42.666667-142.08 36.266667 36.266667 0 0 0 5.546666-26.453334 242.773333 242.773333 0 0 1 14.08-136.96 42.666667 42.666667 0 0 1 26.88-24.32c14.506667-4.266667 66.56-12.8 165.12 51.2a518.826667 518.826667 0 0 1 242.773334 0c98.56-64 150.613333-55.893333 164.693333-51.2a42.666667 42.666667 0 0 1 26.88 24.32 243.626667 243.626667 0 0 1 14.08 137.386667 32 32 0 0 0 4.693333 24.32 256 256 0 0 1 42.666667 142.506667c0 216.32-124.586667 279.04-213.333333 298.666666a182.613333 182.613333 0 0 1 9.386666 71.253334V896a42.666667 42.666667 0 0 1-40.106666 42.666667z"  /></svg>

src/components/BuildHashBlocks.astro

@@ -0,0 +1,47 @@
+---
+const rawHash = (import.meta.env.PUBLIC_GIT_COMMIT || "")
+    .replace(/[^a-fA-F0-9]/g, "")
+    .toLowerCase();
+
+const safeHash = rawHash || "0000000000000000000000000000000000000000";
+
+const blockCount = 6;
+const hexPerBlock = 6;
+
+const blocks: string[] = Array.from({ length: blockCount }, (_, i) => {
+    const start = i * hexPerBlock;
+    const part = safeHash.slice(start, start + hexPerBlock).padEnd(6, "0");
+    return `#${part}`;
+});
+---
+
+<div
+    class="build-hash"
+    title={`Build ${safeHash}`}
+    aria-label={`Build ${safeHash}`}
+>
+    <div class="build-hint">Astro Build</div>
+    {
+        blocks.map((color: string) => (
+            <span class="build-block" style={`background:${color}`} />
+        ))
+    }
+</div>
+
+<style>
+    .build-hint {
+        margin-right: 5px;
+        font-size: 0.8rem;
+    }
+    .build-hash {
+        display: inline-flex;
+        align-items: center;
+        /* vertical-align: middle; */
+    }
+
+    .build-block {
+        width: 1rem;
+        height: 1rem;
+        display: inline-block;
+    }
+</style>

src/components/Footer.astro

@@ -1,22 +1,85 @@
 ---
 import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
-
+import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
+const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
 const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
 ---
 
 <footer class="footer">
-  <p set:html={t.footer.githubIntro} />
+  <a
-  <p set:html={t.footer.repoIntro} />
+    href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
+    class="github"
+    aria-label="GitHub repository"></a>
+  <a href="mailto:cloverta@petalmail.com" class="email" aria-label="Email"></a>
+  <p class="footer-content-pc">
+    © 2026 ClovertaTheTrilobita · <a
+      href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
+      >Source code</a
+    > licensed under MIT. Content rights reserved.
+    <!-- <code class="build-commit">{commit.slice(0, 7)}</code> -->
+  </p>
+
+  <div class="footer-content-mobile">
+    <p>© 2026 ClovertaTheTrilobita</p>
+    <p>Content rights reserved.</p>
+  </div>
+
+  <BuildHashBlocks />
 </footer>
 
 <style>
+  .github {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-color: #1f2328;
+    -webkit-mask: url("/images/github-outline-7.svg") no-repeat center / contain;
+    mask: url("/images/github-outline-7.svg") no-repeat center / contain;
+    vertical-align: middle;
+    margin-bottom: 0.5rem;
+    margin-right: 0.5rem;
+    transition:
+      transform 0.18s ease,
+      opacity 0.18s ease;
+  }
+
+  .email {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-color: #1f2328;
+    -webkit-mask: url("/images/email.svg") no-repeat center / contain;
+    mask: url("/images/email.svg") no-repeat center / contain;
+    vertical-align: middle;
+    margin-bottom: 0.5rem;
+    transition:
+      transform 0.18s ease,
+      opacity 0.18s ease;
+  }
+
+  .github:hover {
+    transform: translateY(-2px);
+  }
+  .email:hover {
+    transform: translateY(-2px);
+  }
+
+  :global(html.dark .github) {
+    background-color: #e6e6e6;
+  }
+
+  :global(html.dark .email) {
+    background-color: #e6e6e6;
+  }
+
   .footer {
     margin-top: 1rem;
     padding: 1.5rem 0 0;
     font-size: 0.95rem;
     opacity: 0.9;
     position: relative;
+    text-align: center;
   }
 
   .footer::before {
@@ -27,22 +90,22 @@ const t = getTranslations(lang);
     margin-bottom: 1rem;
     background: repeating-linear-gradient(
       -45deg,
-      #e96b6b 0 14px,
+      #ef5a6f 0 14px,
       transparent 14px 28px,
-      #7da2ff 28px 42px,
+      #536493 28px 42px,
       transparent 42px 56px
     );
     pointer-events: none;
   }
 
-  .footer p {
+  .footer-content-mobile {
-    margin: 0.4rem 0;
+    display: none;
   }
 
-  .footer a {
+  .footer p {
-    color: #7fb3ff;
+    margin: 0.4rem 0;
-    font-weight: 700;
+    font-size: 0.8rem;
-    text-decoration: underline;
+    /* display: inline-flex; */
   }
 
   :global(.dark) .footer::before {
@@ -54,4 +117,14 @@ const t = getTranslations(lang);
       transparent 42px 56px
     );
   }
+
+  @media (max-width: 700px) {
+    .footer-content-pc {
+      display: none;
+    }
+
+    .footer-content-mobile {
+      display: block;
+    }
+  }
 </style>

src/components/Navigation.astro

@@ -42,9 +42,9 @@ const t = getTranslations(lang);
         height: 12px;
         background: repeating-linear-gradient(
             -45deg,
-            #e96b6b 0 14px,
+            #ef5a6f 0 14px,
             transparent 14px 28px,
-            #7da2ff 28px 42px,
+            #536493 28px 42px,
             transparent 42px 56px
         );
         pointer-events: none;

src/i18n/en.ts

@@ -43,7 +43,7 @@ export default {
             '· <a href="https://blog.cloudti.de/">Parsifal\'s Blog</a>',
             "· And some other websites whose names I have unfortunately forgotten",
             "Thank you for your ideas and passion!",
-            "In addition, this blog is fully open source. You can find its source code through the link in the footer.",
+            "In addition, this blog is open source under MIT License. You can find its source code through the link in the footer.",
         ]
     },
     tags: {

src/i18n/zh.ts

@@ -43,7 +43,7 @@ export default {
             '· <a href="https://blog.cloudti.de/">Parsifal\'s Blog</a>',
             "· 还有一些已经忘记名字的网站",
             "谢谢你们的想法和热情！",
-            "此外，这个博客完全开源，你可以从页脚的链接处获取它的源代码。",
+            "此外，这个博客的源码使用 MIT 协议开源，你可以从页脚的链接处获取它的源代码。",
         ]
     },
     tags: {

src/layouts/MarkdownPostLayout.astro

@@ -240,6 +240,7 @@ const t = getTranslations(lang);
       "Noto Sans CJK SC",
       "Source Han Sans SC",
       sans-serif;
+    font-weight: 400;
   }
 
   .post-content :global(code),

src/styles/global.css

@@ -34,20 +34,11 @@ article svg[id^="mermaid-"] {
 
 html {
   /* font-family: "Maple Mono", "Maple Mono CN", monospace; */
-  font-family:
+  font-family: 'Noto Serif SC', serif;
-    system-ui,
+  font-weight: 500;
-    -apple-system,
+  /* background-color: #ffffff; */
-    BlinkMacSystemFont,
+  background-color: #F9F2ED;
-    "Segoe UI",
+  color: #0E2F56;
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
-  background-color: #ffffff;
-  color: #1f2328;
 }
 
 html {
@@ -59,7 +50,7 @@ html {
 body {
   margin: 0 auto;
   width: 100%;
-  max-width: 78ch;
+  max-width: 90ch;
   padding: 1rem;
   line-height: 1.7;
   font-size: 1.15rem;
@@ -74,13 +65,14 @@ body::after {
   /* 按需调整大小 */
   height: 400px;
   /* 按需调整大小 */
-  background-image: url("https://files.seeusercontent.com/2026/03/30/4Xfr/bc7e804dc2c8ecaf407c9d665414ff72.webp");
+  background-image: url("https://files.seeusercontent.com/2026/04/16/1sXb/touhou___kirisame_marisa__2__by_.webp");
   background-repeat: no-repeat;
   background-position: right bottom;
   background-size: contain;
   opacity: 0.35;
   pointer-events: none;
   z-index: -1;
+
 }
 
 html.dark body::after {
@@ -116,7 +108,7 @@ h1 {
 
 
 a {
-  color: #416bd6;
+  color: #3D74B6;
   font-weight: 700;
   text-decoration: none;
 }
@@ -201,8 +193,9 @@ img {
   display: block;
   margin: 0 0 14px 0;
   padding: 0.6rem 1rem;
-  border: 1.5px dashed #aeb8c2;
+  border: 2px dashed #aeb8c2;
-  background-color: #f3f5f7;
+  background-color: #fbf5f2;
+
 }
 
 .comment-card:last-child {