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: [

static/img/sprite.svg

@@ -13,4 +13,5 @@
 <symbol id="theme" viewBox="0 0 26 25"><path fill="currentColor" d="m12.0000207 0c-6.61683072 0-12.0000207 5.38318998-12.0000207 12.0000207 0 6.6168308 5.38318998 11.9999793 12.0000207 11.9999793 6.6168308 0 11.9999793-5.3831485 11.9999793-11.9999793 0-6.61683072-5.3831485-12.0000207-11.9999793-12.0000207zm-10.8149687 11.9999793c0-5.96351696 4.85145183-10.8149273 10.8149687-10.8149273v21.6299375c-5.96335089 0-10.8149687-4.8514518-10.8149687-10.8150102z"/></symbol>
 <symbol id="pause" viewBox="0 0 75 75"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="36.5" cy="36.5" r="36.5" stroke="currentColor"/><path d="m30.52 23h-4.32c-1.2150264 0-2.2.9849736-2.2 2.2v23.6c0 1.21.98 2.2 2.2 2.2h4.32c1.2111194-.0055051 2.19-.9888681 2.19-2.2v-23.6c0-1.2111319-.9788806-2.1944949-2.19-2.2zm16.38 0h-4.32c-1.2111194.0055051-2.19.9888681-2.19 2.2v23.6c0 1.21.98 2.2 2.19 2.2h4.33c1.2111194-.0055051 2.19-.9888681 2.19-2.2v-23.6c0-1.21-.98-2.2-2.2-2.2z" fill="currentColor"/></g></symbol>
 <symbol id="play" viewBox="0 0 75 75"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="36.5" cy="36.5" r="36.5" stroke="currentColor"/><path d="M48.2502142,35.8004595 L26.8384747,23.4304595 C25.2746358,22.4704595 24,23.1704595 24,24.9904595 L24,49.0004595 C24,50.8104595 25.2746358,51.5204595 26.8384747,50.5604595 L48.2502142,38.2004595 C48.2502142,38.2004595 49,37.7004595 49,37.0004595 C49,36.3004595 48.2502142,35.8004595 48.2502142,35.8004595 Z" fill="currentColor"/></g></symbol>
+<symbol id="download" viewBox="0 0 490 490"><path fill="currentColor" d="M360.352 232.334l-36.008-28.531-56.375 71.165V0h-45.938v274.968l-56.375-71.165-36.008 28.531L245 377.923zM58.02 444.063h373.96v45.938H58.02z"/></symbol>
 </svg>