codevictory/veikko.lintujarvi.fi
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

First version

Browse source
This commit is contained in:
codevictory 2022-03-17 19:20:18 +02:00
parent 721dd6a072
commit f28182c101
18 changed files with 93 additions and 597 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/lib/header/Header.svelte
View file

@ -1,36 +1,23 @@
<script lang="ts">
import { page } from '$app/stores';
import logo from './svelte-logo.svg';
</script>
<header>
<div class="corner">
<a href="https://kit.svelte.dev">
<img src={logo} alt="SvelteKit" />
</a>
</div>
<div class="corner" />
<nav>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
</svg>
<ul>
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
<li class:active={$page.url.pathname === '/about'}>
<a sveltekit:prefetch href="/about">About</a>
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">About</a></li>
<li class:active={$page.url.pathname === '/projects'}>
<a sveltekit:prefetch href="/projects">Projects</a>
</li>
<li class:active={$page.url.pathname === '/todos'}>
<a sveltekit:prefetch href="/todos">Todos</a>
<li class:active={$page.url.pathname === '/contact'}>
<a sveltekit:prefetch href="/contact">contact</a>
</li>
</ul>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
</svg>
</nav>
<div class="corner">
<!-- TODO put something else here? github link? -->
</div>
<div class="corner"/>
</header>
<style>
@ -44,40 +31,18 @@
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;
--background: rgba(255, 255, 255, 0.7);
}
svg {
width: 2em;
height: 3em;
display: block;
}
path {
fill: var(--background);
--background: rgba(133, 116, 192, 0.63);
}
ul {
position: relative;
border-radius: 0px 0px 20px 20px;
padding: 0;
margin: 0;
padding-left: 0.2em;
height: 3em;
display: flex;
justify-content: center;