update overall layout

src/components/Posts/PostItem.astro

@@ -1,6 +1,7 @@
 ---
 import "@/styles/global.css";
 import Remark42Counter from "@/components/Remark42Counter.astro";
+import TagLink from "@/components/TagLink.astro";
 import { getLangFromUrl } from "@/i18n";
 
 const lang = getLangFromUrl(Astro.url);
@@ -22,9 +23,7 @@ const tags = data.tags;
       <div class="tags" transition:name={`post-tags-${data.postId}`}>
         {
           tags.map((tag: string) => (
-            <p class="tag">
+            <TagLink tag={tag} lang={lang} />
-              <a href={`/${lang}/tags/${tag}`}>{tag}</a>
-            </p>
           ))
         }
       </div>
@@ -51,81 +50,31 @@ const tags = data.tags;
   </div>
 </li>
 
-<div class="section-divider"></div>
-
 <style>
   .tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem;
+    gap: 0.25rem 0.9rem;
-    margin-top: 0.5rem;
+    margin-top: 0.75rem;
-    margin-bottom: 0.5rem;
+    min-width: 0;
-  }
+    font-size: 0.85rem;
-
-  .tag {
-    font-family:
-      "Noto Sans SC",
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      "Open Sans",
-      "Helvetica Neue",
-      sans-serif;
-
-    margin: 0;
-    padding: 0.22em 0.65em;
-    font-size: 1rem;
-    line-height: 1.2;
-    border: 1px dashed #8b6b4a;
-    border-radius: 0;
-    background-color: transparent;
-  }
-
-  .tag a {
-    color: #6f4e37;
-    text-decoration: none;
-    font-size: 0.8rem;
-    font-weight: 500;
-  }
-
-  .tag a:hover {
-    text-decoration: underline;
-  }
-
-  :global(.dark) .tag {
-    border-color: #d8c7a1;
-  }
-
-  :global(.dark) .tag a {
-    color: #e6d8b8;
-  }
-
-  :global(.dark) .tag {
-    border-color: #d8c7a1;
-  }
-
-  :global(.dark) .tag a {
-    color: #e6d8b8;
   }
 
   .post-card {
     list-style: none;
-    margin: 0 0 1rem 0;
+    margin: 0;
-    padding-left: 0;
+    padding: 0;
-    padding-bottom: 0.9rem;
+  }
-    padding-top: 0.9rem;
+
+  .post-card + .post-card {
+    margin-top: 2rem;
   }
 
   .post-link {
     display: flex;
     justify-content: space-between;
-    align-items: stretch;
+    align-items: flex-start;
-    gap: 1rem;
+    gap: 1.5rem;
     width: 100%;
     text-decoration: none;
   }
@@ -136,14 +85,13 @@ const tags = data.tags;
     max-width: 40rem;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     line-height: 1.6;
-    min-height: calc(1.6em * 4);
   }
 
   .post-title-link {
     text-decoration: none;
     display: block;
+    min-width: 0;
   }
 
   .post-title {
@@ -163,7 +111,8 @@ const tags = data.tags;
       sans-serif;
     font-weight: 500;
     font-size: 1.34rem;
-    line-height: 1.6;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
@@ -171,11 +120,13 @@ const tags = data.tags;
   }
 
   .post-description {
-    color: black;
+    margin-top: 0.5rem;
+    color: #4e5e6e;
     text-decoration: none;
     font-weight: 400;
-    font-size: 0.92rem;
+    font-size: 0.95rem;
-    /* font-style: italic; */
+    line-height: 1.7;
+    overflow-wrap: anywhere;
   }
 
   .post-meta-row {
@@ -183,11 +134,13 @@ const tags = data.tags;
     align-items: center;
     gap: 0.9rem;
     flex-wrap: wrap;
+    margin-top: 0.75rem;
+    font-size: 0.82rem;
+    font-weight: 400;
+    color: #66717c;
   }
 
   .post-date {
-    color: gray;
-    font-size: 0.95rem;
     white-space: nowrap;
     line-height: 1.6;
   }
@@ -196,8 +149,6 @@ const tags = data.tags;
     display: inline-flex;
     align-items: center;
     gap: 0.7rem;
-    color: #6f8090;
-    font-size: 0.92rem;
     line-height: 1.6;
     white-space: nowrap;
   }
