From aef737e10bdbb6f38ff0b5b1953158e22d3112d8 Mon Sep 17 00:00:00 2001
From: David Eisinger <david.eisinger@gmail.com>
Date: Mon, 30 Oct 2023 10:51:54 -0400
Subject: [PATCH] Style music page

---
 themes/v2/assets/css/style.scss   | 17 +++++++++++++++++
 themes/v2/layouts/music/list.html | 11 ++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/themes/v2/assets/css/style.scss b/themes/v2/assets/css/style.scss
index 6d84f54..2dea403 100644
--- a/themes/v2/assets/css/style.scss
+++ b/themes/v2/assets/css/style.scss
@@ -164,6 +164,23 @@ pre {
   border-radius: 3px;
 }
 
+.music-track {
+  align-items: center;
+  display: flex;
+  gap: 2ch;
+  padding: 2ch 0;
+}
+
+@media only screen and (max-width: 600px) {
+  .music-track {
+    display: block;
+
+    audio {
+      padding-bottom: 1ch;
+    }
+  }
+}
+
 audio::-webkit-media-controls-panel {
   background-color: rgba(0, 0, 0, 0.05);
 }
diff --git a/themes/v2/layouts/music/list.html b/themes/v2/layouts/music/list.html
index b9db9c6..1c0ed9a 100644
--- a/themes/v2/layouts/music/list.html
+++ b/themes/v2/layouts/music/list.html
@@ -10,12 +10,13 @@
       {{ $page := . }}
 
       {{ range sort (.Resources.Match "*.mp3") "Title" "desc" }}
-        <hr>
+        <div class="music-track">
+          <audio controls src="{{ .RelPermalink }}"></audio>
 
-        <p>
-          <audio controls src="{{ .RelPermalink }}"></audio><br>
-          “{{ substr .Title 0 -4 }}” – <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
-        </p>
+          <div>
+            “{{ substr .Title 0 -4 }}”<br><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+          </div>
+        </div>
       {{ end }}
     {{ end }}
   </section>