Skip to content

Commit 33b287f

Browse files
andnordaandnorda
committed
simplify styling
1 parent a15dee5 commit 33b287f

10 files changed

+128
-181
lines changed

‎src/lib/Glance.svelte

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<slot name="icon" />
88
</div>
99
<div>
10-
<h2>{heading}</h2>
10+
<h2 class="heading">{heading}</h2>
1111
<slot name="text" />
1212
</div>
1313
</div>
@@ -36,8 +36,9 @@
3636
color-mix(in srgb, var(--color) 50%, white)
3737
);
3838
}
39-
h2 {
39+
.heading {
4040
line-height: 1.3;
41+
margin-top: 0;
4142
margin-bottom: 0.4rem;
4243
}
4344
</style>

‎src/lib/Glances.svelte

+10-8
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,34 @@
1313
<div class="glances">
1414
<Glance heading="Utrulling" --color="#FF9100">
1515
<RocketIcon slot="icon" />
16-
<p slot="text">Nais tar ideene dine raskt fra kode til produksjon, uten nedetid.</p>
16+
<div slot="text">Nais tar ideene dine raskt fra kode til produksjon, uten nedetid.</div>
1717
</Glance>
1818
<Glance heading="Automatisering" --color="#634689">
1919
<CogRotationIcon slot="icon" />
20-
<p slot="text">Du sier hva du trenger, så setter Nais opp infrastrukturen automatisk.</p>
20+
<div slot="text">Du sier hva du trenger, så setter Nais opp infrastrukturen automatisk.</div>
2121
</Glance>
2222
<Glance heading="Full oversikt" --color="#3380A5">
2323
<BulletListIcon slot="icon" />
24-
<p slot="text">
24+
<div slot="text">
2525
Ha kontroll på det du har kjørende, hva det koster og hvor godt du utnytter det.
26-
</p>
26+
</div>
2727
</Glance>
2828
<Glance heading="Innsikt" --color="#939E00">
2929
<VitalsIcon slot="icon" />
30-
<p slot="text">Verktøyene du trenger for å få innsikt i hvordan systemene dine oppfører seg.</p>
30+
<div slot="text">
31+
Verktøyene du trenger for å få innsikt i hvordan systemene dine oppfører seg.
32+
</div>
3133
</Glance>
3234
<Glance heading="Sikkerhet" --color="#06893A">
3335
<SealCheckmarkIcon slot="icon" />
34-
<p slot="text">
36+
<div slot="text">
3537
Nais kommer med solide standardinnstillinger ut av boksen, og gir deg det du trenger for å
3638
sikre systemene dine.
37-
</p>
39+
</div>
3840
</Glance>
3941
<Glance heading="Et Nais fellesskap" --color="#DE2E2E">
4042
<HandShakeHeartIcon slot="icon" />
41-
<p slot="text">Vi er mange som bruker og utvikler Nais, og vi hjelper hverandre.</p>
43+
<div slot="text">Vi er mange som bruker og utvikler Nais, og vi hjelper hverandre.</div>
4244
</Glance>
4345
</div>
4446

‎src/lib/Header.svelte

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</script>
88

99
<header class="header">
10-
<h1>
10+
<h1 class="heading">
1111
<a class="home" href="/">
1212
<Nais />
1313
<span class="name">Nais</span>
@@ -89,7 +89,9 @@
8989
transform: translate(0, -60%);
9090
background: linear-gradient(to right, #3381a535, #6ee5c125);
9191
}
92-
92+
.heading {
93+
margin: 0;
94+
}
9395
.home {
9496
text-decoration: none;
9597
color: var(--color-primary);
@@ -128,6 +130,7 @@
128130
gap: 4px;
129131
}
130132
.main-menu-list {
133+
margin: 0;
131134
list-style: none;
132135
padding: 0;
133136
display: flex;

‎src/lib/Hero.svelte

+6-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44

55
<div class="hero">
66
<div class="content">
7-
<h2>
7+
<h2 class="heading">
88
En plattform laget av <Navlogo />
99
for å gi fart og flyt til utviklerne av det offentlige Norge
1010
</h2>
11-
<p>
11+
<div>
1212
Vi mener at det skal være lett å gjøre rett. Utviklere bør kunne fokusere på det som betyr noe
1313
- å lage gode applikasjoner.
14-
</p>
14+
</div>
1515
<a class="cta" href="https://docs.nais.io">Lær mer om Nais</a>
1616
</div>
1717
<img class="cloud" src="multicloud.png" alt="" />
@@ -34,6 +34,9 @@
3434
gap: 1rem;
3535
max-width: 55ch;
3636
}
37+
.heading {
38+
margin: 0;
39+
}
3740
.cloud {
3841
width: 50%;
3942
}

‎src/routes/blog/+page.server.ts

+14-20
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
1-
interface Post {
2-
route: string;
3-
metadata: {
4-
title: string;
5-
date: string;
6-
description: string;
7-
tags: string[];
8-
author: string;
9-
};
10-
}
111
export async function load() {
12-
const postFiles = import.meta.glob<boolean, string, Post>("./posts/*/+page.md");
13-
let posts = await Promise.all(
14-
Object.entries(postFiles).map(async ([path, post]) => {
15-
const { metadata } = await post();
16-
const route = "/blog/" + path.split("/").slice(1, 3).join("/");
17-
return { metadata, route } as Post;
18-
}),
19-
);
20-
posts = posts.sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime());
21-
return { posts };
2+
const markdownFiles = import.meta.glob<{
3+
metadata: {
4+
date: string;
5+
title: string;
6+
author: string;
7+
description: string;
8+
};
9+
}>("./posts/*/+page.md", { eager: true });
10+
11+
return {
12+
posts: Object.entries(markdownFiles)
13+
.map(([path, { metadata }]) => ({ metadata, slug: path.split("/").slice(2, 3).join("/") }))
14+
.sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime()),
15+
};
2216
}

