feat: simplify design & add further attributions

src/app.css

@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply font-vinque bg-cocoa-brown-700 text-yellow-900 p-4;
+    @apply bg-cocoa-brown-700 text-yellow-400 text-center;
   }
 }
 

src/lib/about/hero.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let name: string;
+  export let description: string;
+  export let image: string;
+  export let mirrored: boolean = false;
+</script>
+
+<div
+  class={`flex flex-col md:flex-row ${mirrored && "md:flex-row-reverse"} m-8`}
+>
+  <img src={image} alt={`Grafik vom Charakter ${name}`} class="p-4" />
+
+  <div>
+    <h3 class="text-4xl pb-4 font-vinque">{name}</h3>
+
+    <p>
+      {description}
+    </p>
+  </div>
+</div>

src/lib/actor.svelte

@@ -3,7 +3,7 @@
   export let role: string;
 </script>
 
-<tr>
+<tr class="text-lg leading-10">
   <td class="font-vinque">{role}</td>
   <td>{actor}</td>
 </tr>

src/lib/h2.svelte

@@ -0,0 +1 @@
+<h2 class="text-4xl font-vinque my-4"><slot /></h2>

src/lib/h3.svelte

@@ -0,0 +1 @@
+<h3 class="text-2xl font-vinque my-4"><slot /></h3>

src/lib/hero.svelte

@@ -6,11 +6,17 @@
 </script>
 
 <div
-  class={`flex flex-col md:flex-row ${mirrored && "md:flex-row-reverse"} m-8 items-center`}
+  class={`flex flex-col md:flex-row ${
+    mirrored && "md:flex-row-reverse"
+  } m-8 my-12 items-center`}
 >
-  <img src={image} alt={`Grafik vom Charakter ${name}`} class="w-48 rounded-full" />
+  <img
+    src={image}
+    alt={`Grafik vom Charakter ${name}`}
+    class="w-48 rounded-full"
+  />
 
-  <div class="p-4 text-center md:text-left {!mirrored && "md:text-right"}">
+  <div class="p-4 md:text-left {!mirrored && 'md:text-right'}">
     <h3 class="text-4xl mb-4 font-vinque">{name}</h3>
 
     <p>

src/lib/major-actor.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let actor: string;
+  export let role: string;
+</script>
+
+<div class="text-xl my-3 md:my-0">
+  <div class="font-vinque">{role}</div>
+  <div>{actor}</div>
+</div>

src/lib/section-heading.svelte

@@ -1 +0,0 @@
-<h2 class="text-4xl font-vinque mb-4 text-center"><slot /></h2>

src/routes/+layout.svelte

@@ -14,15 +14,20 @@
 </header>
 
 <div class="flex items-center justify-center">
-  <div class="w-5/6 md:w-2/3 2xl:w-1/2 bg-yellow-300 rounded-2xl">
-    <p class="font-vinque text-yellow-00 text-6xl text-center mt-12">Ein <span class="text-[4rem] relative bottom-2">P</span>feil am rechten <span class="text-red-500"><span class="text-[4rem] relative bottom-2">F</span>leck</span></p>
+  <div class="max-w-screen-md">
+    <p class="font-vinque text-6xl mt-12">
+      Ein <span class="text-[4rem] relative bottom-2">P</span>feil am rechten
+      <span class="text-red-500"
+        ><span class="text-[4rem] relative bottom-2">F</span>leck</span
+      >
+    </p>
 
     <main class="p-4 font-sans">
       <slot />
     </main>
+  </div>
+</div>
 
-    <footer class=" p-4 bg-yellow-700 rounded-b-2xl text-center">
-      <a href="imprint" class="text-cocoa-brown-800">Impressum & Datenschutz</a>
+<footer class="p-4">
+  <a href="imprint" class="">Impressum & Datenschutz</a>
 </footer>
-  </div>
-</div>

src/routes/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import Hero from "$lib/hero.svelte";
   import Actor from "$lib/actor.svelte";
-  import SectionHeading from "$lib/section-heading.svelte"
+  import H2 from "$lib/h2.svelte";
+  import H3 from "$lib/h3.svelte";
+  import MajorActor from "$lib/major-actor.svelte";
 </script>
 
 <p />
 
-<SectionHeading>Unsere Helden</SectionHeading>
+<H2>Unsere Helden</H2>
 
 <p>
   <Hero
@@ -27,23 +29,20 @@
   />
 </p>
 
-
 <p>
-  <SectionHeading>Hörprobe</SectionHeading>
+  <H2>Hörprobe</H2>
 </p>
 
-
-<SectionHeading>Besetzung</SectionHeading>
+<H2>Credits</H2>
+<H3>Besetzung</H3>
 
 <div class="flex items-center justify-evenly flex-col md:flex-row">
-  <div class="text-center text-xl"><div class="font-vinque">Beyron Ladisla</div><div>Nico Gerloff</div></div>
-  <div class="text-center text-xl"><div class="font-vinque">Blue</div><div>Lina Schmidt</div></div>
-  <div class="text-center text-xl"><div class="font-vinque">Tam</div><div>Vanessa Martens</div></div>
+  <MajorActor role="Beyron Ladisla" actor="Nico Gerloff" />
+  <MajorActor role="Blue" actor="Lina Schmidt" />
+  <MajorActor role="Tam" actor="Vanessa Martens" />
 </div>
 
-<div class="flex items-center justify-center">
-
-  <table class="mt-8 text-center table-fixed xl:w-2/3 divide-cocoa-brown-400">
+<table class="table-fixed w-full max-w-8xl my-8">
   <Actor role="Erzähler" actor="xxx" />
   <Actor role="Madam Jolie" actor="Josephine Steckenmesser" />
   <Actor role="Bantam" actor="Timon Fuchs" />
@@ -55,6 +54,16 @@
   <Actor role="Bruder Jotus" actor="Marius Freese" />
   <Actor role="Schreiberling" actor="Marius Freese" />
 </table>
+
+<H3>& weitere Credits</H3>
+
+<div class="flex items-center justify-evenly flex-col md:flex-row">
+  <MajorActor role="Drehbuch" actor="Nico Gerloff" />
+  <MajorActor role="Produzent" actor="Julian Tölle" />
 </div>
 
-<SectionHeading>Besetzung</SectionHeading>
+<table class="table-fixed w-full max-w-8xl my-8">
+  <Actor role="Recherche Soundeffekte" actor="Jay Mendes" />
+  <Actor role="Schnitt" actor="Julian Tölle" />
+  <Actor role="Website" actor="Julian Tölle" />
+</table>