mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
Improve link colors on gamma-adjusted screens
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:
parent
aefc6e4e26
commit
793c58eeb9
2 changed files with 22 additions and 11 deletions
|
@ -11,19 +11,29 @@
|
|||
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. */
|
||||
a:link {
|
||||
color: #ffeaba;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #ffe3f9;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #c80;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #f9dafa;
|
||||
}
|
||||
|
||||
/* Small text needs better contrast */
|
||||
sup a:visited {
|
||||
color: #fae4ff;
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
border-color: #555;
|
||||
}
|
||||
|
|
|
@ -27,15 +27,15 @@ html {
|
|||
@media screen {
|
||||
/* 45em is the lowest reasonable width for titles, nav, footers, etc */
|
||||
html {
|
||||
max-width: 45em;
|
||||
padding: 0 2%;
|
||||
|
||||
/* Default font sizes are one-size-fits-all; they're optimized for a
|
||||
* wide variety of complex pages. For single-column websites like
|
||||
* mine, it's safe to bump it up ever so slightly.
|
||||
* Only do this on screen, since printouts already improve legibility
|
||||
* and cost paper + ink. */
|
||||
font-size: 106%;
|
||||
|
||||
max-width: 45em;
|
||||
padding: 0 2%;
|
||||
}
|
||||
|
||||
/* 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
|
||||
* browsers, so we make up our own. */
|
||||
.skip {
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: .25em;
|
||||
/* 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
|
||||
* also set the foreground. Not all browsers support system colors
|
||||
* ("Canvas", "LinkText"), so we need to pick our own colors.
|
||||
* #06c is the default link color in FF, IE, and ux.redhat.com
|
||||
* #00e is the default in WebKit, Blink, and ancient FF. */
|
||||
color: #00e;
|
||||
background-color: #fff;
|
||||
color: #00e;
|
||||
|
||||
position: absolute;
|
||||
left: .25em;
|
||||
top: -2em;
|
||||
}
|
||||
|
||||
.skip:focus {
|
||||
|
|
Loading…
Reference in a new issue