feat: optimize underline style and theme introduction

README.md

@@ -19,7 +19,9 @@
 
 # Retypeset
 
-A blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of traditional layouts. Details in every sight, elegance in every space.
+A static blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of typography.
+
+Details in every sight, elegance in every space.
 
 - [Live Demo](https://retypeset.radishzz.cc/)
 - [Mobile design](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773)

README.zh.md

@@ -19,7 +19,9 @@
 
 # 重新编排
 
-一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。所见皆为细节，方寸尽显优雅。
+一款基于 <a href="https://astro.build/">Astro</a> 框架的静态博客主题，灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。
+
+所见皆为细节，方寸尽显优雅。
 
 - [在线预览](https://retypeset.radishzz.cc/)
 - [移动端设计稿](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773)

src/components/Footer.astro

@@ -27,12 +27,12 @@ const year = Number(startYear) === currentYear
   ]}
 >
   <p>
-    <a href={linkAUrl}>{linkAName}</a> /
+    <a class="hover:(c-primary transition-colors)" href={linkAUrl}>{linkAName}</a> /
-    <a href={linkBUrl}>{linkBName}</a> /
+    <a class="hover:(c-primary transition-colors)" href={linkBUrl}>{linkBName}</a> /
-    <a href={linkCUrl}>{linkCName}</a>
+    <a class="hover:(c-primary transition-colors)" href={linkCUrl}>{linkCName}</a>
   </p>
   <p>
-    Powered by <a href="https://astro.build/">Astro</a> and <a href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
+    Powered by <a class="hover:(c-primary transition-colors)" href="https://astro.build/">Astro</a> and <a class="hover:(c-primary transition-colors)" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
   </p>
   <p>
     © {year} {author}

src/content/posts/retypeset_en.md

@@ -5,4 +5,6 @@ tags: ["Astro", "Markdown"]
 lang: en
 ---
 
-A blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of traditional layouts. Details in every sight, elegance in every space.
+A static blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of typography.
+
+Details in every sight, elegance in every space.

src/content/posts/retypeset_zh.md

@@ -4,4 +4,6 @@ published: 2024-01-25
 tags: ["Astro", "Markdown"]
 ---
 
-一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。所见皆为细节，方寸尽显优雅。
+一款基于<a href="https://astro.build/">Astro</a>框架的静态博客主题，灵感来自<a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。
+
+所见皆为细节，方寸尽显优雅。

src/pages/about.astro

@@ -5,6 +5,7 @@ import Layout from '@/layouts/Layout.astro'
 <Layout>
   <div class="h-0.25 w-10 bg-secondary opacity-25"></div>
   <div class="heti mt-4.375">
-    <p>一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。所见皆为细节，方寸尽显优雅。</p>
+    <p>一款基于<a href="https://astro.build/">Astro</a>框架的静态博客主题，灵感来自<a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。</p>
+    <p>所见皆为细节，方寸尽显优雅。</p>
   </div>
 </Layout>

src/pages/posts/[slug].astro

@@ -25,7 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postDescription={post.data.description}
   postImage={post.data.image}
 >
-  <article class="heti mb-16">
+  <article class="heti mb-12.6">
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}
@@ -48,23 +48,24 @@ const { Content, remarkPluginFrontmatter } = await post.render()
       </span>
     </div>
     <Content />
-
-    {post.data.tags && post.data.tags.length > 0 && (
-      <div class="mt-12.625">
-        <div class="h-0.25 w-10 bg-secondary opacity-25"></div>
-        <div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
-          {post.data.tags.map(tag => (
-            <a
-              href={`/tags/${tag}/`}
-              class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
-            >
-              {tag}
-            </a>
-          ))}
-        </div>
-      </div>
-    )}
   </article>
 
+  <!-- Tags -->
+  {post.data.tags && post.data.tags.length > 0 && (
+    <div class="mb-16">
+      <div class="h-0.25 w-10 bg-secondary opacity-25"></div>
+      <div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
+        {post.data.tags.map(tag => (
+          <a
+            href={`/tags/${tag}/`}
+            class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
+          >
+            {tag}
+          </a>
+        ))}
+      </div>
+    </div>
+  )}
+
   <Comments />
 </Layout>

src/styles/heti.css

@@ -23,6 +23,9 @@
 .heti>*:last-child,.heti section>*:last-child,.heti td>*:last-child {
 	margin-block-end:0 !important
 }
+.heti a {
+  --at-apply: 'uno-custom-underline';
+}
 .heti blockquote {
 	margin-block-start:12px;
 	margin-block-end:24px;

uno.config.ts

@@ -32,7 +32,9 @@ export default defineConfig({
       serif: ['STIX', 'EarlySummer', 'Georgia', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
     },
   },
-  shortcuts: {},
+  shortcuts: {
+    'uno-custom-underline': 'underline mx-0.3em decoration-secondary/35 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-primary/50 transition underline-0.1em)',
+  },
   rules: [
     ['scrollbar-hidden', {
       'scrollbar-width': 'none',