update preview radius

src/components/Footer.astro

@@ -90,9 +90,9 @@ const t = getTranslations(lang);
     margin-bottom: 1rem;
     background: repeating-linear-gradient(
       -45deg,
-      #ef5a6f 0 14px,
+      var(--deep-red) 0 14px,
       transparent 14px 28px,
-      #536493 28px 42px,
+      var(--deep-blue) 28px 42px,
       transparent 42px 56px
     );
     pointer-events: none;

src/components/Navigation.astro

@@ -26,6 +26,20 @@ const t = getTranslations(lang);
     </details>
 </nav>
 
+<script>
+    document.addEventListener("click", (event) => {
+        const nav = document.querySelector(".site-nav-mobile");
+
+        if (!nav) return;
+
+        const target = event.target as Node;
+
+        if (!nav.contains(target)) {
+            nav.removeAttribute("open");
+        }
+    });
+</script>
+
 <style>
     .site-nav {
         margin: 1rem 0;
@@ -42,9 +56,9 @@ const t = getTranslations(lang);
         height: 12px;
         background: repeating-linear-gradient(
             -45deg,
-            #ef5a6f 0 14px,
+            var(--deep-red) 0 14px,
             transparent 14px 28px,
-            #536493 28px 42px,
+            var(--deep-blue) 28px 42px,
             transparent 42px 56px
         );
         pointer-events: none;

src/components/Posts/Dialog.astro

@@ -0,0 +1,118 @@
+<dialog id="image-preview-dialog" class="image-preview-dialog">
+    <button class="image-preview-close" aria-label="关闭图片预览">×</button>
+
+    <img id="image-preview-img" alt="" />
+
+    <a
+        id="image-preview-download"
+        class="image-preview-download"
+        href="#"
+        aria-label="下载图片"
+        title="下载图片"
+    >
+        <svg
+            width="26"
+            height="26"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+        >
+            <path
+                d="M12 3v12m0 0 5-5m-5 5-5-5M5 21h14"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"></path>
+        </svg>
+    </a>
+</dialog>
+<script is:inline>
+    function initImagePreview() {
+        const dialog = document.getElementById("image-preview-dialog");
+        const previewImg = document.getElementById("image-preview-img");
+        const closeBtn = dialog?.querySelector(".image-preview-close");
+        const downloadBtn = document.getElementById("image-preview-download");
+
+        if (!dialog || !previewImg || !closeBtn || !downloadBtn) return;
+
+        let currentImageUrl = "";
+
+        function getFileNameFromUrl(url) {
+            try {
+                const pathname = new URL(url, window.location.href).pathname;
+                return pathname.split("/").pop() || "image";
+            } catch {
+                return "image";
+            }
+        }
+
+        async function downloadImage(url) {
+            const response = await fetch(url, {
+                mode: "cors",
+                credentials: "omit",
+            });
+
+            if (!response.ok) {
+                throw new Error("Failed to fetch image");
+            }
+
+            const blob = await response.blob();
+            const blobUrl = URL.createObjectURL(blob);
+
+            const a = document.createElement("a");
+            a.href = blobUrl;
+            a.download = getFileNameFromUrl(url);
+            document.body.appendChild(a);
+            a.click();
+
+            a.remove();
+            URL.revokeObjectURL(blobUrl);
+        }
+
+        document.querySelectorAll("article img").forEach((img) => {
+            if (img.dataset.previewBound === "true") return;
+            img.dataset.previewBound = "true";
+
+            img.addEventListener("click", () => {
+                const imageUrl = img.currentSrc || img.src;
+
+                currentImageUrl = imageUrl;
+                previewImg.src = imageUrl;
+                previewImg.alt = img.alt || "";
+
+                dialog.showModal();
+            });
+        });
+
+        downloadBtn.addEventListener("click", async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (!currentImageUrl) return;
+
+            try {
+                await downloadImage(currentImageUrl);
+            } catch (error) {
+                // 如果 fetch 因为跨域失败，就退回到直接打开图片
+                window.open(currentImageUrl, "_blank", "noopener,noreferrer");
+            }
+        });
+
+        function closePreview() {
+            dialog.close();
+            previewImg.removeAttribute("src");
+            currentImageUrl = "";
+        }
+
+        closeBtn.addEventListener("click", closePreview);
+
+        dialog.addEventListener("click", (event) => {
+            if (event.target === dialog) {
+                closePreview();
+            }
+        });
+    }
+
+    document.addEventListener("DOMContentLoaded", initImagePreview);
+    document.addEventListener("astro:page-load", initImagePreview);
+</script>

