Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Bring every text colour up to WCAG AA
Muted, faint, the footer and the month and year ages fell short of
4.5:1 on the backgrounds they sit on, the row stripes and line number
cells among them, and links inside sentences differed from the text
around them only by colour. Each grey is now the lightest that clears
4.5:1 on its darkest background, with months stepped between weeks and
years so the age fade keeps all six steps, and links in running text
are underlined.
| -rw-r--r-- | assets/cgit.css | 23 |
1 file changed, 14 insertions, 9 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 1f32196..7cb1e07 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -3,9 +3,9 @@ div#cgit { --bg: light-dark(#ffffff, #1b1b1b); --fg: light-dark(#333333, #d6d6d6); - --muted: light-dark(#777777, #9a9a9a); - --faint: light-dark(#888888, #7f7f7f); - --footer-fg: light-dark(#bbbbbb, #666666); + --muted: light-dark(#6c6c6c, #9a9a9a); + --faint: light-dark(#717171, #8a8a8a); + --footer-fg: light-dark(#767676, #838383); --link: light-dark(#0053b3, #6ea8fe); --border: light-dark(#cccccc, #3a3a3a); @@ -42,8 +42,8 @@ div#cgit { --age-hours: light-dark(#008000, #5cb85c); --age-days: light-dark(#004400, #7cba7c); --age-weeks: light-dark(#444444, #a0a0a0); - --age-months: light-dark(#888888, #8a8a8a); - --age-years: light-dark(#bbbbbb, #6a6a6a); + --age-months: light-dark(#5a5a5a, #959595); + --age-years: light-dark(#717171, #8a8a8a); --deco-fg: light-dark(#000000, #f0f0f0); --branch-bg: light-dark(#88ff88, #1c5c2c); @@ -117,6 +117,15 @@ div#cgit a:hover { text-decoration: underline; } +div#cgit .markdown a, +div#cgit div.blob-header a, +div#cgit div.commit-msg a, +div#cgit div.notes a, +div#cgit div.truncated a, +div#cgit table.log th a { + text-decoration: underline; +} + div#cgit img, div#cgit video { border: none; @@ -363,10 +372,6 @@ div#cgit .footer { div#cgit .footer a { color: var(--footer-fg); - text-decoration: none; -} - -div#cgit .footer a:hover { text-decoration: underline; } |