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"
+    class="text-amber-500 hover:text-dark-burgundy-100 focus:text-dark-burgundy-100 text-xl focus:outline-none transition"
-    alt=""
     {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">
+<header class="flex justify-center">
-  <img height="150" width="300" />
+  <img
+    height="300"
+    width="300"
+    alt="Logo, Illustration von einem Pfeil über einem Herz"
+    src="logo.png"
+  />
 </header>
 
-<nav>
+<nav class="flex items-center justify-center">
-  <ul class="m-4 text-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>
+<footer
-  <a href="imprint">Impressum & Datenschutz</a>
+  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 id="intro" />
-<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="heroes">
   <Hero
@@ -37,12 +23,4 @@
   />
 </p>
 
-<p id="listen">
+<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>

static/logo.png

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

tailwind.config.cjs

@@ -1,4 +1,5 @@
 const colors = require("tailwindcss/colors");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{html,js,svelte,ts}"],
@@ -6,11 +7,52 @@ module.exports = {
     colors: {
       transparent: "transparent",
       current: "currentColor",
-      gray: colors.blueGray,
+      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",
+        100: "#7E6B5D",
+        200: "#6F5D52",
+        300: "#614F47",
+        400: "#52413C",
+        500: "#433432",
+        600: "#352827",
+        700: "#261C1C",
+        800: "#140F0F",
+        900: "#030202",
+      },
+    },
+    extend: {
+      fontFamily: { vinque: "Vinque, serif" },
     },
-    extend: {},
   },
   variants: {
     extend: {},