From b4bd409e4bcb966040f164c8a0da3cbe1e08f785 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Tue, 18 Mar 2025 04:03:42 +0000
Subject: [PATCH] update: desktop style

---
 public/image/back-home.svg      |  1 +
 src/components/PostDate.astro   |  5 ++++-
 src/components/PostList.astro   | 23 +++++++++++++++--------
 src/layouts/Layout.astro        | 15 ++++++++++++---
 src/pages/[...index].astro      |  4 ++--
 src/pages/[...posts_slug].astro |  5 +++--
 uno.config.ts                   |  4 ++--
 7 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 public/image/back-home.svg

diff --git a/public/image/back-home.svg b/public/image/back-home.svg
new file mode 100644
index 0000000..975a8d3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/PostDate.astro b/src/components/PostDate.astro
index 35fc281..8a5ff5b 100644
--- a/src/components/PostDate.astro
+++ b/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>
 )}
diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index 00ba3ab..def8abf 100644
--- a/src/components/PostList.astro
+++ b/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
-        class="heti hidden"
-        lg="mt-2 block"
-      >
-        <p>{generateDescription(post, 'list')}</p>
-      </div>
+      {!isTag && (
+        <div
+          class="heti hidden"
+          lg="mt-2 block"
+        >
+          <p>{generateDescription(post, 'list')}</p>
+        </div>
+      )}
 
     </li>
   ))}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4f986c4..75d265b 100644
--- a/src/layouts/Layout.astro
+++ b/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>
diff --git a/src/pages/[...index].astro b/src/pages/[...index].astro
index e973097..80c2c37 100644
--- a/src/pages/[...index].astro
+++ b/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>
diff --git a/src/pages/[...posts_slug].astro b/src/pages/[...posts_slug].astro
index 4acb973..fdc7ef8 100644
--- a/src/pages/[...posts_slug].astro
+++ b/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>
 
diff --git a/uno.config.ts b/uno.config.ts
index 7ccce7f..6fdd50f 100644
--- a/uno.config.ts
+++ b/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-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2',
+    '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 lg:w-100%',
   },
   rules: [
     ['scrollbar-hidden', {