From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 26 Apr 2025 05:30:06 +0000 (-0700)
Subject: Add space in between bytes
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=38690cee9ed192d0706fe6ad7fc9e2b1dcdb5633;p=utf-8-visualizer

Add space in between bytes
---

diff --git a/style.css b/style.css
index bc04715..083d866 100644
--- a/style.css
+++ b/style.css
@@ -108,11 +108,15 @@ a:not(.icon-link) {
   line-height: 0;
   overflow: hidden;
   visibility: hidden;
-  transition: inline-size 600ms;
+  transition: inline-size 600ms, margin 600ms;
 }
 
 :is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink {
-  transition: inline-size 200ms;
+  transition: inline-size 200ms, margin 200ms;
+
+  &:not(:first-child) {
+    margin-inline-start: 1ch;
+  }
 }
 
 /* Can't use inline-size: fit-content or inline-size: auto, must hardcode a concrete size for transition to work. */
@@ -139,6 +143,10 @@ a:not(.icon-link) {
 /* For the raw UTF-8 bytes */
 .insignificant {
   transition: opacity 600ms;
+
+  &:not(:first-child) {
+    margin-inline-start: 1ch;
+  }
 }
 
 :is(al-point-visualization:hover, al-point-visualization:focus-within) .insignificant {