‎src/routes/blog/+page.svelte

+13-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,15 @@
99
<ul class="list">
1010
{#each data.posts as post}
1111
<li class="item">
12-
<a class="link" href={post.route}>
13-
<h2 class="heading">{post.metadata.title}</h2>
14-
</a>
15-
<p class="byline">{format(post.metadata.date, "MMMM d, yyyy")} by {post.metadata.author}</p>
16-
<p class="description">{post.metadata.description}</p>
12+
<h2 class="heading">
13+
<a class="link" href={`/blog/posts/${post.slug}`}>
14+
{post.metadata.title}
15+
</a>
16+
</h2>
17+
<div class="byline">
18+
{format(post.metadata.date, "MMMM d, yyyy")} by {post.metadata.author}
19+
</div>
20+
<div class="description">{post.metadata.description}</div>
1721
</li>
1822
{/each}
1923
</ul>
@@ -35,6 +39,7 @@
3539
font-size: 1rem;
3640
}
3741
.list {
42+
margin: 0;
3843
font-size: 1.125rem;
3944
list-style: none;
4045
max-width: 67ch;
@@ -44,6 +49,9 @@
4449
gap: 2rem;
4550
padding: 0;
4651
}
52+
.heading {
53+
margin: 0;
54+
}
4755
.link {
4856
display: inline-block;
4957
color: var(--color-primary);

‎src/routes/blog/posts/layout.svelte

+2-43
Original file line numberDiff line numberDiff line change
@@ -36,57 +36,16 @@
3636
width: 100%;
3737
font-size: 1.125rem;
3838
}
39-
.article :global(h1) {
40-
margin-block: 0.67em;
41-
}
42-
.article :global(:is(h2, h3, h4, h5)) {
43-
margin-top: 1.5em;
44-
margin-bottom: 18px;
45-
}
46-
.article :global(p) {
47-
margin-block: 1em;
48-
}
49-
.article :global(ul),
50-
.article :global(ol) {
51-
margin-block: 1em;
52-
}
53-
.article :global(:is(ul, ol) :is(ol, ul)) {
54-
margin-block: 0;
55-
}
5639
.article :global(pre) {
5740
overflow-x: auto;
58-
padding: 0.5rem;
41+
padding: 1rem;
5942
}
6043
.article :global(blockquote) {
6144
border-left: 0.5rem solid var(--color-primary);
6245
display: flex;
6346
padding-inline: min(4vw, 2rem);
6447
background-color: color-mix(in srgb, var(--color-primary) 10%, white);
65-
}
66-
.article :global(table) {
67-
overflow-x: auto;
68-
width: 100%;
69-
max-width: 100%;
70-
border-collapse: collapse;
71-
}
72-
.article :global(thead) {
73-
display: table-header-group;
74-
vertical-align: middle;
75-
}
76-
.article :global(tr) {
77-
display: table-row;
78-
vertical-align: inherit;
79-
}
80-
.article :global(th) {
81-
vertical-align: bottom;
82-
border-bottom: 2px solid #dee2e6;
83-
text-align: inherit;
84-
}
85-
.article :global(th),
86-
.article :global(td) {
87-
vertical-align: top;
88-
padding: 0.75rem;
89-
border-top: 1px solid #dee2e6;
48+
margin: 0;
9049
}
9150
.byline {
9251
font-style: italic;

‎src/routes/blog/posts/table.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@
55
width: 100%;
66
overflow-x: auto;
77
}
8+
table {
9+
border-collapse: collapse;
10+
}
11+
table :global(th) {
12+
border-bottom: 2px solid #dee2e6;
13+
text-align: inherit;
14+
}
15+
table :global(th),
16+
table :global(td) {
17+
padding: 0.75rem;
18+
border-top: 1px solid #dee2e6;
19+
}
820
</style>

