Over page

src/lib/atoms/icons/logoround.svelte

@@ -112,4 +112,16 @@ l-38 23 -40 -37 c-66 -59 -139 -87 -228 -88 -90 0 -140 13 -203 55 -66 44 -98
             display: none;
 		}
 	}
+
+	@media (min-width: 48rem) and (max-width: 64rem) {
+		svg{
+			display: none;
+		}
+	}
+
+	@media (min-width: 30em) {
+		svg {
+            display: none;
+		}
+	}
 </style>

src/lib/index.js

@@ -23,9 +23,10 @@ export { default as FontIncrease } from '$lib/atoms/icons/font-increase.svelte';
 export { default as Translate } from '$lib/atoms/icons/translate.svelte';
 export { default as Logo } from '$lib/atoms/icons/logo.svelte';
 export { default as Logoround } from '$lib/atoms/icons/logoround.svelte';
-// export { default as OtherRoundDot } from '$lib/atoms/icons/other-round-dot.svelte';
+export { default as Projectenrounddot } from '$lib/atoms/icons/Projecten-round-dot.svelte';
 export { default as ArrowDown } from '$lib/atoms/icons/arrow-down.svelte';
 
+
 // =========== MOLECULES ===========
 
 export { default as HeroSlider } from '$lib/molecules/hero-slider.svelte';

src/routes/+layout.svelte

@@ -1,11 +1,9 @@
 <script>
 	export let data;
-	import { Menu, AccessibilityMenu,  Footer } from '$lib/index.js';
+	import { Menu, Footer } from '$lib/index.js';
 </script>
 
-<Menu/>
-
-<!-- <AccessibilityMenu /> -->
 
+<Menu/>
 <slot />
 <Footer {data} />

src/routes/+page.server.js

@@ -41,15 +41,6 @@ export async function load() {
 				paragraph
 				paragraph2
 			}
-			geveltuins {
-				id
-				title
-				bulletText1
-				createdAt
-				image {
-					url
-				}
-			}
 
 			facadeGardenActions {
 				id
@@ -74,6 +65,7 @@ export async function load() {
 				description
 				description2
 				description3
+				description4
 				id
 				title
 			}

src/routes/geveltuin/+page.server.js

@@ -12,15 +12,6 @@ export async function load() {
 					url
 				}
 			}
-			geveltuins {
-				id
-				title
-				bulletText1
-				createdAt
-				image {
-					url
-				}
-			}
 
 			facadeGardenActions {
 				id

src/routes/over/+page.server.js

@@ -17,6 +17,7 @@ export async function load() {
 				description
 				description2
 				description3
+				description4
 				id
 				title
 			}

src/routes/over/+page.svelte

@@ -1,15 +1,14 @@
 <script>
 	export let data;
-	import OtherRoundDot from '$lib/atoms/icons/ other-round-dot.svelte';
-	import { HeroHeaders, IntroHeaders, Logoround } from '$lib/index.js';
+	import { HeroHeaders, Logoround, Projectenrounddot } from '$lib/index.js';
 </script>
 
 <HeroHeaders heroInfo={data.heroHeaders[6]} />
 
 <main>
 	<section>
 		<div>
-			<OtherRoundDot svgFill="var(--main-color-orange)" />
+			<Projectenrounddot svgFill="var(--main-color-orange)" />
 			<h2>
 				<strong class="first-four">{data.abouts[0].title.slice(0, 4)}</strong>
 				<strong>{data.abouts[0].title.slice(4)}</strong>
@@ -20,10 +19,12 @@
 		<p>{data.abouts[0].description}</p>
 		<p>{data.abouts[0].description2}</p>
 		<p>{data.abouts[0].description3}</p>
+		<p>{data.abouts[0].description4}</p>
 	</section>
 </main>
 
 <style>
+	/* MOBILE */
 	main {
 		width: 100%;
 		margin-bottom: 2rem;
@@ -37,7 +38,7 @@
 	section > div {
 		width: 100%;
 		display: flex;
-		margin-left: -0.5em;
+		margin-left: -0.6em;
 	}
 
 	h2 {
@@ -50,7 +51,7 @@
 
 	.first-four {
 		color: var(--main-color-brown);
-		margin-right: 0.3em;
+		margin-right: 0.1em;
 	}
 
 	p {
@@ -59,7 +60,14 @@
 		font-family: 'Poppins-Regular';
 	}
 
-	@media (min-width: 75em) {
+	p:nth-child(6) {
+		font-style: oblique;
+		font-weight: bolder;
+	}
+
+	/* MEDIA QUERY STYLING */
+	/* DESKTOP */
+	@media (min-width: 64em) {
 		main {
 			top: -1em;
 			width: 80vw;
@@ -72,31 +80,40 @@
 
 		main::after {
 			top: -4rem;
-			width: 27rem;
+			width: 25rem;
 			opacity: 0.5;
-			right: -9rem;
+			right: -8rem;
 			position: absolute;
 			transform: rotate(-45deg);
 			content: url(/assets/leaf-orange.svg);
 		}
 
+		section > div {
+			margin-left: -0.1em;
+		}
+
 		h2,
 		p {
 			width: 47vw;
 			display: flex;
 			margin: 0 auto;
 		}
 
+		h2 {
+			font-size: 3.5em;
+		}
+
+		.first-four {
+			margin-right: 0.3em;
+		}
+
 		p {
 			margin-top: 1.5em;
 		}
 	}
 
-	@media (min-width: 48em) {
-		h2 {
-			font-size: 3.5em;
-		}
-
+	/* TABLET */
+	@media (min-width: 48rem) and (max-width: 64rem) {
 		main {
 			top: -1em;
 			width: 85vw;
@@ -106,14 +123,42 @@
 			border-radius: var(--border-bigCard);
 		}
 
+		main::after {
+			width: 22rem;
+		}
+
 		section > div {
 			margin-left: -0.1em;
 		}
+
+		h2 {
+			font-size: 3em;
+		}
 	}
 
+	/* BIG DESKTOP SCREEN */
 	@media (min-width: 100rem) {
+		main {
+			width: 78vw;
+		}
+
+		main::after {
+			width: 30rem;
+		}
+
 		h2 {
 			font-size: 5em;
 		}
+
+		h2,
+		p {
+			max-width: 40vw;
+		}
+
+		p {
+			font-size: 1.5em;
+			line-height: 1.5em;
+			margin-top: 1.5em;
+		}
 	}
 </style>