refactor: enhance site navigation and styling

- Add view transitions for site title
- Update Navbar with hover effects and improved typography
- Modify index page layout with decorative lines and date formatting
- Adjust post publication dates
- Update VSCode dictionary with new terms
This commit is contained in:
radishzzz 2025-02-04 22:32:15 +00:00
parent 95f15c2016
commit bdc2aa32e6
9 changed files with 34 additions and 21 deletions

View file

@ -26,21 +26,21 @@ const postsByYear = await getPostsByYear()
</section>
)}
{[...postsByYear.entries()].map(([year, posts]) => (
{[...postsByYear.entries()].map(([_year, posts]) => (
// Year Group
<section class="mt-8">
{/* Year */}
<time class="text-8 font-navbar">{year}</time>
<section class="mt-12">
{/* Decorative Line */}
<div class="h-0.2 w-16 bg-secondary opacity-25"></div>
{/* Posts List */}
<ul>
{posts.map(post => (
// Single Post
<li class="mt-6">
<li class="mt-7">
{/* Post Title */}
<a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
<a class="hover:text-primary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
{/* Post Date */}
<div class="block text-5.6 leading-7 font-navbar lg:inline lg:before:content-['_']" aria-hidden="true">
{post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
<div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
{post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
{post.remarkPluginFrontmatter?.minutes && <span class="ml-2"> {post.remarkPluginFrontmatter.minutes} min</span>}
</div>
</li>