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;
|
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 */
|
||||||
|
|
|
@ -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. */
|
* */
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue