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

refactor(header): replace static image icon with SVG and update gradient text style

Browse Source 
- Replaced hardcoded image icon in `GlassHeader` with inline SVG for better scalability and customization.
- Updated `.gradient-text` to use `--ui-title-gradient` variable for improved design consistency.
This commit is contained in:
zguiyang
2026-03-14 12:45:32 +08:00
parent 043cdc6734
commit e677c03e26
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/GlassHeader.tsx
View File

@@ -69,11 +69,12 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
className="flex items-center text-lg font-medium transition-colors duration-150 hover:text-foreground/80" className="flex items-center text-lg font-medium transition-colors duration-150 hover:text-foreground/80"
href={getLocalizedPath('/', lang)} href={getLocalizedPath('/', lang)}
> >
<img <div className="w-6 h-6 mr-2 flex items-center justify-center">
src="/modern-code-icon.svg" <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className="w-full h-full">
alt="Code Icon" <path d="M9 6L3 12L9 18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-primary" />
className="w-6 h-6 mr-2" <path d="M15 6L21 12L15 18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent" />
/> </svg>
</div>
<span className="gradient-text font-bold">{personalInfo.name}</span> <span className="gradient-text font-bold">{personalInfo.name}</span>
</motion.a> </motion.a>

2
src/styles/global.css
View File

@@ -13,7 +13,7 @@
/* Modern Design Elements */ /* Modern Design Elements */
.gradient-text { .gradient-text {
background: linear-gradient(to right, #8B5CF6, #EC4899); background: var(--ui-title-gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;