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

feat(ui): modernize design with gradient icons and animations

Browse Source 
- Add modern-code-icon.svg and update favicon with gradient styling
- Implement glass effect, hover animations and gradient text in global.css
- Enhance GlassHeader with motion animations and new icon
- Update design variables for modern look including shadows and transitions
This commit is contained in:
joyzhao
2025-06-21 10:31:48 +08:00
parent d0fe30a5e3
commit d6d2b131d1
5 changed files with 275 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/styles/global.css
View File

@@ -10,10 +10,39 @@
overflow: hidden;
}
/* Modern Design Elements */
.gradient-text {
background: linear-gradient(to right, #8B5CF6, #EC4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.dark .glass-effect {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--radius: 0.75rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
@@ -45,6 +74,17 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--svg-filter-color: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
/* Modern Design Variables */
--gradient-primary: linear-gradient(135deg, #8B5CF6, #EC4899);
--gradient-secondary: linear-gradient(135deg, #3B82F6, #10B981);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--animation-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}
.dark {
@@ -79,6 +119,12 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--svg-filter-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(102%) contrast(101%);
/* Dark Mode Modern Design Variables */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
}
@theme inline {
@@ -122,9 +168,20 @@
@layer base {
* {
@apply border-border outline-ring/50;
line-height: 1.2;
line-height: 1.5;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "ss01", "ss02", "cv01", "cv02";
}
h1, h2, h3, h4, h5, h6 {
@apply font-bold tracking-tight;
line-height: 1.2;
}
a {
@apply transition-colors duration-200;
}
img {
@apply rounded-md;
}
}