update: post page layout

package.json

@@ -50,6 +50,7 @@
     "@types/node": "^22.13.4",
     "@types/sanitize-html": "^2.13.0",
     "@unocss/eslint-plugin": "^65.5.0",
+    "@unocss/preset-attributify": "^65.5.0",
     "@unocss/reset": "^65.5.0",
     "astro-eslint-parser": "^1.2.1",
     "eslint": "^9.20.1",

pnpm-lock.yaml

@@ -111,6 +111,9 @@ importers:
       '@unocss/eslint-plugin':
         specifier: ^65.5.0
         version: 65.5.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      '@unocss/preset-attributify':
+        specifier: ^65.5.0
+        version: 65.5.0
       '@unocss/reset':
         specifier: ^65.5.0
         version: 65.5.0

src/components/MobileHeader.astro

@@ -2,25 +2,43 @@
 import themeConfig from '@/config'
 import { getPagePath } from '@/utils/path'
 
-const { title } = themeConfig.site
+const { title, subtitle } = themeConfig.site
+const { titleSpace } = themeConfig.global
 const currentPath = Astro.url.pathname
 const { getLocalizedPath } = getPagePath(currentPath)
+
+const marginBottom = {
+    1: 'mb-2.6',
+    2: 'mb-4.6',
+    3: 'mb-6.6',
+  }[titleSpace] || 'mb-4.6'
 ---
 
-<header class="mt-4.7 mb-17 text-8.6 c-secondary font-bold font-title lg:hidden">
+<header class="mb-17">
-  <!-- Fix text cut issue on ios by adding a div tag -->
+  <h3 class={`${marginBottom} mt-4.7 text-8.6 c-secondary font-bold font-title`}>
-  <div
+    <!-- Fix text cut issue on ios by adding a div tag -->
-    class="box-content inline-block pr-2"
+    <div
-    transition:name="site-title"
+      class="box-content inline-block pr-2"
-    data-disable-transition-on-theme
+      transition:name="site-title"
-  >
+      data-disable-transition-on-theme
-    <a
-      href={getLocalizedPath('/')}
-      onclick="return _handleBack(event)"
     >
-      {title}
+      <a
-    </a>
+        href={getLocalizedPath('/')}
-  </div>
+        onclick="return _handleBack(event)"
+      >
+        {title}
+      </a>
+    </div>
+  </h3>
+
+  {subtitle && (
+    <div
+      class="text-5.6 opacity-0"
+      aria-hidden="true"
+    >
+      {subtitle}
+    </div>
+  )}
 </header>
 
 <script is:inline>

src/layouts/Layout.astro

@@ -45,7 +45,7 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
         <Footer />
       </div>
 
-      {!isHome && isPost && <MobileHeader /> }
+      {!isHome && isPost && <MobileHeader class="lg:hidden" /> }
 
       <main class="col-start-1 row-start-1">
         <slot />

src/pages/index.astro

@@ -45,11 +45,14 @@ const postsByYear = await getPostsByYear()
                 {post.data.title}
               </a>
               {/* Post Date */}
-              <div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
+              <div
-                <span>
+                class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline"
+                transition:name={`time-${post.data.slug || post.slug}`}
+              >
+                <time>
                   {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
-                </span>
+                </time>
-                <span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
+                <span class="ml-2">
                   {post.remarkPluginFrontmatter?.minutes} min
                 </span>
               </div>

src/pages/posts/[slug].astro

@@ -25,19 +25,23 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postImage={post.data.image}
 >
   <article class="heti">
-    <h1>
+    <h1 class="post-title">
       <span transition:name={`post-${post.data.slug || post.slug}`}>
         {post.data.title}
       </span>
     </h1>
-    <time>
+
-      <span>
+    <div
-        {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
+      class="mb-20.5 block c-primary font-time"
+      transition:name={`time-${post.data.slug || post.slug}`}
+    >
+      <time>
+        {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+      </time>
+      <span class="ml-2">
+        {remarkPluginFrontmatter.minutes} min
       </span>
-        <span>
+    </div>
-          {remarkPluginFrontmatter.minutes} min
-        </span>
-    </time>
     <Content />
   </article>
 </Layout>

src/styles/heti.css

@@ -115,9 +115,12 @@
 	margin-block-end:12px;
 	font-weight:600
 }
+.heti .post-title {
+  --at-apply: 'c-primary mb-7.1 text-14.4 relative leading-19.2 before:(absolute left-0 top--7 h-0.2 w-16 bg-secondary opacity-25 content-[''])';
+	line-height:48px
+}
 .heti h1 {
-  --at-apply: 'font-bold';
+  --at-apply: 'mb-9.6';
-	margin-block-end:24px;
 	font-size:32px;
 	line-height:48px
 }