From 34c9e0a8ed7126b1e83713933e6dd4e5cb20a7cc Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Sat, 11 Apr 2026 21:30:18 +0530
Subject: [PATCH] style(audio): enhance audio element styling for better
 presentation

---
 assets/css/common/md-content.css | 13 +++++++++++--
 layouts/shortcodes/audio.html    |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/assets/css/common/md-content.css b/assets/css/common/md-content.css
index ea4cc75b..4585aa27 100644
--- 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
index 1497a75c..c98b5f3b 100644
--- 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>