update menu style, refactor css

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/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 {
@@ -125,11 +150,19 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
 
     @media (min-width: 1300px) {
         .post-menu {
+            --content-width: 90ch;
             --menu-width: 180px;
+            --menu-gap: 2.2rem;
+
             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;
@@ -148,9 +181,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 #536493;
             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;
@@ -203,6 +236,11 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             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;
         }
@@ -251,21 +289,22 @@ 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;
-
-                    const clickedInsidePanel = panel.contains(target);
-                    const clickedButton = btn.contains(target);
-
-                    if (!clickedInsidePanel && !clickedButton) {
-                        closeMenu();
-                    }
-                });
             };
 
+            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) {
+                if (window.innerWidth >= 1300) {
                     btn.classList.remove("is-visible");
                     closeMenu();
                     return;
@@ -280,7 +319,7 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             };
 
             const updateCurrentHeading = () => {
-                if (window.innerWidth >= 1200) return;
+                if (window.innerWidth >= 1300) return;
 
                 headingItems = getHeadingElements();
 

src/layouts/MarkdownPostLayout.astro

@@ -188,7 +188,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/global.css

@@ -1,6 +1,8 @@
 @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";
 
 pre {
   padding: 1rem;
@@ -43,8 +45,8 @@ html {
     serif;
   font-weight: 500;
   /* background-color: #ffffff; */
-  background-color: #F9F2ED;
+  background-color: var(--background-color);
-  color: #0E2F56;
+  color: var(--text-color);
 }
 
 html {
@@ -158,268 +160,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,6 @@
+:root {
+    --deep-blue: #536493;
+    --deep-red: #ef5a6f;
+    --background-color: #f9f2ed;
+    --text-color: #0E2F56;
+}