You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.0 KiB
Svelte
74 lines
2.0 KiB
Svelte
<script>
|
|
import Logo from '../components/logo.svelte';
|
|
|
|
|
|
function click_link() {
|
|
document
|
|
.querySelectorAll(".menu-btn")
|
|
.forEach(elem => elem.classList.toggle("darken"));
|
|
document
|
|
.querySelectorAll("#root")
|
|
.forEach(elem => elem.classList.toggle("darken"));
|
|
document
|
|
.querySelectorAll(".navigation-overlay")
|
|
.forEach(elem => elem.classList.toggle("open-nav"));
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.menu {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 10vh;
|
|
}
|
|
.menu ul {
|
|
list-style: none;
|
|
width: 60vw;
|
|
}
|
|
.menu ul li {
|
|
font-family: var(--font-family-sans);
|
|
font-size: 5vh;
|
|
margin-bottom: 5vh;
|
|
}
|
|
.menu ul li a {
|
|
cursor: pointer;
|
|
color: #d73648;
|
|
transition: 0.3s;
|
|
text-decoration: none;
|
|
}
|
|
.menu ul li a:hover {
|
|
text-decoration: underline;
|
|
color: #7c242e;
|
|
}
|
|
.big {
|
|
width: max(3vw, 1.7em);
|
|
height: max(3vw, 1.7em);
|
|
filter: brightness(0) saturate(100%) invert(37%) sepia(82%) saturate(4328%) hue-rotate(334deg) brightness(88%) contrast(91%) !important;
|
|
}
|
|
.cross-og:hover .idle {
|
|
opacity: 0;
|
|
}
|
|
.cross-og:hover .active {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<div class="navigation-overlay" id="particles-js" style="position: fixed">
|
|
<div class="cross cross-og" on:click="{click_link}">
|
|
<img src="/svg/cross1.svg" class="idle big" alt=" cross ">
|
|
<img src="/svg/cross2.svg" class="active big" alt=" cross ">
|
|
</div>
|
|
<Logo/>
|
|
|
|
<nav class="menu">
|
|
<ul>
|
|
<li><a class="menu-link" on:click="{click_link}"href="/">Domů</a></li>
|
|
<li><a class="menu-link" on:click="{click_link}"href="/zapojit-se">Chci se zapojit</a></li>
|
|
<li><a class="menu-link" on:click="{click_link}"href="/oborovky">Chci vědět víc o oborovkách</a></li>
|
|
<li><a class="menu-link" on:click="{click_link}"href="/zalozit-spolek">Chci založit spolek</a></li>
|
|
<li><a class="menu-link" on:click="{click_link}"href="/prebiram">Přebírám spolek</a></li>
|
|
<li><a class="menu-link" on:click="{click_link}"href="/predseda">Předseda spolku</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|