style(audio): enhance audio element styling for better presentation

adityatelange · adityatelange · commit 34c9e0a8ed71 · 2026-04-11T21:30:18.000+05:30
diff --git a/assets/css/common/md-content.css b/assets/css/common/md-content.css
@@ -230,8 +230,17 @@ mark {
 }
 
 audio {
-    width: stretch;
-    max-width: 100%;
+    display: block;
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    height: 2.5rem;
+    margin-bottom: var(--content-gap);
+}
+
+audio::-webkit-media-controls-enclosure {
+    border-radius: 0;
 }
 
 video {
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
@@ -1,2 +1,2 @@
 {{ $src := (.Get "src") }}
-<audio src="{{ $src }}" controls muted></audio>
+<audio src="{{ $src }}" controls muted loading="lazy"></audio>

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`{{ $src := (.Get "src") }}`
`2`		`-<audio src="{{ $src }}" controls muted></audio>`
	`2`	`+<audio src="{{ $src }}" controls muted loading="lazy"></audio>`