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

33
src/layouts/Layout.astro
View File

@@ -24,7 +24,9 @@ const t = useTranslations(lang);
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description} />
<title>{title}{t('site.title') ? ` | ${t('site.title')}` : ''}</title>
<title>{title}{t('site.title') ? ` | ${t('site.title')}` : ''}</title>
<!-- View Transitions for smooth page transitions -->
<meta name="view-transition" content="same-origin" />
{
import.meta.env.MODE === 'production' && (
<script defer src="https://cloud.umami.is/script.js" data-website-id="a79f759b-74ae-4165-b738-56d123a1c6be"></script>
@@ -32,10 +34,10 @@ const t = useTranslations(lang);
}
</head>
<body
class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500"
class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
>
<div
class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"
class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.15),rgba(255,255,255,0))]"
>
</div>
<slot />
@@ -86,4 +88,29 @@ const t = useTranslations(lang);
background-color var(--transition-standard),
color var(--transition-standard);
}
/* Page transition animations */
@keyframes pageIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
main {
animation: pageIn 0.4s ease-out forwards;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
main {
animation: none;
opacity: 1;
transform: none;
}
}
</style>