From 2aee05dd4b26ae9337cab82c6385f3ddf2249e6d Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 21:47:31 +0000
Subject: [PATCH] Add checkerboard pattern to results bg

---
 src/lib/components/ratio/index.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index cc2440d..e0405fe 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -21,7 +21,8 @@
   let alphaWarning = $derived.by(() => {
     if ($bg.alpha !== 1)
       return 'Alpha is not considered when the background is not opaque.';
-    if ($fg.alpha !== 1) return 'This ratio is our best estimate with transparency.';
+    if ($fg.alpha !== 1)
+      return 'This ratio is our best estimate with transparency.';
     return null;
   });
 </script>
@@ -90,7 +91,9 @@
   @use 'config';
 
   [data-layout='results'] {
-    background-color: var(--bgcolor);
+    background: linear-gradient(90deg, var(--bgcolor), var(--bgcolor)),
+      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');
+    background-size: 30px 30px;
     color: var(--fgcolor);
     display: grid;
     gap: var(--result-layout-gap, var(--shim));