zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): improve blog post layout and component styling

Browse Source 
- Move AuthorCard to bottom of main content with enhanced styling
- Adjust TableOfContents styling and positioning
- Simplify AuthorCard and GlassHeader components
This commit is contained in:
joyzhao
2025-06-19 11:52:05 +08:00
parent fb9b2b6971
commit 8cecab8479
4 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/layouts/BlogPostLayout.astro
View File

@@ -67,6 +67,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<!-- Main Content -->
<main class="xl:col-span-3 order-2 xl:order-1">
<!-- Blog post header -->
<header class="mb-10">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight">
@@ -98,18 +99,22 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
<div class="mt-8 sm:mt-12">
<BlogNavigation />
</div>
<!-- Author Card moved to bottom with enhanced styling -->
<div class="mt-10 sm:mt-16 border-t border-border pt-10">
<div class="bg-card/30 backdrop-blur-sm rounded-2xl border border-border p-6 shadow-sm hover:shadow-md transition-all duration-300">
<AuthorCard lang={lang} />
</div>
</div>
</main>
<!-- Sidebar -->
<aside class="xl:col-span-1 order-1 xl:order-2">
<div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto">
<!-- Table of Contents -->
<div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border h-auto xl:h-[400px] lg:h-[500px] overflow-y-auto">
<!-- Sidebar with Table of Contents -->
<aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6">
<div class="xl:sticky xl:top-24">
<!-- Table of Contents with dynamic max height -->
<div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border overflow-y-auto" style="max-height: min(calc(100vh - 6rem), 600px);">
<TableOfContents lang={lang} />
</div>
<!-- Author Card -->
<AuthorCard lang={lang} />
</div>
</aside>
</div>