feat: add back button

public/image/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.6 2.5 1.7 12.1l10.9 9.5.2 1.4h.8l-.6-5h-.8l.2 2.2L4 12.8h18.3v-1.5H4.8l7.6-6.7-.2 2.1h.8l.6-5.7h-.8z" style="fill:#505050"/></svg>

src/components/BackButton.astro

@@ -0,0 +1,32 @@
+<button
+  aria-label="Go back"
+  id="back-button"
+  class="aspect-square w-4 c-secondary active:scale-90"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M12.6 2.5 1.7 12.1l10.9 9.5.2 1.4h.8l-.6-5h-.8l.2 2.2L4 12.8h18.3v-1.5H4.8l7.6-6.7-.2 2.1h.8l.6-5.7h-.8z" />
+  </svg>
+</button>
+
+<script>
+function setupBackButton() {
+  const backButton = document.getElementById('back-button')
+  if (backButton) {
+    backButton.addEventListener('click', (e) => {
+      if (window.history.length > 2) {
+        e.preventDefault()
+        window.history.back()
+        return false
+      }
+      return true
+    })
+  }
+}
+
+document.addEventListener('astro:after-swap', setupBackButton)
+setupBackButton()
+</script>

src/components/MobileHeader.astro

@@ -37,14 +37,3 @@ const marginBottom = {
     </div>
   )}
 </header>
-
-<!-- <script is:inline>
-function _handleBack(e) {
-  if (window.history.length > 2) {
-    e.preventDefault()
-    window.history.back()
-    return false
-  }
-  return true
-}
-</script> -->

src/content/posts/retypeset_zh.md

@@ -1,7 +1,7 @@
 ---
 title: 主题介绍
 published: 2024-01-25
-tags: ["天体", "Markdown"]
+tags: ["Astro", "Markdown"]
 ---
 
 一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范，对原主题的所有页面进行重新编排，尽力还原传统印刷的阅读体验，同时不失现代设计的简约感受。所见皆为细节，方寸尽显优雅。

src/pages/index.astro

@@ -28,7 +28,7 @@ const postsByYear = await getPostsByYear()
 
     {[...postsByYear.entries()].map(([_year, posts]) => (
       // Year Group
-      <section class="mt-7.5">
+      <section class="mb-7.5">
         {/* Decorative Line */}
         <div class="h-0.125 w-10 bg-secondary opacity-25"></div>
         {/* Posts List */}

src/pages/posts/[slug].astro

@@ -1,4 +1,5 @@
 ---
+import BackButton from '@/components/BackButton.astro'
 import Layout from '@/layouts/Layout.astro'
 import { checkSlugDuplication } from '@/utils/content'
 import { generatePostPaths } from '@/utils/i18n'
@@ -25,8 +26,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postImage={post.data.image}
 >
   <article class="heti">
-    <!-- after:(absolute h-0.25 w-3 origin-left rotate-30 bg-secondary content-empty) before:(absolute h-0.25 w-3 origin-left rotate-330 bg-secondary content-empty) -->
+    <BackButton />
-    <div class="relative h-0.25 w-10 bg-secondary opacity-25"></div>
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}
@@ -37,7 +37,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     </h1>
 
     <div
-      class="mb-16.375 block c-primary font-time"
+      class="mb-15 block c-primary font-time"
       transition:name={`time-${post.data.slug || post.slug}`}
       data-disable-transition-on-theme
     >
@@ -51,7 +51,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     <Content />
 
     {post.data.tags && post.data.tags.length > 0 && (
-      <div class="mt-12">
+      <div class="mt-10.625">
         <div class="h-0.125 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 => (

src/styles/heti.css

@@ -115,7 +115,7 @@
 	font-weight:600
 }
 .heti .post-title {
-  --at-apply: 'mt-4.375 c-primary mb-2.375 font-bold text-9 leading-12';
+  --at-apply: 'mt-2.75 c-primary mb-2.375 font-bold text-9 leading-12';
 	line-height:48px
 }
 .heti h1 {