tweak landing page layout

Author: andnorda

src/lib/Brukere.svelte

@@ -4,29 +4,28 @@
 </script>
 
 <div class="section">
-	<div>Nais brukes av utviklingsteam hos</div>
+	<div class="text">Nais brukes av utviklingsteam hos</div>
 	<div class="users">
 		<Navlogo />
 		<SsblogoFull />
 	</div>
-	<div>
+	<div class="text">
 		<a class="mail" href="mailto:[email protected]">Snakk med oss</a>
-		 om Nais kan passe hos dere
+		om Nais kan passe hos dere
 	</div>
 </div>
 
 <style>
+	.text {
+		text-wrap: balance;
+	}
 	.section {
 		font-size: 1.5rem;
-		padding-block: 4rem;
-		padding-inline: min(4vw, 3.6rem);
-		max-width: var(--content-max-width);
 		text-align: center;
 		display: grid;
 		gap: 1.5rem;
 		margin: auto;
 		position: relative;
-		overflow-x: clip;
 	}
 	.section::after {
 		position: absolute;

src/lib/Glances.svelte

@@ -47,15 +47,11 @@
 <style>
 	.glances {
 		font-size: 1.15rem;
-		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));
 		gap: 4rem;
 		justify-content: center;
-		margin: auto;
 		position: relative;
-		overflow-x: clip;
 	}
 	.glances::after {
 		position: absolute;

src/lib/Header.svelte

@@ -67,7 +67,6 @@
 		align-items: center;
 		padding-inline: min(4vw, 3.6rem);
 		position: relative;
-		overflow-x: clip;
 	}
 	.header::before,
 	.header::after {

src/lib/Hero.svelte

@@ -8,7 +8,7 @@
 			En plattform laget av <Navlogo />
 			for å gi fart og flyt til utviklerne av det offentlige Norge
 		</h2>
-		<div>
+		<div 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.
 		</div>
@@ -18,21 +18,23 @@
 </div>
 
 <style>
+	.text {
+		text-wrap: balance;
+	}
 	.hero {
-		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: min(8vw, 7.2rem);
+		gap: min(8vw, 6rem);
+		padding-bottom: min(8vw, 6rem);
 	}
 	.content {
 		font-size: 1.5rem;
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
 		max-width: 55ch;
+		min-width: 26ch;
 	}
 	.heading {
 		margin: 0;

src/routes/+page.svelte

@@ -4,6 +4,19 @@
 	import Hero from "$lib/Hero.svelte";
 </script>
 
-<Hero />
-<Glances />
-<Brukere />
+<div class="wrapper">
+	<Hero />
+	<Glances />
+	<Brukere />
+</div>
+
+<style>
+	.wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: min(14vw, 8rem);
+		padding: min(8vw, 6rem) min(4vw, 3.6rem);
+		margin: auto;
+		max-width: var(--content-max-width);
+	}
+</style>

src/styles/app.css

@@ -1,4 +1,4 @@
-@import './reset.css';
+@import "./reset.css";
 
 :root {
 	--color-primary: #f76890;
@@ -7,9 +7,10 @@
 }
 
 body {
-	font-family: 'Poppins', sans-serif;
-	background-color: #fdf9fc; 
+	font-family: "Poppins", sans-serif;
+	background-color: #fdf9fc;
 	color: #222;
+	overflow-x: clip;
 }
 a {
 	color: inherit;