txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update links and colors

Browse Source
This commit is contained in:
Cassidy Williams
2023-11-08 10:06:19 -06:00
parent 466c198e82
commit fb86147f6a
3 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ColorScript.astro
View File

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

8
src/components/HeaderLink.astro
View File

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

23
src/style/global.css
View File

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