From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 1 Nov 2024 07:36:23 +0000 (-0700)
Subject: Reduce card border thickness on mobile
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=9be81e85a143a454449e3a5e6864339c83df638a;p=ardislu.dev

Reduce card border thickness on mobile

Breakpoint was selected based on manual testing on real-world devices, DevTools simulation does not accurately reflect the excessive thickness that is apparent on a real screen.
---

diff --git a/style.css b/style.css
index 7fd9960..26a9608 100644
--- a/style.css
+++ b/style.css
@@ -307,10 +307,10 @@ td {
   content: "";
   position: absolute;
   z-index: -1;
-  top: -6px;
-  left: -6px;
-  width: calc(100% + 12px);
-  height: calc(100% + 12px);
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
   border-radius: 18px;
   --shade: 50% 70%;
   background: conic-gradient(hsl(360deg var(--shade)),
@@ -332,6 +332,15 @@ td {
   transition: opacity 400ms;
 }
 
+@media (min-width: 370px) {
+  .card::before {
+    top: -6px;
+    left: -6px;
+    width: calc(100% + 12px);
+    height: calc(100% + 12px);
+  }
+}
+
 .subtitle {
   margin-block: -8px;
   font-size: 0.875em;