1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00

CSS: apply improvements described in WBP article

- Use borders instead of <hr>
- Distinguish <kbd> from <code> and body text with boldness
- Improve dark contrast and make dark visited links look distinct from
  regular text
- Improve focus indicators
This commit is contained in:
Rohan Kumar 2022-04-13 18:19:49 -07:00
parent 2bfc97df9a
commit eaa8023af8
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 57 additions and 15 deletions

View file

@ -7,21 +7,21 @@
color: #eee; color: #eee;
} }
a { /* Only color <a> if it's a link; if href is empty, let it be. */
color: #ffea77; a:link {
color: #fe8;
} }
a:visited { a:visited {
color: #ddc; color: #edc;
} }
a:active { a:active {
color: #c80; color: #c80;
} }
pre,
:not(pre) > code { :not(pre) > code {
border-color: #444; border-color: #555;
} }
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */ /* stylelint-disable -- hasn't heard of "prefers-contrast" yet */

View file

@ -25,11 +25,13 @@ html {
* viewport. * viewport.
* This should not take effect on printouts, to save paper. */ * This should not take effect on printouts, to save paper. */
@media screen { @media screen {
/* 45em is the lowest reasonable width for titles, nav, footers, etc */
html { html {
max-width: 45em; max-width: 45em;
padding: 0 2%; padding: 0 2%;
} }
/* 45em is too wide for long body text. */
.e-content { .e-content {
margin: auto; margin: auto;
max-width: 38em; max-width: 38em;
@ -37,7 +39,7 @@ html {
} }
/* narrow screens: reduce margin for blockquotes a lot, using /* narrow screens: reduce margin for blockquotes a lot, using
* a thick left-side border instead.*/ * a thick left-side border instead. */
blockquote { blockquote {
border-left: 4px solid #aaa; border-left: 4px solid #aaa;
margin: 0; margin: 0;
@ -49,14 +51,18 @@ blockquote {
@media print, (min-width: 32em) { @media print, (min-width: 32em) {
header nav li { header nav li {
display: inline; display: inline;
/* inline-end doesn't work in netsurf. -right should stil make sense /* inline-end doesn't work in netsurf. -right should stil make sense
* in RTL machine translation, it'll just look a bit indented. */ * in RTL machine translation, it'll just look a bit indented. */
padding-right: 0.5em; padding-right: 0.5em;
} }
} }
/* WCAG guidelines recommend signalling the current page */ /* WCAG guidelines recommend signalling the current page.
a[aria-current="page"] { * <kbd> should be distinguished from <code> and surrounding text
* in a way beyond font-face; at least two visual distinctions needed */
a[aria-current="page"],
kbd {
font-weight: bold; font-weight: bold;
} }
@ -66,6 +72,7 @@ figure {
margin: 0; margin: 0;
} }
/* figcaptions should be distinct from surrounding paragraphs tho */
figure:not([itemtype]) figcaption { figure:not([itemtype]) figcaption {
margin: 0 10%; margin: 0 10%;
} }
@ -92,13 +99,9 @@ nav li,
* reason and this somehow fixes that without overriding the user's * reason and this somehow fixes that without overriding the user's
* font size preferences. */ * font size preferences. */
code, code,
pre,
kbd, kbd,
samp { samp {
/* stylelint-disable -- compatibility hack */
font-family: monospace, monospace; font-family: monospace, monospace;
/* stylelint-enable */
} }
/* Narrow screens: long words can cause content to flow out of the /* Narrow screens: long words can cause content to flow out of the
@ -127,7 +130,12 @@ pre {
img, img,
pre, pre,
:not(pre) > code { :not(pre) > code {
border: 1px solid #aaa; border: 1px solid;
}
/* A black border is too harsh. */
:not(pre) > code {
border-color: #aaa;
} }
/* center images that aren't my indieweb icon; same justification as /* center images that aren't my indieweb icon; same justification as
@ -149,6 +157,41 @@ section[role="doc-endnotes"] {
content-visibility: auto; content-visibility: auto;
} }
/* same as above */
article header {
border-bottom: 1px solid;
/* padding ensures the border can't be mistaken for an underline */
padding-bottom: 1em;
}
/* Some browser focus indicators are inaccessible; override them with
* something more visible. See WCAG 2.x SC 2.4.12. I also tried to
* match browser behavior; mainstream browsers use :focus-visible
* instead of focus but older/simpler browsers only support :focus.
* I borrowed these directives from
* https://www.tempertemper.net/blog/refining-focus-styles-with-focus-visible
* */
/* For browsers that don't support :focus-visible */
a:focus,
[tabindex]:focus {
outline: 3px solid;
}
/* Remove :focus styling for browsers that do support :focus-visible */
@supports selector(:focus-visible) {
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
outline: none;
}
}
/* Add focus styling back in browsers that do support :focus-visible */
:focus-visible {
outline: 3px solid;
}
/* Todo: /* Todo:
* - Some browsers don't scale SVGs properly; the img container * - Some browsers don't scale SVGs properly; the img container
* dimensions crop the image rather than scale it. Investigate * dimensions crop the image rather than scale it. Investigate
@ -157,4 +200,4 @@ section[role="doc-endnotes"] {
* if the spec allows this behavior, try to correct it here. * if the spec allows this behavior, try to correct it here.
* - Wait till Webkit fixes its broken-ass default dark stylesheet * - Wait till Webkit fixes its broken-ass default dark stylesheet
* then consider trimming the dark stylesheet I provide. * then consider trimming the dark stylesheet I provide.
* - Investigate CSS-based hints to screenreaders. */ * */

View file

@ -19,7 +19,6 @@
<span itemprop="wordCount">{{ .WordCount }}</span> words, a <span itemprop="timeRequired" content="PT{{ .ReadingTime }}M">{{ .ReadingTime }} minute</span> read <span itemprop="wordCount">{{ .WordCount }}</span> words, a <span itemprop="timeRequired" content="PT{{ .ReadingTime }}M">{{ .ReadingTime }} minute</span> read
</small> </small>
</header> </header>
<hr>
<div class="e-content entry-content" itemprop="articleBody"> <div class="e-content entry-content" itemprop="articleBody">
{{ partial "processed-content" . -}} {{ partial "processed-content" . -}}
</div> </div>