fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Improve link colors on gamma-adjusted screens

Browse source 
Existing link colors made it hard to distinguish between visited and
unvisted links on screens that had warmer color temperatures. Adjusted
the colors to make the distinction clear.

Unfortunately, that adjustment made superscript visited links (for
footnotes) fail the APCA, so I added a solid black background to
superscripts. Now they too should have good contrast.
This commit is contained in:
Rohan Kumar 2022-04-23 15:35:08 -07:00
parent aefc6e4e26
commit 793c58eeb9
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/css/dark.css
View file

@ -11,19 +11,29 @@
background-color: #0f0f0b; background-color: #0f0f0b;
} }
/* Small text needs better contrast */
sup a {
background-color: #000;
}
/* Only color <a> if it's a link; if href is empty, let it be. */ /* Only color <a> if it's a link; if href is empty, let it be. */
a:link { a:link {
color: #ffeaba; color: #ffeaba;
} }
a:visited {
color: #ffe3f9;
}
a:active { a:active {
color: #c80; color: #c80;
} }
a:visited {
color: #f9dafa;
}
/* Small text needs better contrast */
sup a:visited {
color: #fae4ff;
}
:not(pre) > code { :not(pre) > code {
border-color: #555; border-color: #555;
} }

15
assets/css/main.css
View file

@ -27,15 +27,15 @@ html {
@media screen { @media screen {
/* 45em is the lowest reasonable width for titles, nav, footers, etc */ /* 45em is the lowest reasonable width for titles, nav, footers, etc */
html { html {
max-width: 45em;
padding: 0 2%;
/* Default font sizes are one-size-fits-all; they're optimized for a /* Default font sizes are one-size-fits-all; they're optimized for a
* wide variety of complex pages. For single-column websites like * wide variety of complex pages. For single-column websites like
* mine, it's safe to bump it up ever so slightly. * mine, it's safe to bump it up ever so slightly.
* Only do this on screen, since printouts already improve legibility * Only do this on screen, since printouts already improve legibility
* and cost paper + ink. */ * and cost paper + ink. */
font-size: 106%; font-size: 106%;
max-width: 45em;
padding: 0 2%;
} }
/* 45em is too wide for long body text. */ /* 45em is too wide for long body text. */
@ -219,17 +219,18 @@ a:focus,
* color. System colors like Canvas and LinkText aren't supported by all * color. System colors like Canvas and LinkText aren't supported by all
* browsers, so we make up our own. */ * browsers, so we make up our own. */
.skip { .skip {
position: absolute;
top: -2em;
left: .25em;
/* skip-link could appear on top of existing content, so it needs a /* skip-link could appear on top of existing content, so it needs a
* solid background to be legible. If we set the background, we must * solid background to be legible. If we set the background, we must
* also set the foreground. Not all browsers support system colors * also set the foreground. Not all browsers support system colors
* ("Canvas", "LinkText"), so we need to pick our own colors. * ("Canvas", "LinkText"), so we need to pick our own colors.
* #06c is the default link color in FF, IE, and ux.redhat.com * #06c is the default link color in FF, IE, and ux.redhat.com
* #00e is the default in WebKit, Blink, and ancient FF. */ * #00e is the default in WebKit, Blink, and ancient FF. */
color: #00e;
background-color: #fff; background-color: #fff;
color: #00e;
position: absolute;
left: .25em;
top: -2em;
} }
.skip:focus { .skip:focus {