fix heading hierarchy

Author: andnorda

src/lib/Header.svelte

@@ -7,12 +7,10 @@
 </script>
 
 <header class="header">
-	<h1 class="heading">
-		<a class="home" href="/">
-			<Nais />
-			<span class="name">Nais</span>
-		</a>
-	</h1>
+	<a class="home" href="/">
+		<Nais />
+		<span class="name">Nais</span>
+	</a>
 	<button class="main-menu-toggle" class:isOpen onclick={() => (isOpen = !isOpen)}>
 		<svg
 			class="open-icon"
@@ -105,9 +103,6 @@
 			color-mix(in srgb, var(--color-spectrum-5) 14.5%, transparent)
 		);
 	}
-	.heading {
-		margin: 0;
-	}
 	.home {
 		text-decoration: none;
 		transition: color 50ms;
@@ -116,10 +111,12 @@
 		grid-template-columns: auto 1fr;
 		gap: 4px;
 		align-items: baseline;
+		font-size: 2rem;
 	}
 	.name {
 		font-size: 2.3rem;
 		color: var(--color-black);
+		font-weight: bold;
 	}
 	.main-menu-toggle {
 		grid-area: button;

src/lib/Hero.svelte

@@ -3,9 +3,9 @@
 
 <div class="hero">
 	<div class="content">
-		<h2 class="heading">
+		<h1 class="heading">
 			En plattform laget av Nav for å gi fart og flyt til utviklerne av det offentlige Norge
-		</h2>
+		</h1>
 		<p class="text">
 			Vi mener at det skal være lett å gjøre rett. Utviklere bør kunne fokusere på det som betyr noe
 			- å lage gode applikasjoner.
@@ -35,6 +35,7 @@
 		max-width: 55ch;
 	}
 	.heading {
+		font-size: 1.5em;
 		margin: 0;
 	}
 	.cloud {

src/routes/(pages)/blog/+page.svelte

@@ -6,32 +6,32 @@
 	let { data }: { data: PageData } = $props();
 </script>
 
-<ul class="list">
+<div class="articles">
 	{#each data.posts as post}
-		<li class="item" lang={post.metadata.language}>
-			<h2 class="heading">
+		<article lang={post.metadata.language}>
+			<h1 class="heading">
 				<a class="link" href={`/blog/posts/${post.slug}`}>
 					{post.metadata.title}
 				</a>
-			</h2>
+			</h1>
 			<div class="byline">
 				{post.metadata.language === "en"
 					? `${format(post.metadata.date, "MMMM d, yyyy")} by ${post.metadata.author}`
 					: `${format(post.metadata.date, "d. MMMM yyyy", { locale: nb })} av ${post.metadata.author}`}
 			</div>
 			<div class="description">{post.metadata.description}</div>
-		</li>
+		</article>
 	{/each}
-</ul>
+</div>
 
 <style>
 	.byline {
 		font-style: italic;
 		font-size: 1rem;
 	}
-	.list {
+	.articles {
 		margin: 0;
-		margin-top: 1.34em;
+		margin-top: 3em;
 		list-style: none;
 		margin-inline: auto;
 		display: flex;
@@ -49,7 +49,7 @@
 	.link:hover {
 		text-decoration: none;
 	}
-	.item {
+	article {
 		display: flex;
 		flex-direction: column;
 		align-items: start;

src/routes/(pages)/log/+page.svelte

@@ -12,8 +12,8 @@
 	{#if i > 0}
 		<hr />
 	{/if}
-	<div lang={metadata.language}>
-		<h2 class="heading" id={slug}><a class="anchorLink" href="#{slug}">{metadata.title}</a></h2>
+	<article lang={metadata.language}>
+		<h1 class="heading" id={slug}><a class="anchorLink" href="#{slug}">{metadata.title}</a></h1>
 		<div class="byline">
 			{metadata.language === "en"
 				? `${format(metadata.date, "MMMM d, yyyy")} by ${metadata.author}`
@@ -22,7 +22,7 @@
 		<div class="post">
 			<Post />
 		</div>
-	</div>
+	</article>
 {/each}
 
 <style>