format support-us components

YoungVision-eV · Oct 30, 2023 · 879a9be · 879a9be
1 parent f87f215
commit 879a9be
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/src/lib/support-us/BecomeSupportingMember.svelte b/src/lib/support-us/BecomeSupportingMember.svelte
@@ -3,9 +3,9 @@
 	import ReadMoreExpandButton from '$lib/components/ReadMoreExpandButton.svelte';
 </script>
 
-<section class="px-4 md:px-20 py-8 md:py-12 bg-light-green">
-	<h1 class="text-2xl md:text-4xl font-serif font-bold">Werde Fördermitglied</h1>
-	<h2 class="mt-3 md:mt-2 text-xl md:text-2xl font-serif">
+<section class="bg-light-green px-4 py-8 md:px-20 md:py-12">
+	<h1 class="font-serif text-2xl font-bold md:text-4xl">Werde Fördermitglied</h1>
+	<h2 class="mt-3 font-serif text-xl md:mt-2 md:text-2xl">
 		Die chance uns zu unterstutzen und mehr von uns zu erfahren!
 	</h2>
 	<p class="mt-8 md:mt-10 md:text-xl">

diff --git a/src/lib/support-us/DonationMethods.svelte b/src/lib/support-us/DonationMethods.svelte
@@ -21,14 +21,14 @@
 	];
 </script>
 
-<section class="py-16 px-4 md:px-20 md:py-24">
-	<h1 class="text-2xl font-bold font-serif">Andere Spenden Möglichkeiten</h1>
-	<p class="text-xl mt-3 md:mt-4">Wir freuen uns über alle Spenden! Danke!</p>
-	<ul class="mt-20 hidden md:flex gap-x-16 items-stretch">
+<section class="px-4 py-16 md:px-20 md:py-24">
+	<h1 class="font-serif text-2xl font-bold">Andere Spenden Möglichkeiten</h1>
+	<p class="mt-3 text-xl md:mt-4">Wir freuen uns über alle Spenden! Danke!</p>
+	<ul class="mt-20 hidden items-stretch gap-x-16 md:flex">
 		{#each possibilities as possibility}
-			<li class="flex flex-col justify-between items-center text-center">
-				<div class="rounded-full w-56 h-56 bg-gray-300" />
-				<h3 class="mt-4 text-4xl font-serif font-bold">{possibility.title}</h3>
+			<li class="flex flex-col items-center justify-between text-center">
+				<div class="h-56 w-56 rounded-full bg-gray-300" />
+				<h3 class="mt-4 font-serif text-4xl font-bold">{possibility.title}</h3>
 				<p class="mt-4">{possibility.description}</p>
 				<Button class="mt-8" text="Email Now" color="black" />
 			</li>
@@ -37,10 +37,10 @@
 	<ul class="mt-16 md:hidden">
 		{#each possibilities as possibility}
 			<li
-				class="first:mt-0 mt-24 md:mt-0 md:first:mt-0 group md:flex flex-col justify-between items-center md:text-center"
+				class="group mt-24 flex-col items-center justify-between first:mt-0 md:mt-0 md:flex md:text-center md:first:mt-0"
 			>
-				<div class="flex group-even:flex-row-reverse gap-x-4 items-center">
-					<div class="flex-none w-40 h-40 bg-gray-300 rounded-full" />
+				<div class="flex items-center gap-x-4 group-even:flex-row-reverse">
+					<div class="h-40 w-40 flex-none rounded-full bg-gray-300" />
 					<div>
 						<h3 class="text-xl">{possibility.title}</h3>
 						<p class="mt-3">{possibility.description}</p>
@@ -50,10 +50,10 @@
 			</li>
 		{/each}
 	</ul>
-	<div class="hidden md:flex mt-36 py-10 px-24 bg-yellow rounded-2xl w-full gap-x-28">
-		<div class="w-56 h-56 bg-gray-300" />
+	<div class="mt-36 hidden w-full gap-x-28 rounded-2xl bg-yellow px-24 py-10 md:flex">
+		<div class="h-56 w-56 bg-gray-300" />
 		<div>
-			<h3 class="font-serif font-bold text-4xl">Ansprechpartner</h3>
+			<h3 class="font-serif text-4xl font-bold">Ansprechpartner</h3>
 			<dl class="mt-8 grid grid-cols-2">
 				<dt class="font-bold">Name</dt>
 				<dd>Jakob Voigt</dd>

diff --git a/src/lib/support-us/Hero.svelte b/src/lib/support-us/Hero.svelte
@@ -1,5 +1,5 @@
-<section class="w-full h-[34rem] bg-cover bg-center pt-10 md:pt-16">
-	<h1 class="text-center md:text-white text-3xl md:text-5xl font-bold font-serif">
+<section class="h-[34rem] w-full bg-cover bg-center pt-10 md:pt-16">
+	<h1 class="text-center font-serif text-3xl font-bold md:text-5xl md:text-white">
 		Unterstütze Uns
 	</h1>
 </section>

diff --git a/src/lib/support-us/OurPartners.svelte b/src/lib/support-us/OurPartners.svelte
@@ -5,14 +5,14 @@
 	const honours = new Array(12).fill({ name: 'Nachname, Vorname', place: 'Ort' });
 </script>
 
-<div class="hidden md:block bg-light-green px-20 py-14">
+<div class="hidden bg-light-green px-20 py-14 md:block">
 	<section>
-		<h1 class="text-4xl font-serif font-bold">Unsere Partner</h1>
-		<ul class="flex justify-between mt-14">
+		<h1 class="font-serif text-4xl font-bold">Unsere Partner</h1>
+		<ul class="mt-14 flex justify-between">
 			{#each partners as partner}
 				<li>
 					<img
-						class="rounded-full w-40 h-40"
+						class="h-40 w-40 rounded-full"
 						src={'https://placehold.co/400/D9D9D9/434343?text=Partner ' + partner}
 						alt="Partner"
 					/>
@@ -21,12 +21,12 @@
 		</ul>
 	</section>
 	<section>
-		<h1 class="mt-32 font-serif font-bold text-4xl">YoungVision Dankes-Tafel</h1>
+		<h1 class="mt-32 font-serif text-4xl font-bold">YoungVision Dankes-Tafel</h1>
 		<p class="mt-5">
 			Hier möchten wir speziell Menschen danken die Fördermitglieder sind oder eine größere Summe
 			gespendet haben.
 		</p>
-		<ul id="honours" class="mt-20 grid text-xl w-full gap-y-14 justify-between">
+		<ul id="honours" class="mt-20 grid w-full justify-between gap-y-14 text-xl">
 			{#each honours as honour}
 				<li>
 					<h3 class="font-bold">{honour.name}</h3>