107 lines
2.5 KiB
Plaintext
107 lines
2.5 KiB
Plaintext
---
|
|
import FontAwesome from "@components/form/FontAwesome.svelte"
|
|
import ThemeSwitcher from "@components/form/ThemeSwitcher.svelte"
|
|
|
|
---
|
|
|
|
<div class="nav">
|
|
<a href="/" class="homepage">
|
|
<FontAwesome iconName="logo" />
|
|
<h1>Awesome Privacy</h1>
|
|
</a>
|
|
<nav>
|
|
<a href="/browse">Browse</a>
|
|
<a href="/search">Search</a>
|
|
<a href="/about">About</a>
|
|
<a href="https://github.com/lissy93/awesome-privacy">GitHub</a>
|
|
<div class="theme-switcher">
|
|
<ThemeSwitcher client:load />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.nav {
|
|
background: var(--accent-fg);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
border-bottom: 2px solid var(--accent-3);
|
|
|
|
.homepage {
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 2.4rem;
|
|
padding: 0 1rem;
|
|
color: var(--foreground);
|
|
font-family: "Lekton", sans-serif;
|
|
}
|
|
:global(svg) {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
color: var(--accent-3);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
&:hover {
|
|
:global(svg) {
|
|
color: var(--accent);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 3rem;
|
|
a {
|
|
padding: 1rem;
|
|
font-size: 1.2rem;
|
|
font-family: "Lekton", sans-serif;
|
|
font-weight: bold;
|
|
color: var(--foreground);
|
|
transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
|
|
transition-timing-function: ease-in-out;
|
|
&:hover {
|
|
background: var(--accent-3);
|
|
color: var(--accent-fg);
|
|
border-bottom: 2px solid var(--accent-3);
|
|
&:nth-child(4n+1) {
|
|
background-color: var(--accent);
|
|
}
|
|
&:nth-child(4n+2) {
|
|
background-color: var(--accent-2);
|
|
color: var(--foreground);
|
|
}
|
|
&:nth-child(4n+3) {
|
|
background-color: var(--accent-3);
|
|
}
|
|
&:nth-child(4n+4) {
|
|
background-color: var(--accent-4);
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
}
|
|
.theme-switcher {
|
|
transform: scale(0.7);
|
|
margin: 0.2rem auto;
|
|
@media(max-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.homepage, nav {
|
|
@media(max-width: 768px) {
|
|
margin: 0 auto;
|
|
a { border: none; }
|
|
}
|
|
}
|
|
}
|
|
</style>
|