From 572433b197ceea13174670c95f7c25147841bcde Mon Sep 17 00:00:00 2001
From: Annevd <144004647+Annevd@users.noreply.github.com>
Date: Thu, 16 Jan 2025 12:42:17 +0100
Subject: [PATCH 1/4] #301 Made section padding more consisten

Using custom properties. Also made sure to use min-height instead of height, so that text wont be cut off on different screen sizes.
---
 src/lib/molecules/home-campus.svelte   | 20 +++++++-------------
 src/lib/molecules/home-partners.svelte |  8 ++++----
 src/lib/organisms/Footer.svelte        |  6 +++---
 src/lib/organisms/agenda.svelte        |  5 +++--
 src/lib/organisms/footer.svelte        |  6 +++---
 static/style.css                       |  3 +++
 6 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/lib/molecules/home-campus.svelte b/src/lib/molecules/home-campus.svelte
index 12c53903..b0cf7c24 100644
--- a/src/lib/molecules/home-campus.svelte
+++ b/src/lib/molecules/home-campus.svelte
@@ -15,8 +15,8 @@
 
 <style>
 	section {
-		padding: 0 3em 3em;
-		height: 70vh;
+		padding: 0 1em var(--section-padding-y);
+		min-height: 70vh;
 		display: flex;
 		justify-content: center;
 		flex-direction: column;
@@ -33,27 +33,21 @@
 		line-height: 1;
 		padding-bottom: 0.7em;
 	}
+	
 	h2 span:nth-of-type(2) {
 		color: var(--main-color-orange);
 	}
+
 	p {
 		padding: 0.3em;
 		max-width: 32em;
-		margin-bottom: 14em;
 		font-family: var(--paragraph-font);
-		/* color: var(--text-color-black); */
 	}
 
 	p:nth-of-type(1) {
 		margin-bottom: 1em;
 	}
 
