|
1 | 1 | <script>
|
2 | 2 | import { page } from "$app/stores";
|
3 | 3 | import Nais from "./icons/Nais.svelte";
|
| 4 | + import NaisJul from "./icons/Nais-jul.svelte"; |
4 | 5 |
|
5 | 6 | const isActive = (/** @type {string} */ path) => $page.url.pathname.startsWith(`/${path}`);
|
6 | 7 | let isOpen = $state(false);
|
|
9 | 10 | <header class="header">
|
10 | 11 | <h1 class="heading">
|
11 | 12 | <a class="home" href="/">
|
12 |
| - <Nais /> |
| 13 | + <Nais class="nais" /> |
| 14 | + <NaisJul class="nais-jul" /> |
13 | 15 | <span class="name">Nais</span>
|
14 | 16 | </a>
|
15 | 17 | </h1>
|
|
90 | 92 | }
|
91 | 93 | .header::before {
|
92 | 94 | transform: translate(-75%, -60%);
|
93 |
| - background: linear-gradient(to right, #ff91004f, #f768914b, #6200ff40); |
| 95 | + background: linear-gradient( |
| 96 | + to right, |
| 97 | + color-mix(in srgb, var(--color-spectrum-1) 31%, transparent), |
| 98 | + color-mix(in srgb, var(--color-spectrum-2) 29.4%, transparent), |
| 99 | + color-mix(in srgb, var(--color-spectrum-3) 25%, transparent) |
| 100 | + ); |
94 | 101 | }
|
95 | 102 | .header::after {
|
96 | 103 | transform: translate(0, -60%);
|
97 |
| - background: linear-gradient(to right, #3381a535, #6ee5c125); |
| 104 | + background: linear-gradient( |
| 105 | + to right, |
| 106 | + color-mix(in srgb, var(--color-spectrum-4) 20.8%, transparent), |
| 107 | + color-mix(in srgb, var(--color-spectrum-5) 14.5%, transparent) |
| 108 | + ); |
98 | 109 | }
|
99 | 110 | .heading {
|
100 | 111 | margin: 0;
|
|
0 commit comments