‎src/routes/log/+page.svelte

-52
Original file line numberDiff line numberDiff line change
@@ -37,56 +37,4 @@
3737
font-style: italic;
3838
font-size: 1rem;
3939
}
40-
.post :global(h1) {
41-
margin-block: 0.67em;
42-
}
43-
.post :global(:is(h2, h3, h4, h5)) {
44-
margin-top: 1.5em;
45-
margin-bottom: 18px;
46-
}
47-
.post :global(p) {
48-
margin-block: 1em;
49-
}
50-
.post :global(ul),
51-
.post :global(ol) {
52-
margin-block: 1em;
53-
}
54-
.post :global(:is(ul, ol) :is(ol, ul)) {
55-
margin-block: 0;
56-
}
57-
.post :global(pre) {
58-
overflow-x: auto;
59-
padding: 0.5rem;
60-
}
61-
.post :global(blockquote) {
62-
border-left: 0.5rem solid var(--color-primary);
63-
display: flex;
64-
padding-inline: min(4vw, 2rem);
65-
background-color: color-mix(in srgb, var(--color-primary) 10%, white);
66-
}
67-
.post :global(table) {
68-
overflow-x: auto;
69-
width: 100%;
70-
max-width: 100%;
71-
border-collapse: collapse;
72-
}
73-
.post :global(thead) {
74-
display: table-header-group;
75-
vertical-align: middle;
76-
}
77-
.post :global(tr) {
78-
display: table-row;
79-
vertical-align: inherit;
80-
}
81-
.post :global(th) {
82-
vertical-align: bottom;
83-
border-bottom: 2px solid #dee2e6;
84-
text-align: inherit;
85-
}
86-
.post :global(th),
87-
.post :global(td) {
88-
vertical-align: top;
89-
padding: 0.75rem;
90-
border-top: 1px solid #dee2e6;
91-
}
9240
</style>

0 commit comments

Comments
 (0)