Merge remote-tracking branch 'origin/master' into blog-content

Add image preview

src/components/Footer.astro

@@ -124,9 +124,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

@@ -0,0 +1,403 @@
+---
+interface Heading {
+    depth: number;
+    slug: string;
+    text: string;
+}
+
+interface Props {
+    headings: Heading[];
+}
+
+const { headings = [] } = Astro.props;
+const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
+---
+
+{
+    tocHeadings.length > 0 && (
+        <>
+            <button
+                class="post-menu-mobile-toggle"
+                type="button"
+                aria-expanded="false"
+                aria-controls="post-menu-panel"
+                aria-label="目录"
+            >
+                <span
+                    class="post-menu-mobile-preview"
+                    data-post-menu-preview
+                    data-default-text={tocHeadings[0]?.text ?? "本文目录"}
+                >
+                    {tocHeadings[0]?.text ?? "本文目录"}
+                </span>
+
+                <span class="post-menu-mobile-icon" aria-hidden="true">
+                    <svg
+                        viewBox="0 0 24 24"
+                        width="16"
+                        height="16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M5 6.5H19M5 12H19M5 17.5H19"
+                            stroke="currentColor"
+                            stroke-width="1.8"
+                            stroke-linecap="round"
+                        />
+                        <circle cx="3.5" cy="6.5" r="1" fill="currentColor" />
+                        <circle cx="3.5" cy="12" r="1" fill="currentColor" />
+                        <circle cx="3.5" cy="17.5" r="1" fill="currentColor" />
+                    </svg>
+                </span>
+            </button>
+
+            <aside class="post-menu" id="post-menu-panel">
+                <nav aria-label="Table of contents">
+                    <p class="post-menu-title">目录</p>
+                    <ul class="post-menu-list">
+                        {tocHeadings.map((heading) => (
+                            <li class={`post-menu-item depth-${heading.depth}`}>
+                                <a
+                                    href={`#${heading.slug}`}
+                                    data-heading-link
+                                    data-heading-text={heading.text}
+                                >
+                                    {heading.text}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            </aside>
+        </>
+    )
+}
+
+<style is:global>
+    :where(h1, h2, h3, h4, h5, h6) {
+        scroll-margin-top: 4rem;
+    }
+</style>
+
+<style>
+    .post-menu {
+        box-sizing: border-box;
+    }
+
+    .post-menu-title {
+        margin: 0 0 0.7rem;
+        padding-top: 0.65rem;
+
+        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 0 0 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 {
+        position: relative;
+        margin: 0.42rem 0;
+        line-height: 1.45;
+    }
+
+    .post-menu-item.depth-3 {
+        padding-left: 0.85rem;
+        opacity: 0.82;
+        font-size: 0.94em;
+    }
+
+    .post-menu a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .post-menu a:hover {
+        text-decoration: underline;
+    }
+
+    .post-menu-mobile-toggle {
+        display: none;
+    }
+
+    @media (min-width: 1200px) {
+        .post-menu {
+            --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: 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;
+            opacity: 0.9;
+        }
+    }
+
+    @media (max-width: 1200px) {
+        .post-menu-mobile-toggle {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            position: fixed;
+            top: 0.75rem;
+            right: 0.8rem;
+            z-index: 30;
+            max-width: min(78vw, 22rem);
+            padding: 0.6rem 0.75rem;
+            border: 1.5px solid var(--deep-blue);
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.92);
+            backdrop-filter: blur(6px);
+            color: inherit;
+            font-size: 0.85rem;
+            cursor: pointer;
+            opacity: 0;
+            transform: translateY(calc(-100% - 0.6rem));
+            pointer-events: none;
+            transition:
+                transform 0.28s ease,
+                opacity 0.22s ease;
+        }
+
+        .post-menu-mobile-toggle.is-visible {
+            opacity: 1;
+            transform: translateY(calc(env(safe-area-inset-top) + 0.4rem));
+            pointer-events: auto;
+        }
+
+        .post-menu-mobile-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            opacity: 0.78;
+        }
+
+        .post-menu-mobile-preview {
+            display: inline-block;
+            width: 10rem;
+            /* height: 1rem; */
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-align: left;
+        }
+
+        .post-menu {
+            display: none;
+            position: fixed;
+            top: calc(env(safe-area-inset-top) + 4.2rem);
+            right: 0.8rem;
+            z-index: 29;
+            width: min(88vw, 24rem);
+            max-height: min(65vh, 32rem);
+            overflow: auto;
+            padding: 0.9rem 1rem;
+            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>
+
+<script is:inline>
+    (() => {
+        const setupPostMenu = () => {
+            const btn = document.querySelector(".post-menu-mobile-toggle");
+            const panel = document.querySelector("#post-menu-panel");
+            const preview = document.querySelector("[data-post-menu-preview]");
+            const headingLinks = Array.from(
+                document.querySelectorAll("[data-heading-link]"),
+            );
+
+            if (!btn || !panel || !preview || headingLinks.length === 0) return;
+            if (btn.dataset.bound === "true") return;
+            btn.dataset.bound = "true";
+
+            const defaultText =
+                preview.getAttribute("data-default-text") || "本文目录";
+
+            const getHeadingElements = () =>
+                headingLinks
+                    .map((link) => {
+                        const href = link.getAttribute("href");
+                        if (!href || !href.startsWith("#")) return null;
+
+                        const el = document.getElementById(href.slice(1));
+                        if (!el) return null;
+
+                        return {
+                            link,
+                            el,
+                            text:
+                                link.getAttribute("data-heading-text") ||
+                                el.textContent ||
+                                defaultText,
+                        };
+                    })
+                    .filter(Boolean);
+
+            let headingItems = getHeadingElements();
+
+            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;
+
+                const clickedInsidePanel = panel.contains(target);
+                const clickedButton = btn.contains(target);
+
+                if (!clickedInsidePanel && !clickedButton) {
+                    closeMenu();
+                }
+            });
+
+            const updateVisibility = () => {
+                if (window.innerWidth >= 1200) {
+                    btn.classList.remove("is-visible");
+                    closeMenu();
+                    return;
+                }
+
+                const shouldShow = window.scrollY > 80;
+                btn.classList.toggle("is-visible", shouldShow);
+
+                if (!shouldShow) {
+                    closeMenu();
+                }
+            };
+
+            const updateCurrentHeading = () => {
+                if (window.innerWidth >= 1200) return;
+
+                headingItems = getHeadingElements();
+
+                let current = null;
+                const triggerLine = 140;
+
+                for (const item of headingItems) {
+                    const rect = item.el.getBoundingClientRect();
+                    if (rect.top <= triggerLine) {
+                        current = item;
+                    } else {
+                        break;
+                    }
+                }
+
+                preview.textContent = current ? current.text : defaultText;
+
+                headingLinks.forEach((link) =>
+                    link.classList.remove("is-current"),
+                );
+                if (current) current.link.classList.add("is-current");
+            };
+
+            const toggleMenu = () => {
+                const expanded = btn.getAttribute("aria-expanded") === "true";
+                btn.setAttribute("aria-expanded", String(!expanded));
+                panel.classList.toggle("is-open", !expanded);
+            };
+
+            btn.addEventListener("click", toggleMenu);
+
+            panel.addEventListener("click", (e) => {
+                const target = e.target;
+                if (!(target instanceof Element)) return;
+
+                const link = target.closest("a[data-heading-link]");
+                if (!link) return;
+
+                const href = link.getAttribute("href");
+                if (!href || !href.startsWith("#")) return;
+
+                const el = document.getElementById(href.slice(1));
+                if (!el) return;
+
+                e.preventDefault();
+
+                el.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                });
+
+                history.replaceState(null, "", href);
+                closeMenu();
+            });
+
+            const onScroll = () => {
+                updateVisibility();
+                updateCurrentHeading();
+            };
+
+            window.addEventListener("scroll", onScroll, { passive: true });
+            window.addEventListener("resize", onScroll);
+
+            updateVisibility();
+            updateCurrentHeading();
+        };
+
+        setupPostMenu();
+        document.addEventListener("astro:page-load", setupPostMenu);
+    })();
+</script>

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 (typeof window.REMARK42.destroy === "function") {
-                window.REMARK42.destroy();
-            }
-            if (typeof window.REMARK42.createInstance === "function") {
-                node.innerHTML = "";
-                window.REMARK42.createInstance(window.remark_config);
-            }
+        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

