feat: simplify site & improve design, add initial character images

src/app.css

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

src/lib/actor.svelte

@@ -3,6 +3,7 @@
   export let role: string;
 </script>
 
-<div>
-  <span>{role}</span> - <span>{actor}</span>
-</div>
+<tr>
+  <td class="font-vinque">{role}</td>
+  <td>{actor}</td>
+</tr>

src/lib/hero.svelte

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

src/lib/layout/NavLink.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  export let href: string;
-  export let text: string;
-</script>
-
-<li class="block">
-  <a
-    class="text-amber-500 hover:text-dark-burgundy-100 focus:text-dark-burgundy-100 text-xl focus:outline-none transition"
-    {href}
-  >
-    {text}
-  </a>
-</li>

src/lib/section-heading.svelte

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

src/routes/+layout.svelte

@@ -1,34 +1,28 @@
 <script>
   import "../app.css";
-  import NavLink from "$lib/layout/NavLink.svelte";
 </script>
 
 <header class="flex justify-center">
-  <img
+  <a href="/">
+    <img
     height="300"
     width="300"
     alt="Logo, Illustration von einem Pfeil über einem Herz"
     src="logo.png"
-  />
+    />
+  </a>
 </header>
 
-<nav class="flex items-center justify-center">
-  <ul
-    class="p-4 w-2/3 sm:w-1/3 rounded-t-2xl bg-cocoa-brown-200 divide-y divide-cocoa-brown-700 text-center"
-  >
-    <NavLink href="/#intro" text="Einführung" />
-    <NavLink href="/#heroes" text="Unsere Helden" />
-    <NavLink href="/#listen" text="Hörprobe" />
-    <NavLink href="/credits" text="Besetzung" />
-  </ul>
-</nav>
+<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>
 
-<main class="sm:mx-16 xl:mx-72 p-4 rounded-t-2xl bg-cocoa-brown-200 font-sans">
-  <slot />
-</main>
+    <main class="p-4 font-sans">
+      <slot />
+    </main>
 
-<footer
-  class="sm:mx-16 xl:mx-72 p-4 rounded-b-2xl bg-cocoa-brown-400 text-center"
->
-  <a href="imprint" class="text-cocoa-brown-800">Impressum & Datenschutz</a>
-</footer>
+    <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>

src/routes/+page.svelte

@@ -1,26 +1,60 @@
 <script lang="ts">
-  import Hero from "$lib/about/hero.svelte";
+  import Hero from "$lib/hero.svelte";
+  import Actor from "$lib/actor.svelte";
+  import SectionHeading from "$lib/section-heading.svelte"
 </script>
 
-<p id="intro" />
+<p />
 
-<p id="heroes">
+<SectionHeading>Unsere Helden</SectionHeading>
+
+<p>
   <Hero
     name="Beyron Ladisla"
     description="Seit 22 Jahren Unteroffizier der Königsgarde und keine Ambitionen aufzusteigen. Beyron fühlt sich eher zum Alkohol hingezogen als zu seinem Beruf."
-    image=""
+    image="/beyron.png"
   />
   <Hero
     name="Tam"
     description="Nur wenigen ist Tamriel, genannt Tam, überhaupt bekannt. Fängt sie jedoch an zu sprechen offenbart sich ein kluger Kopf. Als beste Freundin und stete Begleiterin von Beyron ist sie oftmals das gute Gewissen dieser Zweierbeziehung."
-    image=""
+    image="/tam.png"
     mirrored
   />
   <Hero
     name="Blue"
     description="Ein langweiliges Leben führen wie ihre reichen Eltern? Nichts für Blue. Die weite Welt ist ein viel besserer Ort um erwachsen zu werden als ein staubiger Klassenraum."
-    image=""
+    image="/blue.png"
   />
 </p>
 
-<p id="listen" />
+
+<p>
+  <SectionHeading>Hörprobe</SectionHeading>
+</p>
+
+
+<SectionHeading>Besetzung</SectionHeading>
+
+<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>
+</div>
+
+<div class="flex items-center justify-center">
+
+  <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>
+</div>
+
+<SectionHeading>Besetzung</SectionHeading>

src/routes/credits/+page.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import Actor from "$lib/credits/actor.svelte";
-</script>
-
-<h2 style="text-lg">Besetzung</h2>
-
-<Actor role="Beyron Ladisla" actor="Nico Gerloff" />
-<Actor role="Blue" actor="Lina Schmidt" />
-<Actor role="Tam" actor="Vanessa Martens" />
-<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" />

static/beyron.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47e656a5651c6a7c966c4a312bf44160896175959441e5b0edec654ea769426f
+size 1329544

static/blue.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:44a3a96db70fa34543cebf4a2a29df06003750c96dd46ef42bf5d8b482a0276e
+size 1426922

static/tam.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f9b070f0b0f07d7bd72fbab23bbf764987adc8033cc0d002e674a52fb21b8bd
+size 844117

tailwind.config.cjs

@@ -10,32 +10,6 @@ module.exports = {
       gray: colors.slate,
       amber: colors.amber,
       blue: colors.fuchsia,
-      "dark-burgundy": {
-        DEFAULT: "#6D071A",
-        50: "#F1244A",
-        100: "#F0133C",
-        200: "#D20D32",
-        300: "#B00B2A",
-        400: "#8F0922",
-        500: "#6D071A",
-        600: "#5A0615",
-        700: "#470511",
-        800: "#33030C",
-        900: "#200208",
-      },
-      "forest-green": {
-        DEFAULT: "#1C731C",
-        50: "#259825",
-        100: "#249424",
-        200: "#228B22",
-        300: "#208320",
-        400: "#1E7B1E",
-        500: "#1C731C",
-        600: "#175E17",
-        700: "#124A12",
-        800: "#0D350D",
-        900: "#082108",
-      },
       "cocoa-brown": {
         DEFAULT: "#261C1C",
         50: "#857362",
@@ -49,6 +23,32 @@ module.exports = {
         800: "#140F0F",
         900: "#030202",
       },
+      'red': {
+        DEFAULT: '#BC2B1F',
+        50: '#F0A9A3',
+        100: '#ED9891',
+        200: '#E7786E',
+        300: '#E1574B',
+        400: '#DC3628',
+        500: '#BC2B1F',
+        600: '#8C2017',
+        700: '#5C150F',
+        800: '#2C0A07',
+        900: '#000000'
+      },
+      'yellow': {
+        DEFAULT: '#DDB679',
+        50: '#FAF4EB',
+        100: '#F6EBDB',
+        200: '#EED9BA',
+        300: '#E5C89A',
+        400: '#DDB679',
+        500: '#D29E4C',
+        600: '#B7822F',
+        700: '#8B6223',
+        800: '#5E4318',
+        900: '#31230C'
+      },
     },
     extend: {
       fontFamily: { vinque: "Vinque, serif" },