CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

style: Update Header and Footer to neon esports aesthetic

Browse Source 
- Apply void dark background with neon-blue border accents
- Add neon text-shadow glow to logo (cyan + gold)
- Update nav links to hover:text-neon-blue with focus-visible states
- Add grid pattern overlay to footer
- Use neon-red for heart icon and donation hover
- Add motion-reduce support and accessible focus rings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
vikingowl
2025-12-07 16:15:35 +01:00
parent 1ddda81d93
commit a77082c400
2 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/layout/Header.svelte
View File

@@ -13,13 +13,19 @@
];
</script>
<header class="sticky top-0 z-50 w-full border-b border-base-300 bg-base-100/95 backdrop-blur-md">
<header class="sticky top-0 z-50 w-full border-b border-neon-blue/20 bg-void/95 backdrop-blur-md">
<div class="container mx-auto px-4">
<div class="flex h-16 items-center justify-between">
<!-- Logo -->
<a href="/" class="transition-transform hover:scale-105" aria-label="teamflash.rip Home">
<a
href="/"
class="rounded transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:hover:scale-100"
aria-label="teamflash.rip Home"
>
<h1 class="text-2xl font-bold">
<span class="text-primary">team</span><span class="text-secondary">flash.rip</span>
<span style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff;">team</span><span
style="color: #ffd700; text-shadow: 0 0 10px #ffd700;">flash.rip</span
>
</h1>
</a>
@@ -28,7 +34,7 @@
{#each navigation as item}
<a
href={item.href}
class="text-sm font-medium text-base-content/70 transition-colors hover:text-primary"
class="rounded text-sm font-medium text-white/60 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
>
{item.name}
</a>
@@ -42,7 +48,7 @@
<!-- Mobile Menu Toggle -->
<button
class="btn btn-ghost btn-sm md:hidden"
class="rounded-lg p-2 text-white/70 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue md:hidden"
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
aria-label="Toggle menu"
>
@@ -57,11 +63,11 @@
<!-- Mobile Navigation -->
{#if mobileMenuOpen}
<nav class="animate-fade-in border-t border-base-300 py-4 md:hidden">
<nav class="animate-fade-in border-t border-neon-blue/20 py-4 md:hidden">
{#each navigation as item}
<a
href={item.href}
class="block px-4 py-2 text-sm font-medium text-base-content transition-colors hover:bg-base-200"
class="mx-2 block rounded-lg px-4 py-2 text-sm font-medium text-white/60 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue"
onclick={() => (mobileMenuOpen = false)}
>
{item.name}