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

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

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