Skip to content

Commit

Permalink
clamp paddings and gaps
Browse files Browse the repository at this point in the history
  • Loading branch information
@andnorda
andnorda committed Nov 13, 2024
1 parent 9528e35 commit 0fd8e90
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 40 deletions.
11 changes: 6 additions & 5 deletions src/lib/Brukere.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>
import Navlogo from './icons/Navlogo.svelte';
import SsblogoFull from './icons/SsblogoFull.svelte';
import Navlogo from "./icons/Navlogo.svelte";
import SsblogoFull from "./icons/SsblogoFull.svelte";
</script>

<div class="section">
Expand All @@ -10,15 +10,16 @@
<SsblogoFull />
</div>
<div>
<a class="mail" href="mailto:[email protected]">Snakk med oss</a> om Nais kan passe hos dere
<a class="mail" href="mailto:[email protected]">Snakk med oss</a>
om Nais kan passe hos dere
</div>
</div>

<style>
.section {
font-size: 1.5rem;
padding-block: 4rem;
padding-inline: 4vw;
padding-inline: min(4vw, 3.6rem);
max-width: var(--content-max-width);
text-align: center;
display: grid;
Expand All @@ -29,7 +30,7 @@
}
.section::after {
position: absolute;
content: '';
content: "";
height: 300px;
width: 500px;
left: 40%;
Expand Down
10 changes: 5 additions & 5 deletions src/lib/Glances.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<script>
import Glance from '$lib/Glance.svelte';
import Glance from "$lib/Glance.svelte";
import {
BulletListIcon,
CogRotationIcon,
HandShakeHeartIcon,
RocketIcon,
SealCheckmarkIcon,
VitalsIcon
} from '@nais/ds-svelte-community/icons';
VitalsIcon,
} from "@nais/ds-svelte-community/icons";
</script>

<div class="glances">
Expand Down Expand Up @@ -45,7 +45,7 @@
<style>
.glances {
font-size: 1.15rem;
padding: 8vw 4vw;
padding: min(8vw, 7.2rem) min(4vw, 3.6rem);
max-width: var(--content-max-width);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
Expand All @@ -57,7 +57,7 @@
}
.glances::after {
position: absolute;
content: '';
content: "";
height: 300px;
width: 500px;
left: 0;
Expand Down
52 changes: 25 additions & 27 deletions src/lib/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { page } from '$app/stores';
import { get } from 'svelte/store';
import Nais from './icons/Nais.svelte';
import { page } from "$app/stores";
import { get } from "svelte/store";
import Nais from "./icons/Nais.svelte";
const isActive = (/** @type {string} */ path) => get(page).url.pathname.startsWith(`/${path}`);
let isOpen = $state(false);
Expand All @@ -22,14 +22,14 @@
fill="none"
viewBox="0 0 24 24"
focusable="false"
role="img"
><path
role="img">
<path
fill="currentColor"
fill-rule="evenodd"
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"
clip-rule="evenodd"
></path></svg
>
clip-rule="evenodd">
</path>
</svg>
</button>
<nav class="main-menu" class:isOpen>
<ul class="main-menu-list">
Expand All @@ -41,44 +41,42 @@
</li> -->
<li><a class="main-menu-item" href="mailto:[email protected]">Kontakt oss</a></li>
</ul>
<a class="mobile-github-link" href="https://github.com/nais" aria-label="nais github"
><svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg"
><path
<a class="mobile-github-link" href="https://github.com/nais" aria-label="nais github">
<svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"
/></svg
></a
>
fill="currentColor" />
</svg>
</a>
</nav>
<a class="desktop-github-link" href="https://github.com/nais" aria-label="nais github"
><svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg"
><path
<a class="desktop-github-link" href="https://github.com/nais" aria-label="nais github">
<svg width="1em" height="1em" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"
/></svg
></a
>
fill="currentColor" />
</svg>
</a>
</header>

<style>
.header {
display: grid;
grid-template-areas:
'home button'
'menu menu';
"home button"
"menu menu";
align-items: center;
padding-inline: 4vw;
padding-inline: min(4vw, 3.6rem);
position: relative;
overflow-x: clip;
}
.header::before,
.header::after {
position: absolute;
content: '';
content: "";
height: 300px;
width: 500px;
left: 50%;
Expand Down Expand Up @@ -157,7 +155,7 @@
}
@media (min-width: 768px) {
.header {
grid-template-areas: 'home menu github';
grid-template-areas: "home menu github";
grid-template-columns: auto 1fr auto;
justify-items: center;
max-width: var(--content-max-width);
Expand Down
6 changes: 3 additions & 3 deletions src/lib/Hero.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import Navlogo from '$lib/icons/Navlogo.svelte';
import Navlogo from "$lib/icons/Navlogo.svelte";
</script>

<div class="hero">
Expand All @@ -19,13 +19,13 @@

<style>
.hero {
padding: 8vw 4vw;
padding: min(8vw, 7.2rem) min(4vw, 3.6rem);
max-width: var(--content-max-width);
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8vw;
gap: min(8vw, 7.2rem);
}
.content {
font-size: 1.5rem;
Expand Down

0 comments on commit 0fd8e90

Please sign in to comment.