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

59
src/lib/components/layout/Footer.svelte
View File

@@ -28,15 +28,27 @@
};
</script>
<footer class="border-t border-base-300 bg-base-100">
<div class="container mx-auto px-4 py-12">
<footer class="relative border-t border-neon-blue/20 bg-void">
<!-- Grid Pattern Overlay -->
<div
class="pointer-events-none absolute inset-0 opacity-10"
style="background-image: linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px;"
aria-hidden="true"
></div>
<div class="container relative mx-auto px-4 py-12">
<div class="grid gap-8 md:grid-cols-4">
<!-- Brand -->
<div class="md:col-span-1">
<a href="/" class="mb-4 inline-block text-2xl font-bold">
<span class="text-primary">team</span><span class="text-secondary">flash.rip</span>
<a
href="/"
class="mb-4 inline-block rounded text-2xl font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue"
>
<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
>
</a>
<p class="mb-4 text-sm text-base-content/60">
<p class="mb-4 text-sm text-white/50">
Stop flashing your teammates. Free and open source.
</p>
<div class="flex gap-3">
@@ -44,34 +56,32 @@
href="https://somegit.dev/CSGOWTF/csgowtf"
target="_blank"
rel="noopener noreferrer"
class="text-base-content/60 transition-colors hover:text-primary"
class="rounded text-white/50 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
aria-label="GitHub"
>
<Github class="h-5 w-5" />
<Github class="h-5 w-5" aria-hidden="true" />
</a>
<a
href="https://liberapay.com/CSGOWTF/"
target="_blank"
rel="noopener noreferrer"
class="text-base-content/60 transition-colors hover:text-error"
class="rounded text-white/50 transition-colors hover:text-neon-red focus:outline-none focus-visible:text-neon-red"
aria-label="Support on Liberapay"
>
<Heart class="h-5 w-5" />
<Heart class="h-5 w-5" aria-hidden="true" />
</a>
</div>
</div>
<!-- Links -->
<div>
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
Navigate
</h3>
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">Navigate</h3>
<ul class="space-y-2">
{#each links.main as link}
<li>
<a
href={link.href}
class="text-sm text-base-content/60 transition-colors hover:text-primary"
class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
>
{link.name}
</a>
@@ -81,15 +91,13 @@
</div>
<div>
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
About
</h3>
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">About</h3>
<ul class="space-y-2">
{#each links.about as link}
<li>
<a
href={link.href}
class="text-sm text-base-content/60 transition-colors hover:text-primary"
class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
>
{link.name}
</a>
@@ -99,15 +107,13 @@
</div>
<div>
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
Resources
</h3>
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">Resources</h3>
<ul class="space-y-2">
{#each links.resources as link}
<li>
<a
href={link.href}
class="text-sm text-base-content/60 transition-colors hover:text-primary"
class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
{...link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
>
{link.name}
@@ -119,13 +125,18 @@
</div>
<!-- Bottom -->
<div class="mt-12 border-t border-base-300 pt-8 text-center text-sm text-base-content/60">
<div class="mt-12 border-t border-neon-blue/20 pt-8 text-center text-sm text-white/50">
<p>
© {currentYear} teamflash.rip Team. Licensed under
<a href="/license" class="hover:text-primary">GPL-3.0</a>
<a
href="/license"
class="rounded transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
>GPL-3.0</a
>
</p>
<p class="mt-2">
Made with <Heart class="inline h-4 w-4 text-error" /> by players who are tired of being flashed.
Made with <Heart class="inline h-4 w-4 text-neon-red" aria-hidden="true" /> by players who are
tired of being flashed.
</p>
</div>
</div>

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}