feat: nicer design, font, logo

Font is "Vinque" from 1001freefonts
Logo is generated by Midjourney

src/app.css

@@ -1,4 +1,16 @@
 /* Write your global styles here, in PostCSS syntax */
 @tailwind base;
+
+@layer base {
+  html {
+    @apply font-vinque bg-cocoa-brown-700 p-4;
+  }
+}
+
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "Vinque";
+  src: url("vinque.ttf");
+}

src/lib/about/hero.svelte

@@ -11,7 +11,7 @@
   <img src={image} alt={`Grafik vom Charakter ${name}`} class="p-4" />
 
   <div>
-    <h3 class="text-xl pb-4">{name}</h3>
+    <h3 class="text-4xl pb-4 font-vinque">{name}</h3>
 
     <p>
       {description}

src/lib/credits/actor.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <div>
-  {role} - {actor}
+  <span>{role}</span> - <span>{actor}</span>
 </div>

src/lib/layout/NavLink.svelte

@@ -3,10 +3,9 @@
   export let text: string;
 </script>
 
-<li class="block w-1/2 bg-amber-800">
+<li class="block">
   <a
-    class="text-gray-300 hover:text-amber-200 focus:text-amber-200 focus:outline-none transition"
-    alt=""
+    class="text-amber-500 hover:text-dark-burgundy-100 focus:text-dark-burgundy-100 text-xl focus:outline-none transition"
     {href}
   >
     {text}

src/routes/+layout.svelte

@@ -3,12 +3,19 @@
   import NavLink from "$lib/layout/NavLink.svelte";
 </script>
 
-<header class="flex justify-center pt-4">
-  <img height="150" width="300" />
+<header class="flex justify-center">
+  <img
+    height="300"
+    width="300"
+    alt="Logo, Illustration von einem Pfeil über einem Herz"
+    src="logo.png"
+  />
 </header>
 
-<nav>
-  <ul class="m-4 text-center justify-center">
+<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" />
@@ -16,10 +23,12 @@
   </ul>
 </nav>
 
-<main class="bg-amber-200 py-16">
+<main class="sm:mx-16 xl:mx-72 p-4 rounded-t-2xl bg-cocoa-brown-200 font-sans">
   <slot />
 </main>
 
-<footer>
-  <a href="imprint">Impressum & Datenschutz</a>
+<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>

src/routes/+page.svelte

@@ -2,21 +2,7 @@
   import Hero from "$lib/about/hero.svelte";
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>
-  Visit <a class="text-blue-600 underline" href="https://kit.svelte.dev"
-    >kit.svelte.dev</a
-  > to read the documentation
-</p>
-
-<p id="intro">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in gravida
-  sem. Fusce tincidunt massa quis mauris posuere dictum. Aenean malesuada odio
-  at congue luctus. Quisque rutrum, est at maximus pretium, justo mi fringilla
-  augue, vel dictum leo elit id arcu. Nullam lacus turpis, sagittis quis egestas
-  a, tincidunt in lectus. Cras porta libero mauris, et condimentum magna
-  venenatis id. Integer eu egestas lacus.
-</p>
+<p id="intro" />
 
 <p id="heroes">
   <Hero
@@ -37,12 +23,4 @@
   />
 </p>
 
-<p id="listen">
-  Cras luctus commodo pharetra. Integer sollicitudin lectus non nibh congue
-  egestas. Quisque lobortis, magna vitae consectetur mollis, purus dui
-  sollicitudin ligula, vel condimentum nunc justo at tellus. Quisque ut ligula
-  laoreet, pellentesque ligula nec, venenatis lacus. Quisque magna nulla, mattis
-  ac libero in, suscipit consectetur ex. Donec eget sem sollicitudin, varius
-  massa in, sodales neque. Vivamus fermentum tempus nunc, nec ultrices ante
-  faucibus nec. Vivamus vel sollicitudin velit.
-</p>
+<p id="listen" />