51 lines
655 B
Svelte
51 lines
655 B
Svelte
<script lang="ts">
|
|
import Toggle from './toggle.svelte'
|
|
import * as config from '$lib/config'
|
|
</script>
|
|
|
|
<nav>
|
|
<a href="/" class="title">
|
|
<b>{config.title}</b>
|
|
</a>
|
|
|
|
<ul class="links">
|
|
<li>
|
|
<a href="/about">About Me</a>
|
|
</li>
|
|
<li>
|
|
<a href="/">Blog</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<Toggle />
|
|
</nav>
|
|
|
|
<style>
|
|
nav {
|
|
padding: 2rem;
|
|
padding-block: var(--size-7);
|
|
}
|
|
|
|
.links {
|
|
margin-block: var(--size-7);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
gap: var(--size-7);
|
|
margin-block: 0;
|
|
}
|
|
}
|
|
</style>
|