Files
pages/src/lib/viewport/header.svelte

59 lines
1.2 KiB
Svelte

{#snippet headerLinks()}
<a href="/">Home</a>
<a href="/projects">Projects</a>
<a href="/projects/projectn5">Project N5</a>
<a href="/blog">Blog</a>
<!-- <a href="/garden">Garden</a> -->
<a href="/meta/about">About</a>
{/snippet}
<div class="header-content">
<div class="header-links">
{@render headerLinks()}
</div>
</div>
<style>
.header-links {
box-sizing: border-box;
width: 100%;
max-width: var(--page-width);
/* min-height: 72px; */
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
align-items: center;
padding: 0 var(--margin-content-side);
margin: 0 auto;
}
a {
font-family: var(--font-);
font-size: 1rem;
font-weight: bold;
text-decoration: none;
}
a:link {
color: var(--color-text);
}
/* visited link */
a:visited {
color: var(--color-text);
}
/* mouse over link */
a:hover {
color: var(--color-highlight);
}
@media screen and (max-width: 500px) {
.header-links {
justify-content: center;
}
a {
font-size: 0.8rem;
}
}
</style>