Style music page

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);
 }

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>
+          <div>
-          <audio controls src="{{ .RelPermalink }}"></audio><br>
+            “{{ substr .Title 0 -4 }}”<br><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
-          “{{ substr .Title 0 -4 }}” – <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+          </div>
-        </p>
+        </div>
       {{ end }}
     {{ end }}
   </section>