qhri/personal-website
2
2
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

added styling to hovered links

Browse source
This commit is contained in:
qhri 2025-08-26 20:31:00 -04:00
parent 67445b2075
commit ff90f623aa
1 changed files with 33 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/css.css
View file

@ -29,24 +29,28 @@
} }
:root { :root {
--bg-color: hsl(300 25% 90%); --bg-color: hsl(300 25% 90%);
--font-color: hsl( 0 0% 20%); --font-color: hsl( 0 0% 20%);
--code-border-color: hsl( 0 0% 10%); --code-border-color: hsl( 0 0% 10%);
--link-color: hsl(225 73% 52%); --link-color: hsl(225 73% 52%);
--link-color-visited: hsl(249 80% 60%); --link-color-hover: hsl(225 73% 42%);
--header-bg-color: hsl(300 23% 85%); --link-color-visited: hsl(249 80% 60%);
--header-border-color: hsl(300 22% 75%); --link-color-visited-hover: hsl(249 80% 50%);
--details-bg-color: hsl(300 25% 95%); --header-bg-color: hsl(300 23% 85%);
--header-border-color: hsl(300 22% 75%);
--details-bg-color: hsl(300 25% 95%);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--bg-color: hsl(300 25% 10%); --bg-color: hsl(300 25% 10%);
--font-color: hsl( 0 0% 80%); --font-color: hsl( 0 0% 80%);
--code-border-color: hsl( 0 0% 20%); --code-border-color: hsl( 0 0% 20%);
--link-color: hsl(225 73% 62%); --link-color: hsl(225 73% 62%);
--link-color-visited: hsl(249 80% 70%); --link-color-hover: hsl(225 73% 72%);
--header-bg-color: hsl(300 23% 15%); --link-color-visited: hsl(249 80% 70%);
--header-border-color: hsl(300 22% 25%); --link-color-visited-hover: hsl(249 80% 80%);
--details-bg-color: hsl(300 25% 5%); --header-bg-color: hsl(300 23% 15%);
--header-border-color: hsl(300 22% 25%);
--details-bg-color: hsl(300 25% 5%);
} }
} }
@ -76,12 +80,25 @@ code {
a { a {
text-decoration: underline dashed; text-decoration: underline dashed;
&:hover {
text-decoration: underline solid;
text-decoration-thickness: 2px;
}
&:link { &:link {
color: var(--link-color); color: var(--link-color);
&:hover {
color: var(--link-color-hover);
}
} }
&:visited { &:visited {
color: var(--link-color-visited); color: var(--link-color-visited);
&:hover {
color: var(--link-color-visited-hover);
}
} }
} }