Mirrors_Framework/awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-05-23 17:40:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

style(css): add decorative underline on link hover states

Browse Source 
Give links across hero, table entries, expand panel, and footer a
semi-transparent underline on hover using text-decoration-color and
text-underline-offset, so interactive affordances are more visible
without changing the base text color. Hero sub-links are split into
their own rule to carry the additional underline style independently.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-22 15:08:49 +08:00
parent bc5f444658
commit ec2928b510
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/style.css
+15 -3
View File
@@ -190,11 +190,15 @@ kbd {
} }
.hero-topbar-link:hover, .hero-topbar-link:hover,
.hero-sub a:hover,
.hero-scrollcue:hover { .hero-scrollcue:hover {
color: var(--hero-text); color: var(--hero-text);
} }
.hero-sub a:hover {
color: var(--hero-text);
text-decoration-color: oklch(100% 0 0 / 0.6);
}
.hero-topbar-actions { .hero-topbar-actions {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -615,6 +619,9 @@ kbd {
.col-name > a:hover { .col-name > a:hover {
color: var(--accent-deep); color: var(--accent-deep);
text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4);
text-underline-offset: 0.2em;
} }
th[data-sort] { th[data-sort] {
@@ -737,9 +744,11 @@ th[data-sort].sort-asc::after {
.expand-desc a:hover, .expand-desc a:hover,
.expand-also-see a:hover, .expand-also-see a:hover,
.expand-meta a:hover, .expand-meta a:hover {
.footer a:hover {
color: var(--accent); color: var(--accent);
text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4);
text-underline-offset: 0.2em;
} }
.expand-also-see, .expand-also-see,
@@ -869,6 +878,9 @@ th[data-sort].sort-asc::after {
.footer a:hover { .footer a:hover {
color: oklch(95% 0.01 80); color: oklch(95% 0.01 80);
text-decoration: underline;
text-decoration-color: oklch(95% 0.01 80 / 0.4);
text-underline-offset: 0.2em;
} }
.footer-brand { .footer-brand {