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

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>