From 5b8a5d06be5b81587a8cf501ea78da9230dd3d3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Mon, 27 Mar 2023 22:16:53 +0200
Subject: [PATCH] feat: simplify design & add further attributions

---
 src/app.css                    |  2 +-
 src/lib/about/hero.svelte      | 20 +++++++++++++
 src/lib/actor.svelte           |  2 +-
 src/lib/h2.svelte              |  1 +
 src/lib/h3.svelte              |  1 +
 src/lib/hero.svelte            | 12 ++++++--
 src/lib/major-actor.svelte     |  9 ++++++
 src/lib/section-heading.svelte |  1 -
 src/routes/+layout.svelte      | 25 +++++++++-------
 src/routes/+page.svelte        | 55 ++++++++++++++++++++--------------
 10 files changed, 89 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/about/hero.svelte
 create mode 100644 src/lib/h2.svelte
 create mode 100644 src/lib/h3.svelte
 create mode 100644 src/lib/major-actor.svelte
 delete mode 100644 src/lib/section-heading.svelte

diff --git a/src/app.css b/src/app.css
index 5413e2f..a64ff19 100644
--- a/src/app.css
+++ b/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;
   }
 }
 
diff --git a/src/lib/about/hero.svelte b/src/lib/about/hero.svelte
new file mode 100644
index 0000000..f0dadf2
--- /dev/null
+++ b/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>
diff --git a/src/lib/actor.svelte b/src/lib/actor.svelte
index 889b50f..281e658 100644
--- a/src/lib/actor.svelte
+++ b/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>
diff --git a/src/lib/h2.svelte b/src/lib/h2.svelte
new file mode 100644
index 0000000..e56acda
--- /dev/null
+++ b/src/lib/h2.svelte
@@ -0,0 +1 @@
+<h2 class="text-4xl font-vinque my-4"><slot /></h2>
diff --git a/src/lib/h3.svelte b/src/lib/h3.svelte
new file mode 100644
index 0000000..c7ec53e
--- /dev/null
+++ b/src/lib/h3.svelte
@@ -0,0 +1 @@
+<h3 class="text-2xl font-vinque my-4"><slot /></h3>
diff --git a/src/lib/hero.svelte b/src/lib/hero.svelte
index 4e2c4e3..a789c83 100644
--- a/src/lib/hero.svelte
+++ b/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>
diff --git a/src/lib/major-actor.svelte b/src/lib/major-actor.svelte
new file mode 100644
index 0000000..6af110f
--- /dev/null
+++ b/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>
diff --git a/src/lib/section-heading.svelte b/src/lib/section-heading.svelte
deleted file mode 100644
index 11dec0e..0000000
--- a/src/lib/section-heading.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h2 class="text-4xl font-vinque mb-4 text-center"><slot /></h2>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e22286..6831465 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,24 +5,29 @@
 <header class="flex justify-center">
   <a href="/">
     <img
-    height="300"
-    width="300"
-    alt="Logo, Illustration von einem Pfeil über einem Herz"
-    src="logo.png"
+      height="300"
+      width="300"
+      alt="Logo, Illustration von einem Pfeil über einem Herz"
+      src="logo.png"
     />
   </a>
 </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>
-
-    <footer class=" p-4 bg-yellow-700 rounded-b-2xl text-center">
-      <a href="imprint" class="text-cocoa-brown-800">Impressum & Datenschutz</a>
-    </footer>
   </div>
 </div>
+
+<footer class="p-4">
+  <a href="imprint" class="">Impressum & Datenschutz</a>
+</footer>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4de16ea..813f63a 100644
--- a/src/routes/+page.svelte
+++ b/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,34 +29,41 @@
   />
 </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="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" />
+  <Actor role="Soldat Gundolf Stock" actor="Marian Falk" />
+  <Actor role="Offizier Delgado" actor="Julian Tölle" />
+  <Actor role="Die Rechte Hand des Königs" actor="Julian Tölle" />
+  <Actor role="Der König" actor="Timon Fuchs" />
+  <Actor role="Vorsitzender der Handelsgilde" actor="Nico Gerloff" />
+  <Actor role="Bruder Jotus" actor="Marius Freese" />
+  <Actor role="Schreiberling" actor="Marius Freese" />
+</table>
 
-  <table class="mt-8 text-center table-fixed xl:w-2/3 divide-cocoa-brown-400">
-    <Actor role="Erzähler" actor="xxx" />
-    <Actor role="Madam Jolie" actor="Josephine Steckenmesser" />
-    <Actor role="Bantam" actor="Timon Fuchs" />
-    <Actor role="Soldat Gundolf Stock" actor="Marian Falk" />
-    <Actor role="Offizier Delgado" actor="Julian Tölle" />
-    <Actor role="Die Rechte Hand des Königs" actor="Julian Tölle" />
-    <Actor role="Der König" actor="Timon Fuchs" />
-    <Actor role="Vorsitzender der Handelsgilde" actor="Nico Gerloff" />
-    <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>
\ No newline at end of file
+<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>