Add soundboard

src/css/base/variables.css

@@ -1,6 +1,7 @@
 @custom-media --up_to_S screen and (max-width: 360px);
 @custom-media --up_to_M screen and (max-width: 599px);
 @custom-media --up_to_L screen and (max-width: 839px);
+@custom-media --S_to_M screen and (min-width: 360px) and (max-width: 599px);
 @custom-media --M_to_L screen and (min-width: 600px) and (max-width: 839px);
 @custom-media --M_and_up screen and (min-width: 600px);
 @custom-media --L_and_up screen and (min-width: 840px);

src/css/main.css

@@ -10,3 +10,4 @@
 @import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';
+@import 'sections/soundboard.css';

src/css/sections/soundboard.css

@@ -0,0 +1,26 @@
+#soundboard {
+  & h2 {
+    margin-top: var(--space-xl);
+  }
+
+  & .sounds {
+    display: grid;
+    grid-gap: var(--space-l);
+    margin: 0;
+    list-style: none;
+    grid-auto-rows: 1fr;
+
+    @media (--up_to_S) {
+      grid-template-columns: 1fr;
+    }
+    @media (--S_to_M) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media (--M_to_L) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+    @media (--L_and_up) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+}

src/soundboard.pug

@@ -0,0 +1,42 @@
+extends /template.pug
+
+block vars
+  - const title = 'Soundboard'
+  - const description = 'Das Einundzwanzig Podcast Soundboard.'
+
+block main
+  #soundboard.wrap
+    script.
+      window.player = { songs: [], continue_next: false };
+    section
+      h1= title
+      .player.player--soundboard
+        .player__bottom
+          progress.player__progress.amplitude-song-played-progress(data-amplitude-main-song-played-progress="true")
+          .player__time
+            span.player__current-time
+              span.player__current-minutes.amplitude-current-minutes(data-amplitude-main-current-minutes="true")
+              = ':'
+              span.player__current-seconds.amplitude-current-seconds(data-amplitude-main-current-seconds="true")
+            span.player__duration
+              span.player__duration-minutes.amplitude-duration-minutes(data-amplitude-main-duration-minutes="true")
+              = ':'
+              span.player__duration-seconds.amplitude-duration-seconds(data-amplitude-main-duration-seconds="true")
+
+          .player__controls
+            .player__button.amplitude-play-pause(data-amplitude-main-play-pause="true" id="play-pause")
+              +sprite("pause").player__button__icon--pause
+              +sprite("play").player__button__icon--play
+
+            .player__info
+              .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
+
+      - let index = 0
+      each group in soundboard
+        h2= group.title
+        div.sounds
+          each sound in group.sounds
+            script.
+              window.player.songs.push({ album: '#{group.title}', name: '#{sound.title.replace("'", "\\'")}', url: '#{sound.file}' })
+            button.button(type="button" onclick=`Amplitude.playSongAtIndex(${index})`)= sound.title
+            - index++