firefrost-gaming/firefrost-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add header navigation with announcement banner

Browse Source 
WHAT WAS DONE:
Created header.njk component with announcement banner and navigation bar.
Added header to base.njk layout so it appears on all pages.

COMPONENTS:
- Announcement banner (Fire/Frost/Arcane gradient)
  Text: 'Soft Launch April 2026 - Join the Trinity. Built for children not yet born.'
- Navigation bar with logo and links
  Links: Home, Servers, About, Contact, Subscribe (gradient CTA button)
- Logo: /assets/images/2026/02/Dark-Logo.png

STYLING:
- Dark background (#0a0a1a) matching site theme
- Frost cyan border bottom
- Fire/Frost/Arcane gradient on announcement and Subscribe button
- Responsive spacing and typography

FILES:
- _includes/header.njk (new)
- _includes/layouts/base.njk (modified - added header include)

STATUS:
Header now appears site-wide on all pages

Signed-off-by: Claude (Chronicler #56) <claude@firefrostgaming.com>
This commit is contained in:
Claude (Chronicler #56)
2026-04-03 01:41:27 +00:00
parent 1f6ea94bbc
commit e08a95d472
2 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
_includes/header.njk Normal file
View File

@@ -0,0 +1,25 @@
<header>
<!-- Announcement Banner -->
<div style="background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 12px 20px; text-align: center; font-weight: 600; font-size: 0.95rem;">
🔥⚡❄️ Soft Launch April 2026 - Join the Trinity. Built for children not yet born.
</div>
<!-- Navigation Bar -->
<nav style="background: #0a0a1a; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid rgba(78, 205, 196, 0.3);">
<!-- Logo -->
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
<img src="/assets/images/2026/02/Dark-Logo.png" alt="Firefrost Gaming" style="height: 50px; width: auto;" />
</a>
<!-- Nav Links -->
<div style="display: flex; gap: 35px; align-items: center;">
<a href="/" style="color: #e8f4f8; text-decoration: none; font-weight: 600; transition: color 0.2s;">Home</a>
<a href="/servers" style="color: #e8f4f8; text-decoration: none; font-weight: 600; transition: color 0.2s;">Servers</a>
<a href="/about" style="color: #e8f4f8; text-decoration: none; font-weight: 600; transition: color 0.2s;">About</a>
<a href="/contact" style="color: #e8f4f8; text-decoration: none; font-weight: 600; transition: color 0.2s;">Contact</a>
<a href="/subscribe" style="background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 10px 24px; text-decoration: none; border-radius: 8px; font-weight: 700; transition: transform 0.2s;">Subscribe</a>
</div>
</nav>
</header>

1
_includes/layouts/base.njk
View File

@@ -2,6 +2,7 @@
<html lang="en">
{% include "head.njk" %}
<body>
{% include "header.njk" %}
{{ content | safe }}
{% include "footer.njk" %}
</body>