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

refactor: update styles and animations across pages for improved consistency and aesthetics

Browse Source 
- Changed background gradients and color schemes in `now.astro` and `projects.astro` to use primary colors.
- Updated text styles and backgrounds to enhance readability and visual appeal.
- Added new font imports for better typography.
- Introduced custom animations and hover effects in `global.css` for enhanced user interaction.
- Adjusted CSS variables for a more cohesive design across light and dark modes.
This commit is contained in:
zguiyang
2026-03-13 14:39:09 +08:00
parent 30b097cc74
commit 0d050b0c14
28 changed files with 491 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,12 +32,12 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
<!-- Projects Hero Section -->
<section class="py-24 relative overflow-hidden">
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-primary/10 to-primary/20 dark:from-blue-900/30 dark:via-primary/20 dark:to-primary/30"></div>
<Container className="relative z-10">
<div class="text-center mb-16">
<!-- Main title -->
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-primary to-primary dark:from-white dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent">
{t('projects.title')}
</h1>
@@ -51,23 +51,23 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
<!-- Featured Project Section -->
{featuredProject && (
<section class="py-12 bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
<section class="py-12 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-5xl mx-auto">
<div class="flex items-center gap-4 mb-8">
<span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium">
<span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium">
Featured 项目
</span>
</div>
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/30 overflow-hidden">
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-primary/30 overflow-hidden">
<div class="grid lg:grid-cols-2">
<div class="h-64 lg:h-auto bg-gradient-to-br from-purple-600/20 via-blue-600/20 to-purple-600/20 flex items-center justify-center relative overflow-hidden">
<div class="h-64 lg:h-auto bg-gradient-to-br from-primary/20 via-blue-600/20 to-primary/20 flex items-center justify-center relative overflow-hidden">
<div class="text-8xl">{featuredProject.icon}</div>
</div>
<div class="p-8">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
<span class="px-3 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm">
{t(`project.status.${featuredProject.status}`)}
</span>
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
@@ -101,7 +101,7 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
</div>
<div class="flex gap-4">
<a href={featuredProject.link} class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
<a href={featuredProject.link} class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
{t('project.visit')}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
@@ -131,7 +131,7 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
{productProjects.length > 0 && (
<>
<div class="flex items-center gap-4 mb-8">
<div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
<div class="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
<span class="text-xl">🛍️</span>
</div>
<h2 class="text-2xl font-bold">{t('project.type.product')}</h2>