src/components/Posts/PostMenu.astro

@@ -83,31 +83,56 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
 <style>
     .post-menu {
         box-sizing: border-box;
-        border: 1px solid gray;
     }
 
     .post-menu-title {
-        margin: 0 0 0.8rem;
+        margin: 0 0 0.7rem;
-        font-size: 0.95rem;
+        padding-top: 0.65rem;
-        opacity: 0.7;
+
+        background-image: linear-gradient(
+            to right,
+            rgba(65, 65, 65, 0.8) 0,
+            rgba(65, 65, 65, 0.8) 8px,
+            transparent 8px,
+            transparent 14px
+        );
+        background-repeat: repeat-x;
+        background-size: 14px 2px;
+        background-position: top left;
+
+        font-size: 1.1rem;
+        font-weight: 600;
+        opacity: 0.72;
     }
 
     .post-menu-list {
+        position: relative;
         list-style: none;
         margin: 0;
-        padding: 0;
+        padding: 0 0 0 0.9rem;
-        font-size: 0.9rem;
+        font-size: 1rem;
+    }
+
+    .post-menu-list::before {
+        content: "";
+        position: absolute;
+        left: 0.15rem;
+        top: 0.25rem;
+        bottom: 0.25rem;
+        width: 1px;
+        background: rgba(128, 128, 128, 0.55);
     }
 
     .post-menu-item {
-        margin: 0.45rem 0;
+        position: relative;
-        line-height: 1.5;
+        margin: 0.42rem 0;
+        line-height: 1.45;
     }
 
     .post-menu-item.depth-3 {
-        padding-left: 1rem;
+        padding-left: 0.85rem;
         opacity: 0.82;
-        font-size: 0.95em;
+        font-size: 0.94em;
     }
 
     .post-menu a {
@@ -123,13 +148,25 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
         display: none;
     }
 
