From 70a83f274f2cbc7ab07b37ebc0aaef9b636fb693 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 27 Dec 2022 10:09:32 -0800
Subject: [PATCH] Fixes the issue for now
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This does introduce a new bug with SVG background images—they are appearing incredibly blurry even though they're SVGs. I fear I will have to output raster images.
---
 components/UncapStar/index.scss | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss
index ed9bfeb1..5773e8bf 100644
--- a/components/UncapStar/index.scss
+++ b/components/UncapStar/index.scss
@@ -7,12 +7,6 @@
   height: $size;
   width: $size;
 
-  @media (max-width: $phone) {
-    background-size: 12px;
-    height: 12px;
-    width: 12px;
-  }
-
   @media (min-width: $laptop) {
     &:hover {
       transform: scale(1.2);
@@ -63,3 +57,13 @@
     }
   }
 }
+
+// Phone up to iPhone 14 Pro Max
+@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) {
+  .UncapStar {
+    background-size: cover;
+    image-rendering: crisp-edges;
+    height: 14px;
+    width: 14px;
+  }
+}