davideisinger.com

commit aef737e10bdbb6f38ff0b5b1953158e22d3112d8
parent f48d4811c638f350294bc09c107745bdc9768174
Author: David Eisinger <[email protected]>
Date:   Mon, 30 Oct 2023 10:51:54 -0400

Style music page

Diffstat:
M
themes/v2/assets/css/style.scss
 | 
17
+++++++++++++++++
M
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
@@ -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
@@ -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>