feat: add download buttons

src/lib/download-button.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let href: string;
+</script>
+
+<a
+  class="p-4 m-4 border rounded-md border-red hover:border-yellow-400 hover:bg-yellow-800 transition-colors duration-500 ease-in-out"
+  target="_blank"
+  {href}
+>
+  <slot />
+</a>

src/routes/+layout.svelte

@@ -5,6 +5,11 @@
   import LogoImg from "$lib/images/logo.png?w=512";
 </script>
 
+<svelte:head>
+  <title>Ein Pfeil am rechten Fleck</title>
+  <meta name="description" content="TODO" />
+</svelte:head>
+
 <header class="flex justify-center">
   <a href="/">
     <Image
@@ -18,12 +23,12 @@
 
 <div class="flex items-center justify-center">
   <div class="max-w-screen-md">
-    <p class="font-vinque text-6xl mt-8">
+    <h1 class="font-vinque text-6xl mt-8">
       Ein <span class="text-[4rem] relative bottom-2">P</span>feil am rechten
       <span class="text-red"
         ><span class="text-[4rem] relative bottom-2">F</span>leck</span
       >
-    </p>
+    </h1>
 
     <main class="p-4 font-sans">
       <slot />

src/routes/+page.svelte

@@ -4,22 +4,15 @@
   import H2 from "$lib/h2.svelte";
   import H3 from "$lib/h3.svelte";
   import MajorActor from "$lib/major-actor.svelte";
+  import DownloadButton from "$lib/download-button.svelte";
 
   import BeyronImg from "$lib/images/beyron.png?w=336";
   import TamImg from "$lib/images/tam.png?w=336";
   import BlueImg from "$lib/images/blue.png?w=336";
 </script>
 
-<svelte:head>
-  <title>Ein Pfeil am rechten Fleck</title>
-  <meta name="description" content="TODO" />
-</svelte:head>
-
-<p />
-
 <H2>Unsere Helden</H2>
 
-<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."
@@ -36,13 +29,10 @@
   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={BlueImg}
 />
-</p>
 
-<p>
 <H2>Hörprobe</H2>
-</p>
 
-<H2>Credits</H2>
+<H2>Würdigungen</H2>
 <H3>Besetzung</H3>
 
 <div class="flex items-center justify-evenly flex-col md:flex-row">
@@ -64,7 +54,7 @@
   <Actor role="Schreiberling" actor="Marius Freese" />
 </table>
 
-<H3>& weitere Credits</H3>
+<H3>& weitere</H3>
 
 <div class="flex items-center justify-evenly flex-col md:flex-row">
   <MajorActor role="Drehbuch" actor="Nico Gerloff" />
@@ -76,3 +66,17 @@
   <Actor role="Schnitt" actor="Julian Tölle" />
   <Actor role="Website" actor="Julian Tölle" />
 </table>
+
+<H2>Herunterladen</H2>
+
+<p class="my-8 flex items-center flex-col justify-center md:flex-row">
+  <DownloadButton href="/downloads/EinPfeilAmRechtenFleck-mp3.zip">
+    Hörspiel (mp3)
+  </DownloadButton>
+  <DownloadButton href="/downloads/EinPfeilAmRechtenFleck-flac.zip">
+    Hörspiel (FLAC)
+  </DownloadButton>
+  <DownloadButton href="/downloads/EinPfeilAmRechtenFleck-Drehbuch.pdf">
+    Drehbuch (PDF)
+  </DownloadButton>
+</p>

static/downloads/EinPfeilAmRechtenFleck-Drehbuch.pdf

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