Update links and colors

src/components/ColorScript.astro

@@ -7,7 +7,7 @@
 
 	function setRandomLinkColor() {
 		Array.from(document.getElementsByTagName("a")).forEach((e) => {
-			e.style.color = getRandomColor();
+			e.style.textDecorationColor = getRandomColor();
 		});
 	}
 

src/components/HeaderLink.astro

@@ -2,7 +2,11 @@
 export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
 
 const { href, class: className, ...props } = Astro.props as Props;
-const isActive = href === Astro.url.pathname;
+let isActive = href === Astro.url.pathname;
+
+if (Astro.url.pathname.startsWith("/post/")) {
+	isActive = true;
+}
 ---
 
 <a href={href} class:list={[className, { active: isActive }]} {...props}>
@@ -16,5 +20,7 @@ const isActive = href === Astro.url.pathname;
 	a.active {
 		font-weight: bolder;
 		text-decoration: underline;
+		text-decoration-thickness: 0.3ex;
+		text-underline-offset: 0.3ex;
 	}
 </style>

src/style/global.css

@@ -4,9 +4,11 @@
   License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
  */
 :root {
-	--white: #fff;
-	--black: #000;
-	--gray: #8b8b8b;
+	--white: #efefef;
+	--transwhite: rgba(239, 239, 239, 0.7);
+	--black: #252525;
+	--transblack: rgba(37, 37, 37, 0.7);
+	--gray: #a4a4a4;
 	--highlight: #e5ffc3;
 	--red: #e4002b;
 	--green: #24d05a;
@@ -24,7 +26,7 @@ body {
 	margin: auto;
 	padding: 20px;
 	max-width: 65ch;
-	background-color: #fff;
+	background-color: var(--white);
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 	color: var(--black);
@@ -60,7 +62,7 @@ button.dark-mode button {
 	color: var(--white);
 }
 body.dark-mode nav {
-	background: rgba(0, 0, 0, 0.7);
+	background: var(--transblack);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -77,11 +79,14 @@ body.dark-mode nav {
 		color: var(--white);
 	}
 	body nav {
-		background: rgba(0, 0, 0, 0.7);
+		background: var(--transblack);
 	}
 	body code {
 		background-color: #333;
 	}
+	body a {
+		color: var(--white);
+	}
 }
 
 header {
@@ -89,14 +94,16 @@ header {
 }
 
 a {
-	color: var(--pink);
+	color: var(--black);
+	text-decoration-thickness: 0.3ex;
+	text-underline-offset: 0.3ex;
 }
 
 nav {
 	position: sticky;
 	top: 0;
 	text-align: center;
-	background: rgba(255, 255, 255, 0.9);
+	background: var(--transwhite);
 	backdrop-filter: blur(1px);
 }