wiki-cafe/wiki-cafe-site
0
0
Fork 0
Code Issues Pull Requests Activity

Refactor link styles for improved accessibility and hover effects

Browse Source
This commit is contained in:
Christian Galo 2025-04-01 20:48:31 -05:00
parent 8f63f7abb5
commit a44bdd9344
1 changed files with 76 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
themes/wikidarity/assets/css/main.css
View File

@ -141,33 +141,60 @@ p {
}
a {
color: #00e;
text-decoration: underline transparent;
&:link {
color: oklch(0.424 0.199 265.638);
text-decoration: none;
@media (hover: hover) {
&:hover {
color: oklch(0.488 0.243 264.376);
text-decoration: underline;
text-decoration-color: oklch(0.488 0.243 264.376);
}
}
&:focus-visible {
color: oklch(0.488 0.243 264.376);
outline: 2px solid oklch(0.488 0.243 264.376);
outline-offset: 2px;
text-decoration: underline;
}
&:active {
color: oklch(0.546 0.245 262.881);
text-decoration: underline;
text-decoration-color: oklch(0.546 0.245 262.881);
}
}
&:visited {
color: oklch(0.38 0.189 293.745);
text-decoration: none;
@media (hover: hover) {
&:hover {
color: oklch(0.432 0.232 292.759);
text-decoration: underline;
text-decoration-color: oklch(0.432 0.232 292.759);
}
}
&:focus-visible {
color: oklch(0.432 0.232 292.759);
outline: 2px solid oklch(0.38 0.189 293.745);
outline-offset: 2px;
text-decoration: underline;
}
&:active {
color: oklch(0.491 0.27 292.581);
text-decoration: underline;
text-decoration-color: oklch(0.491 0.27 292.581);
}
}
}
a:hover {
text-decoration-color: #00e;
}
a:focus-visible {
text-decoration-color: #00e;
outline: 2px solid #00e;
outline-offset: 2px;
}
a:visited {
color: #551a8b;
}
a:visited:hover {
text-decoration-color: #551a8b;
}
a:visited:focus-visible {
text-decoration-color: #551a8b;
outline: 2px solid #551a8b;
outline-offset: 2px;
}
blockquote {
border-left: 2px solid oklch(0.145 0 0);
@ -185,7 +212,6 @@ code {
}
/* Header Styles */
header {
border-bottom: 1px solid oklch(0.145 0 0);
padding-bottom: 0.5rem;
@ -209,25 +235,38 @@ header {
color: oklch(0.145 0 0);
a,
a:hover,
a:focus-visible,
a:visited,
a:visited:hover,
a:visited:focus-visible {
a:link,
a:visited {
color: inherit;
text-decoration: none;
}
a:hover,
a:focus-visible,
a:visited:hover,
a:visited:focus-visible {
text-decoration-color: oklch(0.145 0 0);
@media (hover: hover) {
a:hover,
a:link:hover,
a:visited:hover {
color: oklch(0.205 0 0);
text-decoration: underline;
text-decoration-color: oklch(0.205 0 0);
}
}
a:focus-visible,
a:link:focus-visible,
a:visited:focus-visible {
outline: 2px solid oklch(0.145 0 0);
color: oklch(0.205 0 0);
outline: 2px solid oklch(0.205 0 0);
outline-offset: 2px;
text-decoration: underline;
text-decoration-color: oklch(0.205 0 0);
}
a:active,
a:link:active,
a:visited:active {
color: oklch(0.269 0 0);
text-decoration: underline;
text-decoration-color: oklch(0.269 0 0);
}
}
}
@ -300,10 +339,6 @@ footer {
flex-wrap: wrap;
}
.social-link:hover {
opacity: 0.75;
}
.social-icon svg {
width: 1.25rem;
height: 1.25rem;