From 16718dba43bba5acd50204d0797e989ec6c96102 Mon Sep 17 00:00:00 2001
From: Chad Birch <chad.birch@gmail.com>
Date: Thu, 4 Apr 2019 03:57:03 -0600
Subject: [PATCH] Use a @supports query for logo image-rendering

Unfortunately, right now Chrome only supports "pixelated", and Firefox
only supports "crisp-edges", so this should give the best result across
browsers.
---
 tildes/scss/modules/_site-header.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/tildes/scss/modules/_site-header.scss b/tildes/scss/modules/_site-header.scss
index 615b4d7..fd183a8 100644
--- a/tildes/scss/modules/_site-header.scss
+++ b/tildes/scss/modules/_site-header.scss
@@ -26,7 +26,14 @@
 .site-header-logo {
   background-image: url(/favicon-32x32.png);
   background-repeat: no-repeat;
-  image-rendering: crisp-edges;
+
+  // keep the logo pixelated - "pixelated" is best but Firefox only supports
+  // "crisp-edges" as of Firefox 68
+  image-rendering: pixelated;
+  @supports not (image-rendering: pixelated) {
+    image-rendering: crisp-edges;
+  }
+
   padding-left: 40px;
   padding-right: 8px;
   line-height: 32px;