website/src/lib/Header.svelte
Alexander J c5385e834b Responsive
Signed-off-by: Alexander J <odyssey346@disroot.org>
2022-05-14 14:50:18 +02:00

63 lines
2.2 KiB
Svelte

<script lang="ts">
import css from "../assets/animation.css";
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
function showResponsive() {
var x = document.getElementById("navbarpieceofshitfuckihatethis");
var navbarClasses = x.classList;
var navbarClassesString = navbarClasses.toString();
const svelteclassthing = navbarClasses.item(2)
console.log(navbarClasses);
if (x.className === "center navbarpieceofshitfuckihatethis", svelteclassthing) {
console.log("Shit");
navbarClasses.add("responsive");
}
if (navbarClassesString.includes("responsive")){
console.log("Piss");
navbarClasses.remove("responsive");
}
};
</script>
<header id="navigationBar" class="navigvationBar">
<img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="project segfault's logo." />
<a href="/" class="text-flicker-in-glow" style="color: #ce1717">Project <span style="color: #00d4aa">Segfault</span></a>
<a href="javascript:void(0)" class="button" id="MenuButton" on:click={showResponsive}>Menu</a>
<div class="center navbarpieceofshitfuckihatethis" id="navbarpieceofshitfuckihatethis">
<a href="/instances" class="button">Instances</a>
<a href="/gameservers" class="button">Games</a>
<a href="/donate" class="button">Donate</a>
<a href="/minecraft" class="button">Minecraft</a>
<a href="/contact" class="button">Contact</a>
</div>
</header>
<style>
header {
background-color: #252525;
border: solid #252525;
border-width: 1em;
}
#ProjectSegfaultLogoHeader {
/*Here goes anything to do with the header logo*/
border-radius: 16px;
width: 32px;
vertical-align: middle;
display: inline-block;
}
.text-flicker-in-glow {
opacity:1;
-webkit-animation: text-flicker-in-glow 3000ms both;
animation: text-flicker-in-glow 3000ms both;
}
@media screen and (prefers-reduced-motion) {
.text-flicker-in-glow {
opacity:1;
-webkit-animation: text-flicker-in-glow 1000ms both;
animation: text-flicker-in-glow 1000ms both; }
}
</style>