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

refactor(layout): unify inner-page typography rhythm with container-based widths

Browse Source
This commit is contained in:
zguiyang
2026-03-13 15:37:35 +08:00
parent e2eb43e24c
commit 98d9535e61
12 changed files with 51 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/Container.astro
View File

@@ -6,6 +6,6 @@ interface Props {
const { className = "" } = Astro.props;
---
<div class={`container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl ${className}`.trim()}>
<div class={`container mx-auto px-4 sm:px-6 lg:px-8 ${className}`.trim()}>
<slot />
</div>

6
src/layouts/AboutLayout.astro
View File

@@ -31,7 +31,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
<!-- Main content with proper spacing for fixed header -->
<div class="pt-16 sm:pt-20">
<Container className="py-8 md:py-12">
<div class="max-w-7xl mx-auto">
<div class="w-full">
<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">
@@ -42,14 +42,14 @@ const lang = Astro.currentLocale as Lang || defaultLang;
</h1>
{description && (
<p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
<p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed page-content-main">
📝 {description}
</p>
)}
</header>
<!-- About page content with typography styles -->
<article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
<article class="prose prose-lg dark:prose-invert prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
<slot />
</article>
</main>

6
src/layouts/BlogPostLayout.astro
View File

@@ -48,7 +48,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
<!-- Main content with proper spacing for fixed header -->
<div class="pt-16 sm:pt-20">
<Container className="py-6 sm:py-8">
<div class="max-w-7xl mx-auto">
<div class="w-full">
<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">
@@ -88,14 +88,14 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
</h1>
{description && (
<p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
<p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed page-content-main">
{description}
</p>
)}
</header>
<!-- Blog post content with typography styles -->
<article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed
<article class="prose prose-lg dark:prose-invert prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed
prose-code:before:content-none prose-code:after:content-none">
<slot />
</article>

4
src/pages/blog/index.astro
View File

@@ -51,7 +51,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-primary to-primary dark:from-foreground dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent mb-6">
<span class="text-primary">Blog</span>
</h1>
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
<p class="text-xl text-muted-foreground page-content-main">
Thoughts on AI products, full-stack development, and building in public. Exploring the intersection of technology and product building.
</p>
</div>
@@ -74,7 +74,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
<BlogList posts={sortedBlogPosts} lang="en" />
</div>
</div>
</div>
</Container>
</main>
</BlogLayout>

16
src/pages/hire.astro
View File

@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{lang === 'zh' ? '合作' : 'Hire Me'}
</h1>
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
<p class="text-lg text-muted-foreground page-content-narrow">
{lang === 'zh'
? '构建优秀产品，从找到合适的技术合伙人开始'
: 'Building great products starts with finding the right technical partner'}
@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Who I Work With -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">👥</span>
@@ -101,7 +101,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- What I Build -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🛠️</span>
@@ -167,7 +167,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Engagement Models -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📋</span>
@@ -227,7 +227,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Delivery Style -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🎯</span>
@@ -300,7 +300,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Availability -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📅</span>
@@ -341,11 +341,11 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Contact CTA -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto text-center">
<div class="page-content-main text-center">
<h2 class="text-3xl font-bold mb-6">
{lang === 'zh' ? '准备好一起构建了吗？' : 'Ready to build together?'}
</h2>
<p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
<p class="text-lg text-muted-foreground mb-8 page-content-narrow">
{lang === 'zh'
? '告诉我你的项目想法，让我们看看能否合作。'
: "Tell me about your project idea and let's see if we can work together."}

12
src/pages/now.astro
View File

@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{lang === 'zh' ? '现在' : 'Now'}
</h1>
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
<p class="text-lg text-muted-foreground page-content-narrow">
{lang === 'zh'
? '持续更新我的现状、正在构建的内容以及合作机会'
: 'Continuously updating my current status, what I am building, and collaboration opportunities'}
@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Building Section -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔨</span>
@@ -76,7 +76,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Exploring Section -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔭</span>
@@ -116,7 +116,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Shipping Section -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🚀</span>
@@ -150,7 +150,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Open to Collaborate Section -->
<section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
<Container>
<div class="max-w-4xl mx-auto text-center">
<div class="page-content-main text-center">
<div class="flex items-center justify-center gap-4 mb-8">
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🤝</span>
@@ -190,7 +190,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Last Updated -->
<section class="py-12">
<Container>
<div class="max-w-4xl mx-auto text-center">
<div class="page-content-main text-center">
<p class="text-sm text-muted-foreground">
{lang === 'zh' ? '最后更新：' : 'Last updated: '}
<span class="font-medium">2025年3月</span>

4
src/pages/projects.astro
View File

@@ -44,7 +44,7 @@ const statusClassMap = {
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{t('projects.title')}
</h1>
<p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
<p class="text-lg text-muted-foreground page-content-main mb-12 leading-relaxed">
{t('projects.slogan')} {t('projects.description')}
</p>
</div>
@@ -53,7 +53,7 @@ const statusClassMap = {
<section class="relative z-10 pb-20" data-projects-root>
<Container>
<div class="max-w-5xl mx-auto">
<div class="page-content-main">
<div class="page-surface flex flex-wrap gap-2 mb-8 p-1 rounded-xl">
{filterOptions.map((option, index) => (
<button

4
src/pages/zh/blog/index.astro
View File

@@ -63,7 +63,7 @@ const tags = extractTags(allPostsArray);
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-primary to-primary dark:from-foreground dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent mb-6">
<span class="text-primary">博客</span>
</h1>
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
<p class="text-xl text-muted-foreground page-content-main">
关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。
</p>
</div>
@@ -87,7 +87,7 @@ const tags = extractTags(allPostsArray);
<BlogList posts={sortedBlogPosts} lang="zh" />
</div>
</div>
</div>
</Container>
</main>
</BlogLayout>

16
src/pages/zh/hire.astro
View File

@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
合作
</h1>
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
<p class="text-lg text-muted-foreground page-content-narrow">
构建优秀产品，从找到合适的技术合伙人开始
</p>
</div>
@@ -37,7 +37,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Who I Work With -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">👥</span>
@@ -91,7 +91,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- What I Build -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🛠️</span>
@@ -151,7 +151,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Engagement Models -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📋</span>
@@ -205,7 +205,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Delivery Style -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🎯</span>
@@ -262,7 +262,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Availability -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📅</span>
@@ -301,11 +301,11 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Contact CTA -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto text-center">
<div class="page-content-main text-center">
<h2 class="text-3xl font-bold mb-6">
准备好一起构建了吗？
</h2>
<p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
<p class="text-lg text-muted-foreground mb-8 page-content-narrow">
告诉我你的项目想法，让我们看看能否合作。
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">

12
src/pages/zh/now.astro
View File

@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
现在
</h1>
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
<p class="text-lg text-muted-foreground page-content-narrow">
持续更新我的现状、正在构建的内容以及合作机会
</p>
</div>
@@ -37,7 +37,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Building Section -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔨</span>
@@ -72,7 +72,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Exploring Section -->
<section class="py-16 relative page-section-soft">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔭</span>
@@ -108,7 +108,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Shipping Section -->
<section class="py-16 relative">
<Container>
<div class="max-w-4xl mx-auto">
<div class="page-content-main">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🚀</span>
@@ -140,7 +140,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Open to Collaborate Section -->
<section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
<Container>
<div class="max-w-4xl mx-auto text-center">
<div class="page-content-main text-center">
<div class="flex items-center justify-center gap-4 mb-8">
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🤝</span>
@@ -178,7 +178,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Last Updated -->
<section class="py-12">
<Container>
<div class="max-w-4xl mx-auto text-center">
<div class="page-content-main text-center">
<p class="text-sm text-muted-foreground">
最后更新：
<span class="font-medium">2025年3月</span>

4
src/pages/zh/projects.astro
View File

@@ -44,7 +44,7 @@ const statusClassMap = {
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{t('projects.title')}
</h1>
<p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
<p class="text-lg text-muted-foreground page-content-main mb-12 leading-relaxed">
{t('projects.slogan')} {t('projects.description')}
</p>
</div>
@@ -53,7 +53,7 @@ const statusClassMap = {
<section class="relative z-10 pb-20" data-projects-root>
<Container>
<div class="max-w-5xl mx-auto">
<div class="page-content-main">
<div class="page-surface flex flex-wrap gap-2 mb-8 p-1 rounded-xl">
{filterOptions.map((option, index) => (
<button

8
src/styles/global.css
View File

@@ -237,6 +237,14 @@
background: var(--ui-section-soft-bg);
}
.page-content-main {
@apply w-full lg:w-10/12 lg:mx-auto;
}
.page-content-narrow {
@apply w-full lg:w-8/12 lg:mx-auto;
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}