@@ -208,42 +159,47 @@ const tags = data.tags;
     gap: 0.2rem;
   }
 
+  .post-image-link {
+    display: block;
+    flex: 0 0 11rem;
+    width: 11rem;
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+  }
+
   .post-image {
-    width: calc((1.6em * 4) * 16 / 10);
+    width: 100%;
-    height: calc(1.6em * 4);
+    height: 100%;
     aspect-ratio: 16 / 10;
     object-fit: cover;
     object-position: center;
-    border: 1.5px #94a0ab dashed;
-    flex-shrink: 0;
     display: block;
   }
 
   :global(.dark) .post-description {
-    color: #e6e6e6;
+    color: #c4ccd5;
   }
 
-  :global(.dark) .post-stats {
+  :global(.dark) .post-meta-row {
     color: #aab7c4;
   }
 
   @media (max-width: 600px) {
     .post-link {
       display: grid;
-      grid-template-columns: 1fr 145px;
+      grid-template-columns: minmax(0, 1fr) clamp(88px, 24vw, 104px);
       grid-template-areas:
         "title title"
         "desc image"
-        "tags image"
+        "tags tags"
-        "meta image";
+        "meta meta";
       column-gap: 0.75rem;
-      row-gap: 0.2rem;
+      row-gap: 0;
       align-items: start;
     }
 
     .post-text {
       display: contents;
-      min-height: auto;
     }
 
     .post-title-link {
@@ -258,30 +214,20 @@ const tags = data.tags;
       grid-area: desc;
     }
 
+    .tags {
+      grid-area: tags;
+    }
+
     .post-meta-row {
       grid-area: meta;
       gap: 0.7rem;
     }
 
-    .post-image {
-      /* border: none; */
-      grid-area: image;
-      width: 100%;
-      height: calc(145px * 10 / 16);
-      align-self: center;
-    }
-
     .post-image-link {
       grid-area: image;
-      align-self: center;
+      margin-top: 0.5rem;
-      display: block;
+      width: 100%;
-      width: 145px;
       text-decoration: none;
     }
-
-    .post-card {
-      padding-bottom: 0.2rem;
-      padding-top: 0.2rem;
-    }
   }
 </style>

src/components/Posts/PostList.astro

@@ -59,15 +59,15 @@ const latestPosts = filteredPosts.slice(0, 7);
   }
 
   .more-link-wrap {
-    margin-top: 1rem;
+    margin-top: 2rem;
     text-align: right;
   }
 
   .more-link {
     color: #6f8090;
-    font-weight: 700;
+    font-weight: 400;
     text-decoration: none;
-    font-size: 1.14rem;
+    font-size: 0.9rem;
   }
 
   .more-link:hover {

src/components/TagLink.astro

@@ -0,0 +1,48 @@
+---
+interface Props {
+  tag: string;
+  lang: string;
+}
+
+const { tag, lang } = Astro.props;
+---
+
+<a class="tag-link" href={`/${lang}/tags/${encodeURIComponent(tag)}/`}>#{tag}</a>
+
+<style>
+  .tag-link {
+    display: inline-block;
+    max-width: 100%;
+    padding-block: 0.2rem;
+    font-family: "Noto Sans SC", system-ui, sans-serif;
+    font-size: inherit;
+    font-weight: 400;
+    line-height: 1.6;
+    color: #536493;
+    overflow-wrap: anywhere;
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25em;
+  }
+
+  .tag-link:hover,
+  .tag-link:focus-visible {
+    color: var(--text-color);
+    text-decoration: underline dashed 1px;
+  }
+
+  .tag-link:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 3px;
+  }
+
+  :global(html.dark) .tag-link {
+    color: #aabbd8;
+  }
+
+  :global(html.dark) .tag-link:hover,
+  :global(html.dark) .tag-link:focus-visible {
+    color: #d9e5f6;
+  }
+</style>

src/layouts/MarkdownPostLayout.astro

@@ -2,6 +2,7 @@
 import BaseLayout from "./BaseLayout.astro";
 import Remark42Embed from "@/components/Remark42Embed.astro";
 import PostNav from "@/components/Posts/PostNav.astro";
+import TagLink from "@/components/TagLink.astro";
 import PostMenu from "@/components/Posts/PostMenu.astro";
 import Dialog from "@/components/Posts/Dialog.astro";
 import { fade } from "astro:transitions";
