From 1bb6f19ed8e0de9169e021c64a3c17a45d7a15ec Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 18 Apr 2024 17:30:11 +0800
Subject: [PATCH] Fix link colors on Safari

Safari does not support wrapping selectors around media queries in CSS
it seems.
---
 assets/main.css | 42 ++++++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 80d41d3..3020407 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -447,21 +447,6 @@ main, #after-content {
 	padding: 0 5%;
 }
 
-/* Differentiating between normal content links and meta content links */
-.meta a, footer a, #after-content a {
-	text-decoration: none;
-    @media (prefers-color-scheme: dark) {
-        color: var(--link-alt);
-    }
-}
-.meta a:hover, footer a:hover, #after-content a:hover {
-    color: var(--accent-light);
-    text-decoration: underline;
-    @media (prefers-color-scheme: dark) {
-        opacity: .75;
-    }
-}
-
 /* Tags */
 #after-content .tags a, #after-content .tags a:visited {
     padding: .2rem .5rem;
@@ -470,7 +455,10 @@ main, #after-content {
 }
 #after-content .tags a:hover {
     text-decoration: none;
-    @media (prefers-color-scheme: light) {
+    color: var(--text-light);
+}
+@media (prefers-color-scheme: light) {
+    #after-content .tags a:hover {
         filter: brightness(95%);
     }
 }
@@ -514,12 +502,34 @@ nav a:visited {
 .post-meta a:visited, .meta a:visited, footer a:visited, .after-content a:visited {
     color: var(--link-alt);
 }
+
 main a:hover {
 	opacity: .75;
 }
+
 nav a#home:hover {
 	opacity: .75;
 }
+
+/* Differentiating between normal content links and meta content links */
+.meta a, footer a, #after-content a {
+	text-decoration: none;
+}
+@media (prefers-color-scheme: dark) {
+    .meta a, footer a, #after-content a {
+        color: var(--link-alt);
+    }
+}
+.meta a:hover, footer a:hover, #after-content a:hover {
+    color: var(--accent-light);
+    text-decoration: underline;
+}
+@media (prefers-color-scheme: dark) {
+    .meta a:hover, footer a:hover, #after-content a:hover {
+        opacity: .75;
+    }
+}
+
 a:focus, form:focus {
     outline: 1px solid var(--border);
 	text-decoration: none;