From 666681be7c2e2b839dea86c221dc19093da715ba Mon Sep 17 00:00:00 2001
From: kgva CMS <cms@karimgabrielevarano.xyz>
Date: Sat, 15 Aug 2026 11:49:27 +0000
Subject: [PATCH] fix: pause icon drawn in css instead of a glyph, no more gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

letter-spacing on the ❚❚ glyph could tighten the character cells but not the visible gap between them on a monospace font — each character keeps its own cell regardless. now two bars drawn via ::before/::after on .is-playing, with exact pixel control over the gap; the ▶ span just hides instead of getting replaced.
---
 assets/css/custom.css         | 19 ++++++++++++++++++-
 assets/js/player.js           |  8 ++++++--
 layouts/portfolio/single.html |  2 +-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index df8ab75..6a63b18 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -479,7 +479,24 @@ footer a:hover,
 /* fixed width + tightened tracking so ▶ and ❚❚ render as the same size
    button instead of the pause glyph's two characters (with the font's
    normal letter-spacing between them) widening it */
-.player__play { display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; letter-spacing: -0.2em; }
+/* pause icon is two CSS bars, not a "❚❚" glyph — a monospace font's own
+   per-character cell width left a gap between the glyphs that no amount of
+   letter-spacing closed without also looking wrong at other sizes */
+.player__play { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; }
+.player.is-playing .player__playicon { visibility: hidden; }
+.player__play::before,
+.player__play::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 0.8em;
+  background: currentColor;
+  transform: translateY(-50%);
+  opacity: 0;
+}
+.player.is-playing .player__play::before { opacity: 1; left: calc(50% - 3px); }
+.player.is-playing .player__play::after { opacity: 1; left: calc(50% + 1px); }
 .player__scrub { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; }
 .player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
 .player__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
diff --git a/assets/js/player.js b/assets/js/player.js
index 73bec1e..9f9c755 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -37,12 +37,16 @@
     }
     function tick() { sync(); raf = requestAnimationFrame(tick); }
 
+    // the pause icon is drawn in CSS (two bars via ::before/::after on
+    // .is-playing), not a "❚❚" glyph — a monospace font's letter-spacing
+    // between two heavy-bar characters left a gap no amount of
+    // letter-spacing closed cleanly. the ▶ span just hides/shows.
     v.addEventListener("play", function () {
-      root.classList.add("is-playing"); if (play) play.textContent = "❚❚";
+      root.classList.add("is-playing");
       if (!raf) raf = requestAnimationFrame(tick);
     });
     v.addEventListener("pause", function () {
-      root.classList.remove("is-playing"); if (play) play.textContent = "▶";
+      root.classList.remove("is-playing");
       if (raf) { cancelAnimationFrame(raf); raf = null; }
       sync();   // one last sync so the bar lands exactly on the paused frame
     });
diff --git a/layouts/portfolio/single.html b/layouts/portfolio/single.html
index 9b0236c..cb33b38 100644
--- a/layouts/portfolio/single.html
+++ b/layouts/portfolio/single.html
@@ -35,7 +35,7 @@
       </video>
       <button class="player__big" type="button" aria-label="play">▶</button>
       <div class="player__bar">
-        <button class="player__play" type="button" aria-label="play/pause">▶</button>
+        <button class="player__play" type="button" aria-label="play/pause"><span class="player__playicon">▶</span></button>
         <div class="player__scrub"><div class="player__fill"></div></div>
         <span class="player__time">00:00 / 00:00</span>
         <button class="player__mute" type="button" aria-label="mute">vol</button>