Use new header

This adds a proper logo, and improves readability on mobile devices.
This commit is contained in:
Spotlight 2021-04-16 22:11:31 -05:00
commit af78a01393
No known key found for this signature in database
GPG key ID: 874AA355B3209BDC
6 changed files with 111 additions and 65 deletions

25
_includes/header.html Normal file
View file

@ -0,0 +1,25 @@
<div class="page-header">
<a href="/" class="wiilink24-logo">
<img src="/assets/header-logo.png" alt="WiiLink24 Logo" class="nav-logo"/>
</a>
<nav>
<ul>
<li>
<a href="/"><i class="fas fa-home"></i> Home</a>
</li>
<li>
<a href="/news"><i class="fas fa-comment-alt-lines"></i> News</a>
</li>
<li>
<a href="https://wii.guide/wiilink24"><i class="fas fa-book"></i> Guide</a>
</li>
<li>
<a href="/services"><i class="fas fa-cogs"></i> Services</a>
</li>
<li>
<a href="/donators"><i class="fas fa-sparkles"></i> Donators</a>
</li>
</ul>
</nav>
</div>

View file

@ -1,19 +0,0 @@
<div class="navbar" id="navbar">
<a href="/"><i class="fas fa-home"></i> Home</a>
<a href="/news"><i class="fas fa-comment-alt-lines"></i> News</a>
<a href="https://wii.guide/wiilink24"><i class="fas fa-book"></i> Guide</a>
<a href="/services"><i class="fas fa-cogs"></i> Services</a>
<a href="/donators"><i class="fas fa-sparkles"></i> Donators</a>
<a href="javascript:void(0);" class="icon" onclick="mobileNav()"><i class="fa fa-bars"></i></a>
</div>
<script>
function mobileNav() {
var x = document.getElementById("navbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>