-	/* @media (min-width: 10em) {
-        p{
-            margin-bottom: 14em;
-        }
-	} */
-
 	/* MEDIA QUERY TABLET = 430px */
 	@media (min-width: 26.8rem) {
 		h2 {
@@ -71,7 +65,7 @@
 	/* MEDIA QUERY TABLET = 768px */
 	@media (min-width: 48rem) {
 		section {
-			padding: 0 7.5em 3em;
+			padding: 0 var(--section-padding-x) var(--section-padding-y);
 		}
 		h2 {
 			font-size: 4.5rem;
@@ -85,7 +79,7 @@
 	/* MEDIA QUERY TABLET = 1100px */
 	@media (min-width: 68.75rem) {
 		section {
-			padding: 0 9em 3em;
+			padding: 0 9em var(--section-padding-y);
 		}
 
         p{
@@ -106,7 +100,7 @@
 	/* MEDIA QUERY DESKTOP = 1500px */
 	@media (min-width: 93.75rem) {
 		section {
-			padding: 0 15em 3em;
+			padding: 0 15em var(--section-padding-y);
 		}
 	}
 </style>
diff --git a/src/lib/molecules/home-partners.svelte b/src/lib/molecules/home-partners.svelte
index a5933303..0d04bb85 100644
--- a/src/lib/molecules/home-partners.svelte
+++ b/src/lib/molecules/home-partners.svelte
@@ -17,12 +17,12 @@
 
 <style>
     section{
-        padding: 3em;
+        padding: var(--section-padding-y) 1em;
         display: flex;
-        height: 70vh;
         justify-content: center;
         flex-direction: column;
         align-items: start;
+        min-height: 70vh;
         background-color: var(--card-color-green);
         color: var(--main-color-beige);
         overflow: hidden;
@@ -65,7 +65,7 @@
 	/* MEDIA QUERY TABLET = 768px */
 	@media (min-width: 48rem) {
 		section{
-			padding:  4rem 7.5rem;
+			padding:  var(--section-padding-y) var(--section-padding-x);
 		}
 		h2{
             font-size: 4.5rem;
@@ -75,7 +75,7 @@
 	/* MEDIA QUERY DESKTOP = 1500px */
 	@media (min-width: 93.75rem) {
         section{
-            padding: 4rem 15em;
+            padding: var(--section-padding-y) 15em;
         }
     }
 
diff --git a/src/lib/organisms/Footer.svelte b/src/lib/organisms/Footer.svelte
index d8f3ef99..683e523b 100644
--- a/src/lib/organisms/Footer.svelte
+++ b/src/lib/organisms/Footer.svelte
@@ -37,10 +37,10 @@
 	footer {
 		position: relative;
 		width: 100%;
-		height: 70vh;
+		min-height: 70vh;
 		background-color: var(--main-color-beige);
 		overflow: hidden;
-		padding: 1em;
+		padding: var(--section-padding-y) 0;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -116,7 +116,7 @@
 	@media (max-width: 43.75em) {
 		footer {
 			height: max-content;
-			padding: 4em 1em;
+			padding: var(--section-padding-y) 1em;
 		}
 		.information {
 			flex-direction: column;
diff --git a/src/lib/organisms/agenda.svelte b/src/lib/organisms/agenda.svelte
index 75423e07..7c973692 100644
--- a/src/lib/organisms/agenda.svelte
+++ b/src/lib/organisms/agenda.svelte
@@ -16,8 +16,9 @@
 		background: var(--main-color-beige);
 		z-index: 2;
 		max-width: 100%;
+		min-height: 70vh;
 		overflow: hidden;
-		padding: 4rem 0 4rem 1rem;
+		padding: var(--section-padding-y) 0 var(--section-padding-y) 1rem;
 	}
 
 	img {
@@ -40,7 +41,7 @@
 	/* MEDIA QUERY TABLET = 768px */
 	@media (min-width: 48rem) {
 		section {
-			padding: 4rem 0 4rem 7.5rem;
+			padding: var(--section-padding-y) 0 var(--section-padding-y) var(--section-padding-x);
 		}
 
 		h2 {
diff --git a/src/lib/organisms/footer.svelte b/src/lib/organisms/footer.svelte
index d8f3ef99..683e523b 100644
--- a/src/lib/organisms/footer.svelte
+++ b/src/lib/organisms/footer.svelte
@@ -37,10 +37,10 @@
 	footer {
 		position: relative;
 		width: 100%;
-		height: 70vh;
+		min-height: 70vh;
 		background-color: var(--main-color-beige);
 		overflow: hidden;
-		padding: 1em;
+		padding: var(--section-padding-y) 0;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -116,7 +116,7 @@
 	@media (max-width: 43.75em) {
 		footer {
 			height: max-content;
-			padding: 4em 1em;
+			padding: var(--section-padding-y) 1em;
 		}
 		.information {
 			flex-direction: column;
diff --git a/static/style.css b/static/style.css
index fc4f14a6..5cc1bf9f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -53,6 +53,9 @@ html {
 	--border-bigCard: 2em;
 	--border-card: 1.0625em;
 
+	--section-padding-y: 4rem;
+	--section-padding-x: 7.5rem;
+
 	--image-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
 }
 

From e0623406972e197dd9aa79eb2c79f20ce000f72e Mon Sep 17 00:00:00 2001
From: Annevd <144004647+Annevd@users.noreply.github.com>
Date: Thu, 16 Jan 2025 12:58:33 +0100
Subject: [PATCH 2/4] #301 small refactor

---
 src/lib/molecules/home-campus.svelte   | 10 +++++-----
 src/lib/molecules/home-partners.svelte | 14 +++++++-------
 src/lib/organisms/agenda.svelte        |  7 +++----
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/lib/molecules/home-campus.svelte b/src/lib/molecules/home-campus.svelte
index b0cf7c24..7c7b6d24 100644
--- a/src/lib/molecules/home-campus.svelte
+++ b/src/lib/molecules/home-campus.svelte
@@ -48,21 +48,21 @@
 		margin-bottom: 1em;
 	}
 
-	/* MEDIA QUERY TABLET = 430px */
+	/* MEDIA QUERY MOBILE = 430px */
 	@media (min-width: 26.8rem) {
 		h2 {
 			flex-direction: row;
 		}
 	}
 
-	/* MEDIA QUERY TABLET = 686px */
+	/* MEDIA QUERY TABLET S = 686px */
 	@media (min-width: 42.125rem) {
 		h2 span:nth-of-type(1) {
 			margin-right: 0.2em;
 		}
 	}
 
-	/* MEDIA QUERY TABLET = 768px */
+	/* MEDIA QUERY TABLET M = 768px */
 	@media (min-width: 48rem) {
 		section {
 			padding: 0 var(--section-padding-x) var(--section-padding-y);
@@ -76,7 +76,7 @@
 		}
 	}
 
-	/* MEDIA QUERY TABLET = 1100px */
+	/* MEDIA QUERY LAPTOP = 1100px */
 	@media (min-width: 68.75rem) {
 		section {
 			padding: 0 9em var(--section-padding-y);
@@ -87,7 +87,7 @@
         }
 	}
 
-	/* MEDIA QUERY TABLET = 1250px */
+	/* MEDIA QUERY TABLET L = 1250px */
 	@media (min-width: 78.1rem) {
 		section {
 			height: 70vh;
diff --git a/src/lib/molecules/home-partners.svelte b/src/lib/molecules/home-partners.svelte
index 0d04bb85..9258cdaa 100644
--- a/src/lib/molecules/home-partners.svelte
+++ b/src/lib/molecules/home-partners.svelte
@@ -72,13 +72,6 @@
 		}
 	}
 
-	/* MEDIA QUERY DESKTOP = 1500px */
-	@media (min-width: 93.75rem) {
-        section{
-            padding: var(--section-padding-y) 15em;
-        }
-    }
-
     /* MEDIA QUERY TABLET = 1250px */
     @media (min-width: 78.1rem) {
         p{  
@@ -86,4 +79,11 @@
         }
     }
 
+    /* MEDIA QUERY DESKTOP = 1500px */
+	@media (min-width: 93.75rem) {
+        section{
+            padding: var(--section-padding-y) 15em;
+        }
+    }
+
 </style>
\ No newline at end of file
diff --git a/src/lib/organisms/agenda.svelte b/src/lib/organisms/agenda.svelte
index 7c973692..9bf268fe 100644
--- a/src/lib/organisms/agenda.svelte
+++ b/src/lib/organisms/agenda.svelte
@@ -16,7 +16,6 @@
 		background: var(--main-color-beige);
 		z-index: 2;
 		max-width: 100%;
-		min-height: 70vh;
 		overflow: hidden;
 		padding: var(--section-padding-y) 0 var(--section-padding-y) 1rem;
 	}
@@ -54,8 +53,8 @@
 
 	/* MEDIA QUERY DESKTOP = 1500px */
 	@media (min-width: 93.75rem) {
-		/* section {
-			padding: 4rem 15em;
-		} */
+		section {
+			padding: var(--section-padding-y) 15em;
+		}
 	}
 </style>

From 44226561c2787f53cc0602fe51ded9a381b308eb Mon Sep 17 00:00:00 2001
From: Nazneen <112861261+Nazneen05x@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:53:09 +0100
Subject: [PATCH 3/4] Homepage: Delete code + Added new api

---
 src/lib/molecules/home-campus.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/molecules/home-campus.svelte b/src/lib/molecules/home-campus.svelte
index 7c7b6d24..4f57bb92 100644
--- a/src/lib/molecules/home-campus.svelte
+++ b/src/lib/molecules/home-campus.svelte
@@ -4,7 +4,7 @@
 
 <section>
 	<h2>
-		Buurt<span>campus</span>
+		<span>{data.campusInfos[0].title}</span>
 		<span>{data.campusInfos[0].title2}</span>
 	</h2>
 	<article>

From 0b279df47d82b806e3092711158a5a0ac6255749 Mon Sep 17 00:00:00 2001
From: Annevd <144004647+Annevd@users.noreply.github.com>
Date: Thu, 16 Jan 2025 16:10:50 +0100
Subject: [PATCH 4/4] #301 added clamp to h2's

Same clamp @Lmikkers and @rutgerkock used for the h2's of the slide cards for consistency
---
 src/lib/molecules/home-campus.svelte   | 3 +--
 src/lib/molecules/home-partners.svelte | 5 +----
 src/lib/organisms/agenda.svelte        | 6 +-----
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/lib/molecules/home-campus.svelte b/src/lib/molecules/home-campus.svelte
index 7c7b6d24..0aa1d535 100644
--- a/src/lib/molecules/home-campus.svelte
+++ b/src/lib/molecules/home-campus.svelte
@@ -26,7 +26,7 @@
 
 	h2 {
 		font-family: var(--sub-header-font);
-		font-size: 3.5em;
+		font-size:  clamp(2em, 5vw, 8em);
 		display: flex;
 		flex-direction: column;
 		flex-wrap: wrap;
@@ -68,7 +68,6 @@
 			padding: 0 var(--section-padding-x) var(--section-padding-y);
 		}
 		h2 {
-			font-size: 4.5rem;
 			padding-bottom: 0.7em;
 		}
 		p {
diff --git a/src/lib/molecules/home-partners.svelte b/src/lib/molecules/home-partners.svelte
index 9258cdaa..47ebcda2 100644
--- a/src/lib/molecules/home-partners.svelte
+++ b/src/lib/molecules/home-partners.svelte
@@ -43,7 +43,7 @@
 
     h2{
         font-family: var(--sub-header-font);
-        font-size: 3.5em;
+        font-size:  clamp(2em, 5vw, 8em);
         line-height: 1;
         padding-bottom: .7em;
     }
@@ -67,9 +67,6 @@
 		section{
 			padding:  var(--section-padding-y) var(--section-padding-x);
 		}
-		h2{
-            font-size: 4.5rem;
-		}
 	}
 
     /* MEDIA QUERY TABLET = 1250px */
diff --git a/src/lib/organisms/agenda.svelte b/src/lib/organisms/agenda.svelte
index 9bf268fe..a86b2299 100644
--- a/src/lib/organisms/agenda.svelte
+++ b/src/lib/organisms/agenda.svelte
@@ -29,7 +29,7 @@
 	}
 
 	h2 {
-		font-size: 3.5rem;
+		font-size:  clamp(2em, 5vw, 8em);
 		padding-bottom: 0.7em;
 		font-family: var(--sub-header-font);
 		color: var(--main-color-brown);
@@ -42,10 +42,6 @@
 		section {
 			padding: var(--section-padding-y) 0 var(--section-padding-y) var(--section-padding-x);
 		}
-
-		h2 {
-			font-size: 4.5rem;
-		}
 		img {
 			display: block;
 		}