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:
parent
2bfc97df9a
commit
eaa8023af8
3 changed files with 57 additions and 15 deletions
|
@ -7,21 +7,21 @@
|
|||
color: #eee;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffea77;
|
||||
/* Only color <a> if it's a link; if href is empty, let it be. */
|
||||
a:link {
|
||||
color: #fe8;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #ddc;
|
||||
color: #edc;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #c80;
|
||||
}
|
||||
|
||||
pre,
|
||||
:not(pre) > code {
|
||||
border-color: #444;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */
|
||||
|
|
|
@ -25,11 +25,13 @@ html {
|
|||
* viewport.
|
||||
* This should not take effect on printouts, to save paper. */
|
||||
@media screen {
|
||||
/* 45em is the lowest reasonable width for titles, nav, footers, etc */
|
||||
html {
|
||||
max-width: 45em;
|
||||
padding: 0 2%;
|
||||
}
|
||||
|
||||
/* 45em is too wide for long body text. */
|
||||
.e-content {
|
||||
margin: auto;
|
||||
max-width: 38em;
|
||||
|
@ -37,7 +39,7 @@ html {
|
|||
}
|
||||
|
||||
/* narrow screens: reduce margin for blockquotes a lot, using
|
||||
* a thick left-side border instead.*/
|
||||
* a thick left-side border instead. */
|
||||
blockquote {
|
||||
border-left: 4px solid #aaa;
|
||||
margin: 0;
|
||||
|
@ -49,14 +51,18 @@ blockquote {
|
|||
@media print, (min-width: 32em) {
|
||||
header nav li {
|
||||
display: inline;
|
||||
|
||||
/* inline-end doesn't work in netsurf. -right should stil make sense
|
||||
* in RTL machine translation, it'll just look a bit indented. */
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* WCAG guidelines recommend signalling the current page */
|
||||
a[aria-current="page"] {
|
||||
/* WCAG guidelines recommend signalling the 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;
|
||||
}
|
||||
|
||||
|
@ -66,6 +72,7 @@ figure {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* figcaptions should be distinct from surrounding paragraphs tho */
|
||||
figure:not([itemtype]) figcaption {
|
||||
margin: 0 10%;
|
||||
}
|
||||
|
@ -92,13 +99,9 @@ nav li,
|
|||
* reason and this somehow fixes that without overriding the user's
|
||||
* font size preferences. */
|
||||
code,
|
||||
pre,
|
||||
kbd,
|
||||
samp {
|
||||
/* stylelint-disable -- compatibility hack */
|
||||
font-family: monospace, monospace;
|
||||
|
||||
/* stylelint-enable */
|
||||
}
|
||||
|
||||
/* Narrow screens: long words can cause content to flow out of the
|
||||
|
@ -127,7 +130,12 @@ pre {
|
|||
img,
|
||||
pre,
|
||||
: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
|
||||
|
@ -149,6 +157,41 @@ section[role="doc-endnotes"] {
|
|||
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:
|
||||
* - Some browsers don't scale SVGs properly; the img container
|
||||
* 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.
|
||||
* - Wait till Webkit fixes its broken-ass default dark stylesheet
|
||||
* then consider trimming the dark stylesheet I provide.
|
||||
* - Investigate CSS-based hints to screenreaders. */
|
||||
* */
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
<span itemprop="wordCount">{{ .WordCount }}</span> words, a <span itemprop="timeRequired" content="PT{{ .ReadingTime }}M">{{ .ReadingTime }} minute</span> read
|
||||
</small>
|
||||
</header>
|
||||
<hr>
|
||||
<div class="e-content entry-content" itemprop="articleBody">
|
||||
{{ partial "processed-content" . -}}
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue