From 8c0078ddd842238f6c4a9a1d380a08fd48aecb23 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 14 Jan 2023 22:27:02 +0800
Subject: [PATCH] It's time for hairline width

---
 src/app.css               | 4 ++--
 src/components/status.css | 2 +-
 src/index.css             | 7 +++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index 60239e86..4e0f5be2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -82,7 +82,7 @@ a.mention span {
   background-color: var(--bg-blur-color);
   background-image: linear-gradient(to bottom, var(--bg-color), transparent);
   backdrop-filter: saturate(180%) blur(20px);
-  border-bottom: 1px solid var(--divider-color);
+  border-bottom: var(--hairline-width) solid var(--divider-color);
   z-index: 1;
   cursor: default;
   z-index: 10;
@@ -136,7 +136,7 @@ a.mention span {
   list-style: none;
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid var(--divider-color);
+  border-bottom: var(--hairline-width) solid var(--divider-color);
 }
 .timeline.flat > li {
   border-bottom: none;
diff --git a/src/components/status.css b/src/components/status.css
index 96293c46..e921d0bf 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -699,7 +699,7 @@ a.card:is(:hover, :focus) {
   padding-bottom: 16px;
   margin-left: calc(-50px - 16px);
   color: var(--text-insignificant-color);
-  border-top: 1px solid var(--outline-color);
+  border-top: var(--hairline-width) solid var(--outline-color);
   margin-top: 8px;
 }
 .status .action.has-count {
diff --git a/src/index.css b/src/index.css
index 2b06b8eb..5071dbd7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 :root {
   text-size-adjust: none;
+  --hairline-width: 1px;
 
   --blue-color: royalblue;
   --purple-color: blueviolet;
@@ -38,6 +39,12 @@
   --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
 }
 
+@media (min-resolution: 2dppx) or (min-resolution: 192dpi) or (min-device-pixel-ratio: 2) {
+  :root {
+    --hairline-width: 0.5px;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --blue-color: CornflowerBlue;