update: desktop style

public/image/back-home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.6 1.9 4.3 12l12.3 10.1.3 1.6h.8l-.5-5.5h-.8l.1 2.5L6.6 12l9.9-8.7-.1 2.5h.8l.5-5.5h-.8z" style="fill:#3d3d3d"/></svg>

src/components/PostDate.astro

@@ -63,7 +63,10 @@ function formatDate(date: Date, format: 'YYYY-MM-DD' | 'MM-DD-YYYY' | 'DD-MM-YYY
 
 <!-- updated date -->
 {updatedDate && (
-  <time datetime={updatedDate.toISOString().split('T')[0]} class={timeSpacingClass}>
+  <time
+    datetime={updatedDate.toISOString().split('T')[0]}
+    class={timeSpacingClass}
+  >
     updated {formatDate(updatedDate, format)}
   </time>
 )}

src/components/PostList.astro

@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content'
 import PostDate from '@/components/PostDate.astro'
 import { defaultLocale } from '@/config'
 import { generateDescription } from '@/utils/description'
+import { isTagPage } from '@/utils/page'
 
 type Post = CollectionEntry<'posts'> & {
   remarkPluginFrontmatter?: {
@@ -11,6 +12,7 @@ type Post = CollectionEntry<'posts'> & {
 }
 
 const { posts, lang } = Astro.props
+const isTag = isTagPage(Astro.url.pathname)
 
 export interface Props {
   posts: Post[]
@@ -26,12 +28,15 @@ function getPostPath(post: Post) {
 ---
 <ul>
   {posts.map(post => (
-    <li class="mb-5.5 lg:mb-7.5">
+    <li
+      class="mb-5.5"
+      lg={isTag ? '' : 'mb-10'}
+    >
 
       {/* post title */}
       <a
         class="hover:c-primary"
-        lg="font-medium text-4.5"
+        lg={isTag ? '' : 'font-medium text-4.5'}
         href={getPostPath(post)}
         transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
         data-disable-transition-on-theme
@@ -64,12 +69,14 @@ function getPostPath(post: Post) {
       </div>
 
       {/* desktop post description */}
-      <div
+      {!isTag && (
-        class="heti hidden"
+        <div
-        lg="mt-2 block"
+          class="heti hidden"
-      >
+          lg="mt-2 block"
-        <p>{generateDescription(post, 'list')}</p>
+        >
-      </div>
+          <p>{generateDescription(post, 'list')}</p>
+        </div>
+      )}
 
     </li>
   ))}

src/layouts/Layout.astro

@@ -59,7 +59,10 @@ const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
         <MainHeader />
         <Navigation />
         <!-- Desktop footer -->
-        <Footer class="fixed hidden lg:block" supportedLangs={supportedLangs} />
+        <Footer
+          class="fixed hidden lg:block"
+          supportedLangs={supportedLangs}
+        />
       </div>
 
       <!-- show simple header on mobile for post pages -->
@@ -71,7 +74,10 @@ const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
       </main>
 
       <!-- Mobile footer -->
-      <Footer class={`block lg:hidden ${mobileFooterMargin}`} supportedLangs={supportedLangs} />
+      <Footer
+        class={`block lg:hidden ${mobileFooterMargin}`}
+        supportedLangs={supportedLangs}
+      />
     </div>
 
     <!-- <Scrollbar /> -->
@@ -79,7 +85,10 @@ const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
     <!-- <PhotoSwipe /> -->
 
     <!-- Mobile widget (fix position issue on ios / fix right distance)-->
-    <div class="absolute right-7.25vw top-13.6 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.6 min-[823px]:right-[calc(50vw-22rem)] lg:hidden">
+    <div
+      class="absolute right-7.25vw top-13.6 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.6 min-[823px]:right-[calc(50vw-22rem)]"
+      lg="hidden"
+    >
       <LanguageSwitcher supportedLangs={supportedLangs} />
       <ThemeToggle />
     </div>

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

@@ -39,7 +39,7 @@ const postsByYear = await getPostsByYear(lang)
 
     <!-- Pinned Posts -->
     {pinnedPosts.length > 0 && (
-      <section class="mb-7.5 lg:mb-9.5">
+      <section class="mb-7.5 lg:mb-10">
         <div class="uno-decorative-line"></div>
         <PostList posts={pinnedPosts} lang={lang} />
       </section>
@@ -47,7 +47,7 @@ const postsByYear = await getPostsByYear(lang)
 
     <!-- Regular Posts -->
     {[...postsByYear.entries()].map(([_year, posts]) => (
-      <section class="mb-7.5 lg:mb-9.5">
+      <section class="mb-7.5 lg:mb-10">
         <div class="uno-decorative-line"></div>
         <PostList posts={posts} lang={lang} />
       </section>

src/pages/[...posts_slug].astro

@@ -103,9 +103,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postSlug={post.slug}
   supportedLangs={supportedLangs}
 >
-
-  <!-- Title -->
   <article class="heti mb-12.6">
+    <!-- Title -->
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
@@ -127,6 +126,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
         minutes={remarkPluginFrontmatter.minutes}
       />
     </div>
+
+    <!-- Content -->
     <Content />
   </article>
 

uno.config.ts

@@ -34,8 +34,8 @@ export default defineConfig({
   },
   shortcuts: {
     'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
-    'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25 mb-4.5',
+    'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25 mb-4.5 lg:(w-13.5 mb-6)',
-    'uno-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2',
+    'uno-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2 lg:w-100%',
   },
   rules: [
     ['scrollbar-hidden', {