Mirrors_Framework/awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-05-28 22:31:31 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: improve CSS polish with active states, font smoothing, and text wrapping

Browse Source 
Add active-state press feedback (scale transform) to buttons, filter clear,
and tags. Add moz-osx-font-smoothing for consistent antialiasing on Firefox/Mac.
Apply text-wrap: balance to headings and text-wrap: pretty to body text and
expanded row descriptions. Add text-underline-offset to links and highlight
active table rows with bg-hover.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-19 02:41:56 +08:00
parent 4ea3134ba3
commit 716464e726
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/style.css
+18 -1
View File
@@ -38,9 +38,10 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
a { color: var(--accent); text-decoration: none; } a { color: var(--accent); text-decoration: none; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); text-decoration: underline; } a:hover { color: var(--accent-hover); text-decoration: underline; }
/* === Skip Link === */ /* === Skip Link === */
@@ -92,6 +93,10 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
text-decoration: none; text-decoration: none;
} }
.hero-submit:active {
transform: scale(0.97);
}
.hero-submit:focus-visible { .hero-submit:focus-visible {
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
outline-offset: 2px; outline-offset: 2px;
@@ -103,6 +108,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
font-weight: 400; font-weight: 400;
letter-spacing: -0.01em; letter-spacing: -0.01em;
line-height: 1.1; line-height: 1.1;
text-wrap: balance;
color: var(--accent); color: var(--accent);
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@@ -112,6 +118,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.6; line-height: 1.6;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
text-wrap: pretty;
} }
.hero-sub a { color: var(--text-secondary); font-weight: 600; } .hero-sub a { color: var(--text-secondary); font-weight: 600; }
@@ -194,6 +201,10 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
transition: border-color 0.15s, color 0.15s; transition: border-color 0.15s, color 0.15s;
} }
.filter-clear:active {
transform: scale(0.97);
}
.filter-clear:hover { .filter-clear:hover {
border-color: var(--text-muted); border-color: var(--text-muted);
color: var(--text); color: var(--text);
@@ -342,6 +353,7 @@ th[data-sort].sort-asc::after {
/* === Row Click === */ /* === Row Click === */
.row { cursor: pointer; } .row { cursor: pointer; }
.row:active td { background: var(--bg-hover); }
.row:focus-visible td { .row:focus-visible td {
outline: none; outline: none;
@@ -385,6 +397,7 @@ th[data-sort].sort-asc::after {
font-size: var(--text-sm); font-size: var(--text-sm);
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.6; line-height: 1.6;
text-wrap: pretty;
animation: expand-in 0.2s cubic-bezier(0.25, 1, 0.5, 1); animation: expand-in 0.2s cubic-bezier(0.25, 1, 0.5, 1);
} }
@@ -475,6 +488,10 @@ th[data-sort].sort-asc::after {
inset: -0.5rem -0.25rem; inset: -0.5rem -0.25rem;
} }
.tag:active {
transform: scale(0.95);
}
.tag:hover { .tag:hover {
background: var(--tag-hover-bg); background: var(--tag-hover-bg);
color: var(--accent); color: var(--accent);