pixelate if < 256x256

greggman · Jul 14, 2024 · 3a1aae0 · 3a1aae0
1 parent 71f1934
commit 3a1aae0
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/src/listing.html b/src/listing.html
@@ -207,6 +207,10 @@
 video {
   pointer-events: none;
 }
+.pixelated {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
 .behind {
   position: absolute;
 }
@@ -450,15 +454,29 @@ <h1><a href="/">~</a>{linked-path}</h1>
         }
 
         function makeImage({name, href, date, size}) {
-          return createElem('a', {
-            className: 'thumbnail',
-            href,
-            title: name,
-            style: {
-              backgroundImage: `url(${href})`,
-            },
+          return createElem('div', {
+            className: 'thumbnail'
           }, [
-            createElem('span', { style: { display: 'none', textContent: name }}),
+            createElem('a', {
+              className: 'behind thumbnail',
+              textContent: name,
+              href,
+            }),
+            createElem('img', {
+              className: 'thumbnail',
+              src: href,
+              alt: name,
+              onLoad: function() {
+                if (this.naturalWidth < 256 && this.naturalHeight < 256) {
+                  this.classList.add('pixelated');
+                }
+              },
+            }),
+            createElem('a', {
+              className: 'front',
+              href,
+              title: name,
+            }),
           ]);
         }