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

feat(ui): add Container component and replace manual container divs

Browse Source 
Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability.
This commit is contained in:
joyzhao
2025-06-19 18:10:49 +08:00
parent b4a8d13cdd
commit 5fcf7a9d33
12 changed files with 97 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/layouts/AboutLayout.astro
View File

@@ -5,6 +5,7 @@ import { type Lang, type FrontmatterProps } from '@/types';
import { defaultLang } from '@/i18n/ui';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '../components/ui/Container';
// Use Astro's MarkdownLayoutProps for proper type safety
export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -21,7 +22,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
<div class="fixed inset-0 -z-10 h-full w-full bg-background">
<!-- Additional subtle gradient for about page -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10">
</div>
</div>
</div>
<!-- Glass Header with navigation -->
@@ -29,7 +30,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
<!-- Main content with proper spacing for fixed header -->
<div class="pt-16 sm:pt-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
<Container client:load size="md" className="py-8 md:py-12">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<!-- Main Content -->