-    @media (min-width: 1300px) {
+    @media (min-width: 1200px) {
         .post-menu {
-            --menu-width: 180px;
+            --content-width: 90ch;
+            --menu-width: clamp(
+                140px,
+                calc((100vw - 1200px) * 0.42 + 140px),
+                260px
+            );
+            --menu-gap: 0rem;
+
             position: fixed;
             top: 8.5rem;
             width: var(--menu-width);
-            left: max(1rem, calc((100vw - 760px) / 4 - var(--menu-width) / 2));
+
+            left: calc(
+                50vw - var(--content-width) / 2 - var(--menu-gap) -
+                    var(--menu-width)
+            );
+
             max-height: calc(100vh - 10rem);
             overflow: auto;
             padding: 0.2rem 0.2rem 0.2rem 0;
@@ -137,7 +174,7 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
         }
     }
 
-    @media (max-width: 1299px) {
+    @media (max-width: 1200px) {
         .post-menu-mobile-toggle {
             display: inline-flex;
             align-items: center;
@@ -148,9 +185,9 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             z-index: 30;
             max-width: min(78vw, 22rem);
             padding: 0.6rem 0.75rem;
-            border: 1.5px solid rgba(123, 169, 255, 0.55);
+            border: 1.5px solid var(--deep-blue);
             border-radius: 999px;
-            background: rgba(249, 242, 237, 0.92);
+            background: rgba(255, 255, 255, 0.92);
             backdrop-filter: blur(6px);
             color: inherit;
             font-size: 0.85rem;
@@ -197,15 +234,26 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             max-height: min(65vh, 32rem);
             overflow: auto;
             padding: 0.9rem 1rem;
-            border: 1.5px solid rgba(128, 128, 128, 0.55);
+            border: 1.5px solid var(--deep-blue);
             background: rgba(255, 255, 255, 0.96);
             backdrop-filter: blur(8px);
             box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
         }
 
+        .post-menu-title {
+            padding-top: 0;
+            background-image: none;
+        }
+
         .post-menu.is-open {
             display: block;
         }
+
+        :global(html.dark) .post-menu-mobile-toggle,
+        :global(html.dark) .post-menu {
+            background: var(--background-color-dark);
+            color: var(--text-color-dark);
+        }
     }
 </style>
 
@@ -251,6 +299,8 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             const closeMenu = () => {
                 panel.classList.remove("is-open");
                 btn.setAttribute("aria-expanded", "false");
+            };
+
             document.addEventListener("click", (e) => {
                 const target = e.target;
                 if (!(target instanceof Node)) return;
@@ -262,7 +312,6 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
                     closeMenu();
                 }
             });
-            };
 
             const updateVisibility = () => {
                 if (window.innerWidth >= 1200) {

src/components/Remark42Embed.astro

@@ -6,7 +6,6 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
 ---
 
 <div id="remark42"></div>
-
 <script define:vars={{ pagePath, host, siteId }} is:inline data-astro-rerun>
     function getTheme() {
         return document.documentElement.classList.contains("dark")
@@ -35,6 +34,7 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
                     resolve(true);
                     return;
                 }
+
                 existing.addEventListener("load", () => resolve(true), {
                     once: true,
                 });
@@ -67,16 +67,42 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
         setRemarkConfig();
         await ensureScript();
 
-        if (window.REMARK42) {
+        if (!window.REMARK42) return;
+
         if (typeof window.REMARK42.destroy === "function") {
             window.REMARK42.destroy();
         }
+
         if (typeof window.REMARK42.createInstance === "function") {
             node.innerHTML = "";
             window.REMARK42.createInstance(window.remark_config);
         }
     }
+
+    function setupRemark42ThemeObserver() {
+        if (window.__remark42ThemeObserver) {
+            window.__remark42ThemeObserver.disconnect();
+        }
+
+        let lastTheme = getTheme();
+
+        const observer = new MutationObserver(() => {
+            const currentTheme = getTheme();
+
+            if (currentTheme === lastTheme) return;
+
+            lastTheme = currentTheme;
+            mountRemark42();
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+
+        window.__remark42ThemeObserver = observer;
     }
 
     mountRemark42();
+    setupRemark42ThemeObserver();
 </script>

src/layouts/MarkdownPostLayout.astro

@@ -3,6 +3,7 @@ import BaseLayout from "./BaseLayout.astro";
 import Remark42Embed from "@/components/Remark42Embed.astro";
 import PostNav from "@/components/Posts/PostNav.astro";
 import PostMenu from "@/components/Posts/PostMenu.astro";
+import Dialog from "@/components/Posts/Dialog.astro";
 import { fade } from "astro:transitions";
 import { getTranslations } from "@/i18n";
 import "@/styles/global.css";
@@ -81,6 +82,8 @@ const t = getTranslations(lang);
       <slot />
     </div>
 
+    <Dialog />
+
     <PostNav post={post} lang={lang} />
 
     <h2>{comments}</h2>
@@ -188,7 +191,7 @@ const t = getTranslations(lang);
     align-items: center;
     justify-content: center;
     text-decoration: none;
-    border: #285ee9 1.5px solid;
+    border: #536493 1.5px solid;
     background: rgba(255, 255, 255, 0.92);
     color: #222;
     /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */

src/styles/dialog.css

@@ -0,0 +1,95 @@
+.image-preview-dialog {
+    padding: 0;
+    border: none;
+    background: transparent;
+    max-width: min(96vw, 1200px);
+    max-height: 96vh;
+}
+
+.image-preview-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(6px);
+}
+
+.image-preview-dialog img {
+    display: block;
+    max-width: 96vw;
+    max-height: 90vh;
+    object-fit: contain;
+    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
+}
+
+.image-preview-close:focus {
+    outline: none;
+}
+
+.image-preview-close:focus-visible {
+    outline: 2px solid rgba(125, 162, 255, 0.9);
+    outline-offset: 4px;
+}
+
+.image-preview-close {
+    position: fixed;
+    top: 1.25rem;
+    right: 1.25rem;
+    z-index: 1;
+    width: 2.4rem;
+    height: 2.4rem;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--text-color-dark);
+    font-size: 2.6rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+/* .image-preview-close:hover {
+    background: rgba(0, 0, 0, 0.75);
+} */
+
+/* 给文章图片一个可点击提示 */
+.prose img,
+.markdown-body img,
+article img {
+    cursor: zoom-in;
+}
+
+.image-preview-download {
+    position: fixed;
+    left: 50%;
+    bottom: max(1.5rem, env(safe-area-inset-bottom));
+    transform: translateX(-50%);
+
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+    background: transparent;
+    border: none;
+    padding: 0.4rem;
+    cursor: pointer;
+    text-decoration: none;
+    opacity: 0.88;
+
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+}
+
+.image-preview-download:hover {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-2px);
+}
+
+.image-preview-download:focus {
+    outline: none;
+}
+
+.image-preview-download:focus-visible {
+    outline: 2px solid rgba(125, 162, 255, 0.9);
+    outline-offset: 4px;
+    border-radius: 8px;
+}

src/styles/global.css

@@ -1,6 +1,9 @@
 @import url("https://unpkg.com/@fontsource/maple-mono@5.2.6/400.css");
 @import url("https://unpkg.com/@fontsource/maple-mono@5.2.6/400-italic.css");
 @import url("https://unpkg.com/@fontsource/maple-mono@5.2.6/700.css");
+@import "./latest-comments.css";
+@import "./variables.css";
+@import "./dialog.css";
 
 pre {
   padding: 1rem;
@@ -43,8 +46,8 @@ html {
     serif;
   font-weight: 500;
   /* background-color: #ffffff; */
-  background-color: #F9F2ED;
+  background-color: var(--background-color);
-  color: #0E2F56;
+  color: var(--text-color);
 }
 
 html {
@@ -159,267 +162,3 @@ img {
   height: auto;
   display: block;
 }
-
-.latest-comments {
-  margin-top: 1.5rem;
-}
-
-.latest-comments h2 {
-  margin-bottom: 0.8rem;
-}
-
-.loading-card {
-  height: 92px;
-  margin: 0 0 14px 0;
-  padding: 0.9rem 1rem;
-  border: 1px dashed #aeb8c2;
-  background: linear-gradient(90deg,
-      rgba(160, 175, 190, 0.06) 25%,
-      rgba(160, 175, 190, 0.16) 50%,
-      rgba(160, 175, 190, 0.06) 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.2s infinite linear;
-}
-
-@keyframes shimmer {
-  from {
-    background-position: 200% 0;
-  }
-
-  to {
-    background-position: -200% 0;
-  }
-}
-
-.latest-comments-list {
-  display: block;
-}
-
-.comment-card {
-  display: block;
-  margin: 0 0 14px 0;
-  padding: 0.6rem 1rem;
-  border: 2px dashed #aeb8c2;
-  background-color: #fbf5f2;
-
-}
-
-.comment-card:last-child {
-  margin-bottom: 0;
-}
-
-.comment-card-body {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  grid-template-areas:
-    "info title"
-    "text title";
-  gap: 0.2rem 1rem;
-  align-items: start;
-}
-
-.comment-card-info {
-  grid-area: info;
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  min-width: 0;
-}
-
-.comment-avatar {
-  width: 35px;
-  height: 35px;
-  flex-shrink: 0;
-}
-
-.comment-avatar-img,
-.comment-avatar-fallback {
-  width: 35px;
-  height: 35px;
-  display: block;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.comment-avatar-img {
-  border: 1px dashed #aeb8c2;
-  background: #f3f5f7;
-}
-
-.comment-avatar-fallback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed #aeb8c2;
-  background: rgba(160, 175, 190, 0.12);
-  color: #5e6b77;
-  font-weight: 700;
-  font-size: 1rem;
-  user-select: none;
-}
-
-.comment-meta {
-  min-width: 0;
-  flex: 1;
-}
-
-.comment-author-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.6rem;
-  min-width: 0;
-  line-height: 1.3;
-  font-style: italic;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "PingFang SC",
-    "Hiragino Sans GB",
-    "Microsoft YaHei",
-    "Noto Sans CJK SC",
-    "Source Han Sans SC",
-    sans-serif;
-}
-
-.comment-author {
-  font-weight: 400;
-  font-size: 0.8rem;
-  color: gray;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.comment-time {
-  color: #7a7a7a;
-  font-size: 0.7rem;
-}
-
-.comment-card-title {
-  grid-area: title;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  text-align: right;
-  min-width: 0;
-}
-
-.comment-title-link {
-  color: #6f8090;
-  text-decoration: none;
-  font-size: 1.1rem;
-  font-weight: 700;
-  line-height: 1.45;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.comment-title-link:hover {
-  text-decoration: underline;
-}
-
-.comment-card-text {
-  grid-area: text;
-  margin: 0;
-  color: #555;
-  line-height: 1.5;
-  font-size: 0.93rem;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "PingFang SC",
-    "Hiragino Sans GB",
-    "Microsoft YaHei",
-    "Noto Sans CJK SC",
-    "Source Han Sans SC",
-    sans-serif;
-}
-
-.comment-card-text :global(p),
-.comment-card-text p {
-  margin: 0;
-}
-
-.comment-card-text :global(img),
-.comment-card-text img {
-  max-width: 100%;
-  height: auto;
-}
-
-.latest-comments-empty {
-  color: #777;
-  font-style: italic;
-}
-
-.comment-reply-sep {
-  font-size: 0.8rem;
-  opacity: 0.7;
-}
-
-.latest-comments .comment-reply-to {
-  font-weight: 400;
-  font-size: 0.8rem;
-  color: gray;
-  opacity: 0.9;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-html.dark .latest-comments .comment-card,
-.dark .latest-comments .comment-card {
-  border-color: #7f8c97;
-  background-color: #252525;
-}
-
-html.dark .comment-title-link {
-  color: #c8d2dc;
-}
-
-html.dark .comment-card-text {
-  color: #d3d7db;
-}
-
-html.dark .comment-time {
-  color: #a8b0b7;
-}
-
-html.dark .latest-comments .comment-avatar-fallback,
-.dark .latest-comments .comment-avatar-fallback {
-  border-color: #7f8c97;
-  background-color: #3a444d;
-  color: #dbe3ea;
-}
-
-:global(.dark) .comment-avatar-fallback {
-  background: rgba(180, 190, 200, 0.12);
-  color: #dbe3ea;
-}
-
-@media (max-width: 640px) {
-  .comment-card-body {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "title"
-      "info"
-      "text";
-  }
-
-  .comment-card-title {
-    text-align: left;
-    margin-bottom: 0.2rem;
-  }
-
-  .comment-title-link {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}

src/styles/latest-comments.css

@@ -0,0 +1,263 @@
+.latest-comments {
+    margin-top: 1.5rem;
+}
+
+.latest-comments h2 {
+    margin-bottom: 0.8rem;
+}
+
+.loading-card {
+    height: 92px;
+    margin: 0 0 14px 0;
+    padding: 0.9rem 1rem;
+    border: 1px dashed #aeb8c2;
+    background: linear-gradient(90deg,
+            rgba(160, 175, 190, 0.06) 25%,
+            rgba(160, 175, 190, 0.16) 50%,
+            rgba(160, 175, 190, 0.06) 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.2s infinite linear;
+}
+
+@keyframes shimmer {
+    from {
+        background-position: 200% 0;
+    }
+
+    to {
+        background-position: -200% 0;
+    }
+}
+
+.latest-comments-list {
+    display: block;
+}
+
+.comment-card {
+    display: block;
+    margin: 0 0 14px 0;
+    padding: 0.6rem 1rem;
+    border: 2px dashed #aeb8c2;
+    background-color: #fbf5f2;
+
+}
+
+.comment-card:last-child {
+    margin-bottom: 0;
+}
+
+.comment-card-body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 320px;
+    grid-template-areas:
+        "info title"
+        "text title";
+    gap: 0.2rem 1rem;
+    align-items: start;
+}
+
+.comment-card-info {
+    grid-area: info;
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    min-width: 0;
+}
+
+.comment-avatar {
+    width: 35px;
+    height: 35px;
+    flex-shrink: 0;
+}
+
+.comment-avatar-img,
+.comment-avatar-fallback {
+    width: 35px;
+    height: 35px;
+    display: block;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.comment-avatar-img {
+    border: 1px dashed #aeb8c2;
+    background: #f3f5f7;
+}
+
+.comment-avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed #aeb8c2;
+    background: rgba(160, 175, 190, 0.12);
+    color: #5e6b77;
+    font-weight: 700;
+    font-size: 1rem;
+    user-select: none;
+}
+
+.comment-meta {
+    min-width: 0;
+    flex: 1;
+}
+
+.comment-author-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.6rem;
+    min-width: 0;
+    line-height: 1.3;
+    font-style: italic;
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        "PingFang SC",
+        "Hiragino Sans GB",
+        "Microsoft YaHei",
+        "Noto Sans CJK SC",
+        "Source Han Sans SC",
+        sans-serif;
+}
+
+.comment-author {
+    font-weight: 400;
+    font-size: 0.8rem;
+    color: gray;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.comment-time {
+    color: #7a7a7a;
+    font-size: 0.7rem;
+}
+
+.comment-card-title {
+    grid-area: title;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    text-align: right;
+    min-width: 0;
+}
+
+.comment-title-link {
+    color: #6f8090;
+    text-decoration: none;
+    font-size: 1.1rem;
+    font-weight: 700;
+    line-height: 1.45;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.comment-title-link:hover {
+    text-decoration: underline;
+}
+
+.comment-card-text {
+    grid-area: text;
+    margin: 0;
+    color: #555;
+    line-height: 1.5;
+    font-size: 0.93rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    white-space: normal;
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        "PingFang SC",
+        "Hiragino Sans GB",
+        "Microsoft YaHei",
+        "Noto Sans CJK SC",
+        "Source Han Sans SC",
+        sans-serif;
+}
+
+.comment-card-text :global(p),
+.comment-card-text p {
+    margin: 0;
+}
+
+.comment-card-text :global(img),
+.comment-card-text img {
+    max-width: 100%;
+    height: auto;
+}
+
+.latest-comments-empty {
+    color: #777;
+    font-style: italic;
+}
+
+.comment-reply-sep {
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+
+.latest-comments .comment-reply-to {
+    font-weight: 400;
+    font-size: 0.8rem;
+    color: gray;
+    opacity: 0.9;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+html.dark .latest-comments .comment-card,
+.dark .latest-comments .comment-card {
+    border-color: #7f8c97;
+    background-color: #252525;
+}
+
+html.dark .comment-title-link {
+    color: #c8d2dc;
+}
+
+html.dark .comment-card-text {
+    color: #d3d7db;
+}
+
+html.dark .comment-time {
+    color: #a8b0b7;
+}
+
+html.dark .latest-comments .comment-avatar-fallback,
+.dark .latest-comments .comment-avatar-fallback {
+    border-color: #7f8c97;
+    background-color: #3a444d;
+    color: #dbe3ea;
+}
+
+:global(.dark) .comment-avatar-fallback {
+    background: rgba(180, 190, 200, 0.12);
+    color: #dbe3ea;
+}
+
+@media (max-width: 640px) {
+    .comment-card-body {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "title"
+            "info"
+            "text";
+    }
+
+    .comment-card-title {
+        text-align: left;
+        margin-bottom: 0.2rem;
+    }
+
+    .comment-title-link {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

src/styles/variables.css

@@ -0,0 +1,9 @@
+:root {
+    --deep-blue: #536493;
+    --deep-red: #ef5a6f;
+    --background-color: #f9f2ed;
+    --text-color: #0E2F56;
+
+    --background-color-dark: #1e1e1e;
+    --text-color-dark: #e6e6e6;
+}