From 2d3642c62bdcbd705f11f513db5c165c8e281ea3 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 29 Nov 2025 12:08:52 +0800
Subject: [PATCH] style: improve hr contrast

---
 assets/css/compiled/main.css | 11 +++++++++--
 tailwind.config.js           |  8 ++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 4564daac..7e2fbfcb 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -519,6 +519,7 @@
       border-top-width: 1px;
       margin-top: 3em;
       margin-bottom: 3em;
+      border: 0.8px solid rgba(var(--color-neutral-300), 1);
     }
     :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       font-weight: 500;
@@ -741,7 +742,7 @@
     --tw-prose-bold: rgba(var(--color-neutral-900), 1);
     --tw-prose-counters: rgba(var(--color-neutral-800), 1);
     --tw-prose-bullets: rgba(var(--color-neutral-500), 1);
-    --tw-prose-hr: rgba(var(--color-neutral-200), 1);
+    --tw-prose-hr: oklch(92.8% 0.006 264.531);
     --tw-prose-quotes: rgba(var(--color-neutral-700), 1);
     --tw-prose-quote-borders: rgba(var(--color-primary-500), 1);
     --tw-prose-captions: rgba(var(--color-neutral-500), 1);
@@ -759,7 +760,7 @@
     --tw-prose-invert-bold: rgba(var(--color-neutral), 1);
     --tw-prose-invert-counters: rgba(var(--color-neutral-400), 1);
     --tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1);
-    --tw-prose-invert-hr: rgba(var(--color-neutral-500), 1);
+    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
     --tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1);
     --tw-prose-invert-quote-borders: rgba(var(--color-primary-600), 1);
     --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
@@ -1618,6 +1619,9 @@
     :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       text-decoration-color: rgba(var(--color-primary-400), 1);
     }
+    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border: 0.8px solid rgba(var(--color-neutral-500), 1);
+    }
   }
   .bg-\[\#6d6d6d\] {
     background-color: #6d6d6d;
@@ -3076,6 +3080,9 @@
       :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
         text-decoration-color: rgba(var(--color-primary-400), 1);
       }
+      :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        border: 0.8px solid rgba(var(--color-neutral-500), 1);
+      }
     }
   }
   .dark\:bg-neutral-400 {
diff --git a/tailwind.config.js b/tailwind.config.js
index 4dc8867b..ee336057 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -68,7 +68,6 @@ module.exports = {
             "--tw-prose-bold": theme("colors.neutral.900 / 1"),
             "--tw-prose-counters": theme("colors.neutral.800 / 1"),
             "--tw-prose-bullets": theme("colors.neutral.500 / 1"),
-            "--tw-prose-hr": theme("colors.neutral.200 / 1"),
             "--tw-prose-quotes": theme("colors.neutral.700 / 1"),
             "--tw-prose-quote-borders": theme("colors.primary.500 / 1"),
             "--tw-prose-captions": theme("colors.neutral.500 / 1"),
@@ -84,7 +83,6 @@ module.exports = {
             "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT / 1"),
             "--tw-prose-invert-counters": theme("colors.neutral.400 / 1"),
             "--tw-prose-invert-bullets": theme("colors.neutral.600 / 1"),
-            "--tw-prose-invert-hr": theme("colors.neutral.500 / 1"),
             "--tw-prose-invert-quotes": theme("colors.neutral.200 / 1"),
             "--tw-prose-invert-quote-borders": theme("colors.primary.600 / 1"),
             "--tw-prose-invert-captions": theme("colors.neutral.400 / 1"),
@@ -106,6 +104,9 @@ module.exports = {
             "a code": {
               color: "var(--tw-prose-code)",
             },
+            hr: {
+              border: '0.8px solid theme("colors.neutral.300 / 1")',
+            },
             kbd: {
               backgroundColor: theme("colors.neutral.200 / 1"),
               padding: "0.1rem 0.4rem",
@@ -170,6 +171,9 @@ module.exports = {
             "p.active": {
               "text-decoration-color": theme("colors.primary.400 / 1"),
             },
+            hr: {
+              border: '0.8px solid theme("colors.neutral.500 / 1")',
+            },
           },
         },
       }),