@@ -2,11 +2,13 @@
 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";
 
-const { post, frontmatter, lang, slug, postId } = Astro.props;
+const { post, frontmatter, lang, slug, postId, headings } = Astro.props;
 const comments = lang === "zh" ? "评论区" : "comments";
 const t = getTranslations(lang);
 ---
@@ -38,6 +40,9 @@ const t = getTranslations(lang);
       <path d="M15 18l-6-6 6-6"></path>
     </svg>
   </a>
+
+  <PostMenu headings={headings} />
+
   <article class="post-article">
     <div class="post-header">
       <div class="post-meta">
@@ -77,6 +82,8 @@ const t = getTranslations(lang);
       <slot />
     </div>
 
+    <Dialog />
+
     <PostNav post={post} lang={lang} />
 
     <h2>{comments}</h2>
@@ -184,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/pages/[lang]/posts/[...slug].astro

@@ -22,7 +22,7 @@ export async function getStaticPaths() {
 }
 
 const { post, lang } = Astro.props;
-const { Content } = await render(post);
+const { Content, headings } = await render(post);
 
 const [postLang, ...slugParts] = post.id.split("/");
 const slug = slugParts.join("/");
@@ -34,6 +34,7 @@ const slug = slugParts.join("/");
     lang={lang}
     slug={slug}
     postId={post.id}
+    headings={headings}
 >
     <Content />
 </MarkdownPostLayout>

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;
-  color: #0E2F56;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 html {
@@ -158,268 +161,4 @@ img {
   max-width: 100%;
   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;
+}