4 files changed, 57 insertions(+), 0 deletions(-)

A layouts/partials/music.html
A layouts/shortcodes/music.html
M static/base.css
A static/play-large-symbolic.svg

@@ 0,0 1,14 @@
+<div>
+  <a class="music-player" href="{{ .link }}" target="_blank">
+
+    <img class="player-cover" src="{{ .cover }}">
+
+    <div class="player-meta">
+      <h4 class="player-title">{{ .title }}</h4>
+      <p class="player-by">by <b>{{ .by }}</b></p>
+    </div>
+
+    <i class="player-play"></i>
+
+  </a>
+</div>

@@ 0,0 1,1 @@
+{{ partial "music.html" .Params }}

@@ 433,3 433,43 @@ footer * {
 .pad01 {
 	padding: 0.1rem;
 }
+
+/* MUSIC PLAYER */
+.music-player {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	background: var(--color-text-dark);
+	border-radius: 0.8rem;
+	width: fit-content;
+	filter: brightness(100%);
+	transition: filter .4s ease-in-out;
+}
+.music-player:hover {
+	filter: brightness(110%);
+}
+.music-player .player-cover {
+	width: 6rem;
+}
+.music-player .player-meta {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+.music-player .player-play {
+	margin: 0.8rem;
+	margin-left: 2.4rem;
+    mask: url("/play-large-symbolic.svg");
+	mask-repeat: no-repeat;
+	mask-size: cover;
+	background: var(--color-text);
+	opacity: 0.8;
+	width: 8rem;
+	max-width: 6vmin;
+	aspect-ratio: 1/1;
+	transition: filter .4s ease-in-out;
+	filter: brightness(100%);
+}
+.music-player:hover .player-play {
+	filter: brightness(110%);
+}

@@ 0,0 1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 2.003906 13.492188 v -11 c 0 -1.5 1.265625 -1.492188 1.265625 -1.492188 h 0.132813 c 0.246094 0 0.484375 0.054688 0.699218 0.175781 l 9.796876 5.597657 c 0.433593 0.238281 0.65625 0.730468 0.65625 1.222656 c 0 0.492187 -0.222657 0.984375 -0.65625 1.226562 l -9.796876 5.597656 c -0.214843 0.121094 -0.453124 0.175782 -0.699218 0.171876 h -0.132813 s -1.265625 0 -1.265625 -1.5 z m 0 0" fill="#222222"/></svg>