diff --git a/src/components/ColorScript.astro b/src/components/ColorScript.astro index 733149c..cca77d5 100644 --- a/src/components/ColorScript.astro +++ b/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(); }); } diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index 41e19de..2dd13b1 100644 --- a/src/components/HeaderLink.astro +++ b/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; +} --- @@ -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; } diff --git a/src/style/global.css b/src/style/global.css index df43de8..45f1b30 100644 --- a/src/style/global.css +++ b/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); }