From cc300c68687686a40a44677cca9091d5e1621848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sat, 4 Nov 2023 01:27:13 +0100
Subject: [PATCH] feat: add listen section

---
 src/app.css               |  2 +-
 src/lib/divider.svelte    |  1 +
 src/lib/h2.svelte         |  6 +++++-
 src/routes/+layout.svelte |  4 +++-
 src/routes/+page.svelte   | 16 ++++++++++++++--
 5 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/divider.svelte

diff --git a/src/app.css b/src/app.css
index 056fa0e..0e98b51 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply bg-cocoa-brown text-yellow-300 text-center;
+    @apply bg-cocoa-brown text-yellow-300 text-center scroll-smooth;
   }
 }
 
diff --git a/src/lib/divider.svelte b/src/lib/divider.svelte
new file mode 100644
index 0000000..080d152
--- /dev/null
+++ b/src/lib/divider.svelte
@@ -0,0 +1 @@
+<div class="border-t-[1px] my-8"></div>
diff --git a/src/lib/h2.svelte b/src/lib/h2.svelte
index 18c0be9..682c9f3 100644
--- a/src/lib/h2.svelte
+++ b/src/lib/h2.svelte
@@ -1 +1,5 @@
-<h2 class="text-4xl font-vinque my-8"><slot /></h2>
+<script lang="ts">
+  export let id: string = "";
+</script>
+
+<h2 class="text-4xl font-vinque my-8" {id}><slot /></h2>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 730968f..5bb7bb4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import "../app.css";
   import Image from "$lib/image.svelte";
+  import Divider from "$lib/divider.svelte";
 
   import LogoImg from "$lib/images/logo.png?w=512";
 </script>
@@ -34,7 +35,8 @@
     <main class="p-4 font-sans">
       <slot />
     </main>
-    <footer class="font-vinque text-lg border-t-[1px] p-8">
+    <Divider />
+    <footer class="font-vinque text-lg p-8">
       <a href="/impressum" class="underline">Impressum & Datenschutz</a><br />
       <a
         href="https://github.com/apricote/ein-pfeil-am-rechten-fleck.de"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c5a3a78..d3ac49e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,6 +11,7 @@
   import TamImg from "$lib/images/tam.png?w=336";
   import BlueImg from "$lib/images/blue.png?w=336";
   import Image from "$lib/image.svelte";
+  import Divider from "$lib/divider.svelte";
 </script>
 
 <Image
@@ -30,6 +31,8 @@
   Erzählung voller Intrigen und überraschenden Wendungen.
 </p>
 
+<Divider />
+
 <H2>Unsere Helden</H2>
 
 <Hero
@@ -49,7 +52,14 @@
   image={BlueImg}
 />
 
-<H2>Hörprobe</H2>
+<Divider />
+
+<H2>Jetzt anhören</H2>
+
+<a class="underline" href="#download">Auf YouTube</a><br />
+<a class="underline" href="#download">Zum Herunterladen</a>
+
+<Divider />
 
 <H2>Würdigungen</H2>
 <H3>Besetzung</H3>
@@ -88,7 +98,9 @@
 
 <H3><a href="/attributions" class="underline">Soundeffekte</a></H3>
 
-<H2>Herunterladen</H2>
+<Divider />
+
+<H2 id="download">Herunterladen</H2>
 
 <p class="my-8 flex items-center flex-col justify-center md:flex-row">
   <DownloadButton href="/">Hörspiel (mp3)</DownloadButton>