136 lines
2.6 KiB
Svelte
136 lines
2.6 KiB
Svelte
<script>
|
|
import { page } from '$app/stores';
|
|
import logo from '$lib/images/svelte-logo.svg';
|
|
import github from '$lib/images/github.svg';
|
|
</script>
|
|
|
|
<header>
|
|
<div class="header">
|
|
<div class="corner">
|
|
<a href="https://kit.svelte.dev">
|
|
<img src={logo} alt="SvelteKit" />
|
|
</a>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
|
|
<a href="/">Home</a>
|
|
</li>
|
|
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
|
|
<a href="/about">About</a>
|
|
</li>
|
|
<li aria-current={$page.url.pathname.startsWith('/projects') ? 'page' : undefined}>
|
|
<a href="/projects">Projects</a>
|
|
</li>
|
|
<li aria-current={$page.url.pathname.startsWith('/shs') ? 'page' : undefined}>
|
|
<a href="/shs">SHS</a>
|
|
</li>
|
|
<li aria-current={$page.url.pathname.startsWith('/contact') ? 'page' : undefined}>
|
|
<a href="/contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="corner">
|
|
<a href="https://github.com/sveltejs/kit">
|
|
<img src={github} alt="GitHub" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
border-top: 3px solid var(--color-nav);
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
background-color: white;
|
|
justify-content: space-between;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgb(0 0 0/5%);
|
|
}
|
|
|
|
.corner {
|
|
width: 3em;
|
|
height: 3em;
|
|
}
|
|
|
|
.corner a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.corner img {
|
|
width: 2em;
|
|
height: 2em;
|
|
object-fit: contain;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 3em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
list-style: none;
|
|
background: var(--background);
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
li[aria-current='page']::before {
|
|
--size: 6px;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(50% - var(--size));
|
|
border: var(--size) solid transparent;
|
|
border-top: var(--size) solid var(--color-theme-1);
|
|
}
|
|
|
|
nav a {
|
|
display: flex;
|
|
height: 80%;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
color: var(--color-text);
|
|
font-weight: 700;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
text-decoration: none;
|
|
transition: color 0.2s linear;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-nav);
|
|
background-color: var(--color-bg-nav);
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|