Skip to content

Commit 0fd8e90

Browse files
andnordaandnorda
committed
clamp paddings and gaps
1 parent 9528e35 commit 0fd8e90

File tree

4 files changed

+39
-40
lines changed

4 files changed

+39
-40
lines changed

‎src/lib/Brukere.svelte

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
2-
import Navlogo from './icons/Navlogo.svelte';
3-
import SsblogoFull from './icons/SsblogoFull.svelte';
2+
import Navlogo from "./icons/Navlogo.svelte";
3+
import SsblogoFull from "./icons/SsblogoFull.svelte";
44
</script>
55

66
<div class="section">
@@ -10,15 +10,16 @@
1010
<SsblogoFull />
1111
</div>
1212
<div>
13-
<a class="mail" href="mailto:[email protected]">Snakk med oss</a> om Nais kan passe hos dere
13+
<a class="mail" href="mailto:[email protected]">Snakk med oss</a>
14+
om Nais kan passe hos dere
1415
</div>
1516
</div>
1617

1718
<style>
1819
.section {
1920
font-size: 1.5rem;
2021
padding-block: 4rem;
21-
padding-inline: 4vw;
22+
padding-inline: min(4vw, 3.6rem);
2223
max-width: var(--content-max-width);
2324
text-align: center;
2425
display: grid;
@@ -29,7 +30,7 @@
2930
}
3031
.section::after {
3132
position: absolute;
32-
content: '';
33+
content: "";
3334
height: 300px;
3435
width: 500px;
3536
left: 40%;

‎src/lib/Glances.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script>
2-
import Glance from '$lib/Glance.svelte';
2+
import Glance from "$lib/Glance.svelte";
33
import {
44
BulletListIcon,
55
CogRotationIcon,
66
HandShakeHeartIcon,
77
RocketIcon,
88
SealCheckmarkIcon,
9-
VitalsIcon
10-
} from '@nais/ds-svelte-community/icons';
9+
VitalsIcon,
10+
} from "@nais/ds-svelte-community/icons";
1111
</script>
1212

1313
<div class="glances">
@@ -45,7 +45,7 @@
4545
<style>
4646
.glances {
4747
font-size: 1.15rem;
48-
padding: 8vw 4vw;
48+
padding: min(8vw, 7.2rem) min(4vw, 3.6rem);
4949
max-width: var(--content-max-width);
5050
display: grid;
5151
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -57,7 +57,7 @@
5757
}
5858
.glances::after {
5959
position: absolute;
60-
content: '';
60+
content: "";
6161
height: 300px;
6262
width: 500px;
6363
left: 0;

‎src/lib/Header.svelte

+25-27
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
2-
import { page } from '$app/stores';
3-
import { get } from 'svelte/store';
4-
import Nais from './icons/Nais.svelte';
2+
import { page } from "$app/stores";
3+
import { get } from "svelte/store";
4+
import Nais from "./icons/Nais.svelte";
55
66
const isActive = (/** @type {string} */ path) => get(page).url.pathname.startsWith(`/${path}`);
77
let isOpen = $state(false);
@@ -22,14 +22,14 @@
2222
fill="none"
2323
viewBox="0 0 24 24"
2424
focusable="false"
25-
role="img"
26-
><path
25+
role="img">
26+
<path
2727
fill="currentColor"
2828
fill-rule="evenodd"
2929
d="M2.75 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17A.75.75 0 0 1 2.75 6m0 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17a.75.75 0 0 1-.75-.75m.75 5.25a.75.75 0 0 0 0 1.5h17a.75.75 0 0 0 0-1.5z"
30-
clip-rule="evenodd"
31-
></path></svg
32-
>
30+
clip-rule="evenodd">
31+
</path>
32+
</svg>
3333
</button>
3434
<nav class="main-menu" class:isOpen>
3535
<ul class="main-menu-list">
@@ -41,44 +41,42 @@
4141
</li> -->
4242
<li><a class="main-menu-item" href="mailto:[email protected]">Kontakt oss</a></li>
4343
</ul>
44-
<a class="mobile-github-link" href="https://github.com/nais" aria-label="nais github"
45-
><svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg"
46-
><path
44+
<a class="mobile-github-link" href="https://github.com/nais" aria-label="nais github">
45+
<svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
46+
<path
4747
fill-rule="evenodd"
4848
clip-rule="evenodd"
4949
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
50-
fill="currentColor"
51-
/></svg
52-
></a
53-
>
50+
fill="currentColor" />
51+
</svg>
52+
</a>
5453
</nav>
55-
<a class="desktop-github-link" href="https://github.com/nais" aria-label="nais github"
56-
><svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg"
57-
><path
54+
<a class="desktop-github-link" href="https://github.com/nais" aria-label="nais github">
55+
<svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
56+
<path
5857
fill-rule="evenodd"
5958
clip-rule="evenodd"
6059
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
61-
fill="currentColor"
62-
/></svg
63-
></a
64-
>
60+
fill="currentColor" />
61+
</svg>
62+
</a>
6563
</header>
6664

6765
<style>
6866
.header {
6967
display: grid;
7068
grid-template-areas:
71-
'home button'
72-
'menu menu';
69+
"home button"
70+
"menu menu";
7371
align-items: center;
74-
padding-inline: 4vw;
72+
padding-inline: min(4vw, 3.6rem);
7573
position: relative;
7674
overflow-x: clip;
7775
}
7876
.header::before,
7977
.header::after {
8078
position: absolute;
81-
content: '';
79+
content: "";
8280
height: 300px;
8381
width: 500px;
8482
left: 50%;
@@ -157,7 +155,7 @@
157155
}
158156
@media (min-width: 768px) {
159157
.header {
160-
grid-template-areas: 'home menu github';
158+
grid-template-areas: "home menu github";
161159
grid-template-columns: auto 1fr auto;
162160
justify-items: center;
163161
max-width: var(--content-max-width);

‎src/lib/Hero.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import Navlogo from '$lib/icons/Navlogo.svelte';
2+
import Navlogo from "$lib/icons/Navlogo.svelte";
33
</script>
44

55
<div class="hero">
@@ -19,13 +19,13 @@
1919

2020
<style>
2121
.hero {
22-
padding: 8vw 4vw;
22+
padding: min(8vw, 7.2rem) min(4vw, 3.6rem);
2323
max-width: var(--content-max-width);
2424
margin: auto;
2525
display: flex;
2626
flex-direction: column;
2727
align-items: center;
28-
gap: 8vw;
28+
gap: min(8vw, 7.2rem);
2929
}
3030
.content {
3131
font-size: 1.5rem;

0 commit comments

Comments
 (0)