apricote/ein-pfeil-am-rechten-fleck.de
1
0
Fork 0
mirror of https://github.com/apricote/ein-pfeil-am-rechten-fleck.de.git synced 2026-01-13 21:11:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: add listen section

Browse source
This commit is contained in:
Julian Tölle 2023-11-04 01:27:13 +01:00
parent e8f4fd6fc7
commit cc300c6868
5 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -3,7 +3,7 @@
@layer base { @layer base {
html { html {
@apply bg-cocoa-brown text-yellow-300 text-center; @apply bg-cocoa-brown text-yellow-300 text-center scroll-smooth;
} }
} }

1
src/lib/divider.svelte Normal file
View file

@ -0,0 +1 @@
<div class="border-t-[1px] my-8"></div>

6
src/lib/h2.svelte
View file

@ -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>

4
src/routes/+layout.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
import "../app.css"; import "../app.css";
import Image from "$lib/image.svelte"; import Image from "$lib/image.svelte";
import Divider from "$lib/divider.svelte";
import LogoImg from "$lib/images/logo.png?w=512"; import LogoImg from "$lib/images/logo.png?w=512";
</script> </script>
@ -34,7 +35,8 @@
<main class="p-4 font-sans"> <main class="p-4 font-sans">
<slot /> <slot />
</main> </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="/impressum" class="underline">Impressum & Datenschutz</a><br />
<a <a
href="https://github.com/apricote/ein-pfeil-am-rechten-fleck.de" href="https://github.com/apricote/ein-pfeil-am-rechten-fleck.de"

16
src/routes/+page.svelte
View file

@ -11,6 +11,7 @@
import TamImg from "$lib/images/tam.png?w=336"; import TamImg from "$lib/images/tam.png?w=336";
import BlueImg from "$lib/images/blue.png?w=336"; import BlueImg from "$lib/images/blue.png?w=336";
import Image from "$lib/image.svelte"; import Image from "$lib/image.svelte";
import Divider from "$lib/divider.svelte";
</script> </script>
<Image <Image
@ -30,6 +31,8 @@
Erzählung voller Intrigen und überraschenden Wendungen. Erzählung voller Intrigen und überraschenden Wendungen.
</p> </p>
<Divider />
<H2>Unsere Helden</H2> <H2>Unsere Helden</H2>
<Hero <Hero
@ -49,7 +52,14 @@
image={BlueImg} 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> <H2>Würdigungen</H2>
<H3>Besetzung</H3> <H3>Besetzung</H3>
@ -88,7 +98,9 @@
<H3><a href="/attributions" class="underline">Soundeffekte</a></H3> <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"> <p class="my-8 flex items-center flex-col justify-center md:flex-row">
<DownloadButton href="/">Hörspiel (mp3)</DownloadButton> <DownloadButton href="/">Hörspiel (mp3)</DownloadButton>