mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
1<script>
2 import { page } from '$app/stores';
3 import logo from '$lib/images/svelte-logo.svg';
4 import github from '$lib/images/github.svg';
5</script>
6
7<header>
8 <div class="corner">
9 <a href="https://kit.svelte.dev">
10 <img src={logo} alt="SvelteKit" />
11 </a>
12 </div>
13
14 <nav>
15 <svg viewBox="0 0 2 3" aria-hidden="true">
16 <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
17 </svg>
18 <ul>
19 <li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
20 <a href="/">Home</a>
21 </li>
22 <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
23 <a href="/about">About</a>
24 </li>
25 <li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
26 <a href="/sverdle">Sverdle</a>
27 </li>
28 </ul>
29 <svg viewBox="0 0 2 3" aria-hidden="true">
30 <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
31 </svg>
32 </nav>
33
34 <div class="corner">
35 <a href="https://github.com/sveltejs/kit">
36 <img src={github} alt="GitHub" />
37 </a>
38 </div>
39</header>
40
41<style>
42 header {
43 display: flex;
44 justify-content: space-between;
45 }
46
47 .corner {
48 width: 3em;
49 height: 3em;
50 }
51
52 .corner a {
53 display: flex;
54 align-items: center;
55 justify-content: center;
56 width: 100%;
57 height: 100%;
58 }
59
60 .corner img {
61 width: 2em;
62 height: 2em;
63 object-fit: contain;
64 }
65
66 nav {
67 display: flex;
68 justify-content: center;
69 --background: rgba(255, 255, 255, 0.7);
70 }
71
72 svg {
73 width: 2em;
74 height: 3em;
75 display: block;
76 }
77
78 path {
79 fill: var(--background);
80 }
81
82 ul {
83 position: relative;
84 padding: 0;
85 margin: 0;
86 height: 3em;
87 display: flex;
88 justify-content: center;
89 align-items: center;
90 list-style: none;
91 background: var(--background);
92 background-size: contain;
93 }
94
95 li {
96 position: relative;
97 height: 100%;
98 }
99
100 li[aria-current='page']::before {
101 --size: 6px;
102 content: '';
103 width: 0;
104 height: 0;
105 position: absolute;
106 top: 0;
107 left: calc(50% - var(--size));
108 border: var(--size) solid transparent;
109 border-top: var(--size) solid var(--color-theme-1);
110 }
111
112 nav a {
113 display: flex;
114 height: 100%;
115 align-items: center;
116 padding: 0 0.5rem;
117 color: var(--color-text);
118 font-weight: 700;
119 font-size: 0.8rem;
120 text-transform: uppercase;
121 letter-spacing: 0.1em;
122 text-decoration: none;
123 transition: color 0.2s linear;
124 }
125
126 a:hover {
127 color: var(--color-theme-1);
128 }
129</style>