Add Download link for episodes

src/css/sections/podcast.css

@@ -128,7 +128,7 @@
     width: 100%;
   }
   @media (--M_and_up) {
-    width: 25%;
+    width: 33.3%;
   }
 }
 
@@ -138,6 +138,8 @@
 }
 
 .player__bottom {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   color: var(--color-body-text);
   background-color: var(--color-card-bg);
@@ -155,7 +157,8 @@
   border:none
 }
 
-.player__time {
+.player__time,
+.player__links {
   display: flex;
   justify-content: space-between;
   padding: var(--space-m) var(--space-l);
@@ -179,7 +182,7 @@
 .player__controls {
   display: flex;
   align-items: center;
-  padding: var(--space-m) var(--space-l) var(--space-l);
+  padding: var(--space-m) var(--space-l);
 }
 
 .player__button {
@@ -225,3 +228,21 @@
 .player__album {
   color: var(--color-secondary);
 }
+
+.player__links {
+  margin-top: auto;
+  justify-content: flex-end;
+}
+
+.player__download {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-secondary);
+  font-size: var(--font-size-s);
+}
+
+.player__download svg {
+  width: .75rem;
+  height: .75rem;
+  margin-right: var(--space-s);
+}

src/includes/mixins.pug

@@ -64,6 +64,11 @@ mixin episodePlayer(e)
             .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")
 
+      .player__links
+        a.player__download(href=e.enclosure.url)
+          +sprite("download")
+          | Download
+
   script.
     window.player = {
       songs: [