diff --git a/src/css/sections/podcast.css b/src/css/sections/podcast.css
index e65d635567e..9288da01705 100644
--- a/src/css/sections/podcast.css
+++ b/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);
+}
diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug
index 8545d58b4fa..9d4fe843cfc 100644
--- a/src/includes/mixins.pug
+++ b/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: [
diff --git a/static/img/sprite.svg b/static/img/sprite.svg
index 5ba0573955d..43e48c3c9ef 100644
--- a/static/img/sprite.svg
+++ b/static/img/sprite.svg
@@ -13,4 +13,5 @@
+