🛠 Podcast eepisode pages

src/css/base/layout.css

@@ -26,12 +26,13 @@
   & h2 {
     margin-bottom: var(--space-l);
     color: var(--color-secondary);
+    max-width: 20em;
   }
 
   & .centered {
     text-align: center;
     margin-left: auto;
-    margin-righht: auto;
+    margin-right: auto;
   }
 
   & .lead {

src/css/sections/podcast.css

@@ -33,6 +33,12 @@
   }
 }
 
+#episode {
+  & .player {
+    margin-bottom: var(--space-xxl);
+  }
+}
+
 .episodes {
   display: grid;
   grid-gap: var(--space-xl);
@@ -107,7 +113,6 @@
 }
 
 .player {
-  margin: 0 auto;
   border-radius: var(--space-m);
   overflow: hidden;
   min-width: 300px;

src/episode.pug

@@ -0,0 +1,10 @@
+extends /template.pug
+
+block main
+  section#episode
+    h1= episode.titlePlain
+
+    +episodePlayer(episode)
+
+    .content
+      !=episode.content

src/includes/mixins.pug

@@ -4,7 +4,7 @@ mixin sprite(id)
 
 mixin episodeItem(e)
   article.episodeItem&attributes(attributes)
-    a.plain(href=e.anchor)
+    a.plain(href=`/podcast/${e.slug}`)
       .media
         img(src=e.image alt=e.title loading="lazy")
       .content
@@ -35,8 +35,9 @@ mixin episodePlayer(e)
       .player__controls
         .player__button.amplitude-play-pause(data-amplitude-main-play-pause="true" id="play-pause")
         .player__info
-          .player__album(data-amplitude-song-info="album" data-amplitude-main-song-info="true")
-          .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
+          a.plain(href=`/podcast/${e.slug}`)
+            .player__album(data-amplitude-song-info="album" data-amplitude-main-song-info="true")
+            .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
 
   script.
     window.Einundzwanzig = {
@@ -52,13 +53,3 @@ mixin episodePlayer(e)
         ]
       }
     };
-
-mixin episodeDetails(e)
-  article.episodeDetails&attributes(attributes)
-    .media
-      a(href=e.anchor)
-        img(src=e.image alt=e.title loading="lazy")
-    .content
-      h3: a(href=e.anchor)=e.title
-      p=formatDate(e.date)
-      !=e.content

src/podcast.pug

@@ -5,7 +5,7 @@ block main
 
   section#podcast
     .lead.centered
-      h1 Podcast
+      h1.centered Podcast
       :markdown-it(html linkify typographer)
         Du findest uns auf
         [Spotify](https://open.spotify.com/show/10408JFbE1n8MexfrBv33r),
@@ -15,7 +15,7 @@ block main
       a.button(href="https://anchor.fm/s/d8d3c38/podcast/rss") Abonnieren / RSS
 
     .centered
-      h2 Kategorien
+      h2.centered Kategorien
       ul.categories
         li: a(href="/podcast/news") News
         li: a(href="/podcast/interviews") Interviews

src/team.pug

@@ -2,7 +2,7 @@ extends /template.pug
 
 block main
   section#team
-    h1 Team
+    h1.centered Team
     ul.members(data-shuffle)
       each m in shuffle(team)
         li.member