testing

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