From de3b8be0f6b0a46f2df503d6794f9c841dd768ec Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Fri, 31 May 2024 15:46:35 -0500
Subject: [PATCH] fix: make sizing "cover" `preserveAspectRatio="xMidYMid
 slice"`

---
 blurup.js  | 2 +-
 index.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/blurup.js b/blurup.js
index 56c3eda..70b5a94 100644
--- a/blurup.js
+++ b/blurup.js
@@ -88,7 +88,7 @@ export async function createBlurUp(playbackId, options) {
 }
 
 function svgBlurImage(tinyImageDataURL, width, height, stdDeviation) {
-  const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''}><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="${stdDeviation}"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" href="${tinyImageDataURL}"/></g></svg>`;
+  const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''}><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="${stdDeviation}"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" href="${tinyImageDataURL}"/></g></svg>`;
   return svg.replace(/#/g, '%23');
 }
 
diff --git a/index.html b/index.html
index 5dae1db..fa8e5a5 100644
--- a/index.html
+++ b/index.html
@@ -196,11 +196,11 @@
       #blurup-code {
         display: block;
         font-family: 'JetBrains Mono', monospace;
-        font-size: .8rem;
+        font-size: .75rem;
         border-radius: 0;
         background: #FAFAF9;
         width: 100%;
-        height: 13rem;
+        height: 12.5rem;
         margin-top: 1rem;
         padding: .5rem .7rem;
       }