From b1e0910490bf949e19e1390c49b386ad8030e96d Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 20 Aug 2024 09:29:12 +0200
Subject: [PATCH] add cardstyles

---
 .gitignore                                |  3 +++
 src/lib/components/AbstractContent.svelte |  2 +-
 src/lib/components/Frontpage.svelte       | 14 ++++++++------
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 79518f71..50ca3f09 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# packaging
+packaging-lock.json
\ No newline at end of file
diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index 918e3414..18d41353 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -45,7 +45,7 @@
 	const navULclass =
 		'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-lg md:font-medium';
 
-	const contentContainerClass = 'content-container mx-auto max-w-6xl p-4';
+	const contentContainerClass = 'mx-auto max-w-6xl p-4';
 </script>
 
 <!-- Top element-->
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
index f565ed43..d0670228 100644
--- a/src/lib/components/Frontpage.svelte
+++ b/src/lib/components/Frontpage.svelte
@@ -7,11 +7,13 @@
 	const paragraphStyle = 'mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight';
 	const arrowStyle = 'ms-2 h-6 w-6 text-white';
 	const buttonStyle = 'w-fit';
+	const galleryStyle = 'grid-cols-2 gap-y-12';
+	const cardStyle = 'p-6 m-4 w-full';
 </script>
 
 <!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
-<Gallery class="grid-cols-2 gap-4 p-4">
-	<Card>
+<Gallery class={galleryStyle}>
+	<Card class={cardStyle}>
 		<h5 class={headerStyle}>Was ist Mondey?</h5>
 		<p class={paragraphStyle}>
 			<i>Mondey</i> ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von
@@ -20,7 +22,7 @@
 		<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
 	</Card>
 
-	<Card>
+	<Card class={cardStyle}>
 		<h5 class={headerStyle}>Wozu ist Mondey gut?</h5>
 		<p class={paragraphStyle}>
 			Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum
@@ -30,7 +32,7 @@
 		<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
 	</Card>
 
-	<Card>
+	<Card class={cardStyle}>
 		<h5 class={headerStyle}>Was umfasst Mondey?</h5>
 		<p class={paragraphStyle}>
 			<i>Mondey</i> umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis
@@ -40,7 +42,7 @@
 		<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
 	</Card>
 
-	<Card>
+	<Card class={cardStyle}>
 		<h5 class={headerStyle}>Wie funktioniert Mondey?</h5>
 		<p class={paragraphStyle}>
 			Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer
@@ -49,7 +51,7 @@
 		<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
 	</Card>
 
-	<Card>
+	<Card class={cardStyle}>
 		<h5 class={headerStyle}>Wo fange ich an?</h5>
 		<p class={paragraphStyle}>
 			Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.