@@ -61,9 +62,7 @@ const t = getTranslations(lang);
           <div class="tags" transition:name={`post-tags-${postId}`}>
             {
               frontmatter.tags.map((tag: string) => (
-                <p class="tag">
+                <TagLink tag={tag} lang={lang} />
-                  <a href={`/${lang}/tags/${tag}`}>{tag}</a>
-                </p>
               ))
             }
           </div>
@@ -317,8 +316,6 @@ const t = getTranslations(lang);
     aspect-ratio: 16 / 10;
     object-fit: cover;
     object-position: center;
-    /* border-radius: 0.4rem; */
-    border: 1.5px #94a0ab dashed;
     display: block;
   }
 
@@ -334,42 +331,13 @@ const t = getTranslations(lang);
   .tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem;
+    gap: 0.25rem 0.9rem;
     margin-top: 0.8rem;
     min-width: 0;
-  }
-
-  .tag {
-    margin: 0;
-    padding: 0.22em 0.65em;
     font-size: 0.88rem;
-    line-height: 1.2;
-    border: 1px dashed #8b6b4a;
-    border-radius: 0;
-    background-color: transparent;
-    max-width: 100%;
   }
 
-  .tag a {
+  @media (max-width: 800px) {
-    color: #6f4e37;
-    text-decoration: none;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-  }
-
-  .tag a:hover {
-    text-decoration: underline;
-  }
-
-  :global(.dark) .tag {
-    border-color: #d8c7a1;
-  }
-
-  :global(.dark) .tag a {
-    color: #e6d8b8;
-  }
-
-  @media (max-width: 560px) {
     .post-header {
       grid-template-columns: 1fr;
     }

src/pages/[lang]/index.astro

@@ -49,7 +49,7 @@ const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
 
     <div class="section-divider"></div>
 
-    <h2>{t.home.latestTitle}</h2>
+    <h2 class="section-title">{t.home.latestTitle}</h2>
 
     <PostList />
 
@@ -80,4 +80,19 @@ const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
   .page-title {
     font-weight: 700;
   }
+
+  .section-title,
+  .index :global(.latest-comments > h2) {
+    margin: 0 0 1.25rem;
+    font-family: "Noto Sans SC", system-ui, sans-serif;
+    font-size: 0.95rem;
+    font-weight: 500;
+    line-height: 1.5;
+    color: #66717c;
+  }
+
+  :global(html.dark) .section-title,
+  :global(html.dark) .index :global(.latest-comments > h2) {
+    color: #aab7c4;
+  }
 </style>

src/pages/[lang]/tags/index.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import TagLink from "@/components/TagLink.astro";
 import { getCollection } from "astro:content";
 import { getTranslations, type Lang } from "@/i18n";
 import "@/styles/global.css";
@@ -24,7 +25,7 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
             {
                 tags.map((tag) => (
                     <p class="tag" transition:name={`post-tags-${tag}`}>
-                        <a href={`/${lang}/tags/${tag}`}>{tag}</a>
+                        <TagLink tag={String(tag)} lang={lang} />
                     </p>
                 ))
             }
@@ -40,49 +41,13 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
     .tags {
         display: flex;
         flex-wrap: wrap;
-        gap: 0.4rem;
+        gap: 0.4rem 1.25rem;
         margin-top: 0.8rem;
     }
 
     .tag {
-        font-family:
-            "Noto Sans SC",
-            system-ui,
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Oxygen,
-            Ubuntu,
-            Cantarell,
-            "Open Sans",
-            "Helvetica Neue",
-            sans-serif;
-
         margin: 0;
-        padding: 0.22em 0.65em;
         font-size: 1rem;
-        line-height: 1.2;
+        max-width: 100%;
-        border: 1px dashed #8b6b4a;
-        border-radius: 0;
-        background-color: transparent;
-    }
-
-    .tag a {
-        color: #6f4e37;
-        text-decoration: none;
-        font-weight: 500;
-    }
-
-    .tag a:hover {
-        text-decoration: underline;
-    }
-
-    :global(.dark) .tag {
-        border-color: #d8c7a1;
-    }
-
-    :global(.dark) .tag a {
-        color: #e6d8b8;
     }
 </style>