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

CSS: compact, preserve active color, size tweak

- Remove unnecessary elements from attribute selectors wherever it
  improves compression.
- Dark theme: prevent active link color from being overridden.
- Sort properties/attributes to improve compression ratios.
- Bump font size from 109% to 109.375% so the default font size hits
  17.5px and we get nice round numbers.
This commit is contained in:
Rohan Kumar 2022-08-01 21:24:53 -07:00
parent fc8eb8d7a6
commit 5affa6df0b
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 93 additions and 65 deletions

View file

@ -28,14 +28,11 @@
color: #eee7b2; color: #eee7b2;
} }
a:active {
color: #b93;
}
a:visited { a:visited {
color: #ffdaff; color: #ffdaff;
} }
/* For users who request less contrast, target ACPA Lc of -85 to -86 */
@media (prefers-contrast: less) { @media (prefers-contrast: less) {
html { html {
background-color: #333; background-color: #333;
@ -44,20 +41,33 @@
/* Small text needs higher contrast. */ /* Small text needs higher contrast. */
@media not (prefers-contrast: less) { @media not (prefers-contrast: less) {
sup a:link { sup a:link:not(:active) {
color: #feb; color: #feb;
} }
sup a:visited { sup a:visited:not(:active) {
color: #ffe5ff; color: #ffe6ff;
} }
} }
/* For users who request more contrast, target ACPA Lc near -96 */
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
html { html {
background-color: #111; background-color: #111;
color: #eee; color: #eee;
} }
a:link {
color: #feb;
}
a:visited {
color: #ffe6ff;
}
} }
/* Specified last so it overrides :visited. I chose this color because
* it's dimmer, so it's noticeable even without color vision. */
a:active {
color: #f83;
}
} }

View file

@ -17,6 +17,24 @@
* microformats2 classnames for IndieWeb parsers, but I don't actually * microformats2 classnames for IndieWeb parsers, but I don't actually
* use those for styling. * use those for styling.
* *
* Some pages (e.g. post archives) are really long despite having a
* small download size. Rather than resort to pagination, I decided to
* use CSS containment and content-visibility. I test performance on
* browsers with heavy throttling and no GPU acceleration to ensure that
* they're gentle on the CPU. For instance, Lighthouse benchmarks my
* machine's CPU power at 1200-1300 and recommends 2.8-3.0x throttling;
* I throttle at 12-15x.
*
* "content-visibility: auto" implies containment; however, some
* browsers don't support "content-visibility: auto" but do support the
* "contain" property. To be consistent across all these browsers, I
* therefore use both even if it's a bit redundant. Once the latest
* Safari has supported "content-visibility: auto" for a year or so and
* it's in the latest version of the Tor Browser (which typically uses
* whatever the latest Firefox-ESR was a month or two ago), I'll
* consider removing these redundancies. I'll probably have to wait two
* years.
*
* To keep myself from caring about minute details, I limited myself to * To keep myself from caring about minute details, I limited myself to
* only defining spacing in increments of .25em. Pixels are 1px or * only defining spacing in increments of .25em. Pixels are 1px or
* multiples of 3px. This also improves compression. No more "finding * multiples of 3px. This also improves compression. No more "finding
@ -54,10 +72,10 @@ html {
* with minimal adjustment, and makes tap-targets larger. * with minimal adjustment, and makes tap-targets larger.
* 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.
* 108.75% is the minimum required to get superscripts to reach 14.5 * 109.375% is the minimum required to get text to 17.5 CSS pixels and
* CSS pixels with most default stylesheets. At that size, my dark * superscripts past 14.75 px with most default stylesheets. At that
* color palette has sufficient contrast.*/ * size, my dark color palette has sufficient contrast.*/
font-size: 109%; font-size: 109.375%;
/* Aligning to the center with space on both sides prevents accidental /* Aligning to the center with space on both sides prevents accidental
* link activation on tablets, and is a common practice that users are * link activation on tablets, and is a common practice that users are
@ -86,8 +104,8 @@ html {
/* 45em is too wide for long body text. /* 45em is too wide for long body text.
* Typically meets SC 1.4.8, plus or minus a few characters. */ * Typically meets SC 1.4.8, plus or minus a few characters. */
div[itemprop="articleBody"], [itemprop="articleBody"],
li[itemprop="dataFeedElement"], [itemprop="dataFeedElement"],
.narrow { .narrow {
margin: auto; margin: auto;
max-width: 34em; max-width: 34em;
@ -105,9 +123,9 @@ html {
/* Add padding on both sides so that focus outlines don't escape their /* Add padding on both sides so that focus outlines don't escape their
* containers. This will let us enable CSS containment without * containers. This will let us enable CSS containment without
* clipping overflowing elements. */ * clipping overflowing elements. */
padding: 0 .5em;
margin-top: .25em; margin-top: .25em;
margin-bottom: .25em; margin-bottom: .25em;
padding: 0 .5em;
} }
/* Align titular h1 with top nav and body text. */ /* Align titular h1 with top nav and body text. */
@ -117,15 +135,15 @@ html {
/* Archive pages can get long. Allow them to get long without slowing /* Archive pages can get long. Allow them to get long without slowing
* down the browser by using content-visibility. */ * down the browser by using content-visibility. */
dt,
footer,
h2, h2,
h3, h3,
aside > a,
footer,
dt,
a[role="doc-backlink"],
section[role="doc-endnotes"],
li article, li article,
summary { summary,
aside > a,
[role="doc-backlink"],
[role="doc-endnotes"] {
content-visibility: auto; content-visibility: auto;
contain-intrinsic-size: auto 3em; contain-intrinsic-size: auto 3em;
} }
@ -146,40 +164,42 @@ html {
} }
.tall, .tall,
section[role="doc-endnotes"] { [role="doc-endnotes"] {
contain-intrinsic-size: auto 50em; contain-intrinsic-size: auto 50em;
} }
/* Full-width elements (e.g. display: block) have known widths, so /* Full-width elements (e.g. display: block) have known widths, so
* contain their widths. */ * contain their widths. */
html,
body,
main,
article, article,
body,
dt,
h1, h1,
h2, h2,
h3, h3,
html,
main,
pre, pre,
dt,
summary, summary,
section[role="doc-endnotes"] { [role="doc-endnotes"],
[role="doc-preface"] {
contain: inline-size layout paint; contain: inline-size layout paint;
} }
p, figure,
figure { p {
contain: inline-size layout; contain: inline-size layout;
} }
/* Containment changed spaicng a bit; correct that. */
article > h2 { article > h2 {
margin: .25em 0; margin: .25em 0;
padding: .25em 0; padding: .25em 0;
} }
/* If we have a list of disclosure widgets, we need some /* A11y: If we have a list of disclosure widgets, we need some
* non-interactive space on the screen that's safe to tap. */ * non-interactive space on the screen that's safe to tap. */
form, details,
details { form {
contain: inline-size layout; contain: inline-size layout;
margin: .5em 0; margin: .5em 0;
} }
@ -192,13 +212,13 @@ html {
* paragraph are section permalinks. */ * paragraph are section permalinks. */
input, input,
div[itemprop="comment"] dd > a,
dt > a,
summary, summary,
nav[itemprop="breadcrumb"] a,
nav[itemprop="breadcrumb"] > span,
aside > a, /* Used for section permalinks */ aside > a, /* Used for section permalinks */
li > a { dt > a,
li > a,
[itemprop="comment"] dd > a,
[itemprop="breadcrumb"] a,
[itemprop="breadcrumb"] > span {
padding: .75em .25em; padding: .75em .25em;
} }
@ -207,8 +227,7 @@ html {
* Also prevent overlapping outlines on focus */ * Also prevent overlapping outlines on focus */
/* We've increased the padding for dt > a, but dt without a link /* We've increased the padding for dt > a, but dt without a link
* should take up as much space. Also: since it got * should take up as much space. */
* content-visibility: auto previously, give it an intrinsic size. */
dt { dt {
padding: 1em .5em; padding: 1em .5em;
margin: -.25em 0 -.25em -.5em; margin: -.25em 0 -.25em -.5em;
@ -220,15 +239,15 @@ html {
padding-bottom: .25em; padding-bottom: .25em;
} }
dt > a, aside > a,
aside > a { dt > a {
contain: content; contain: content;
margin: -.75em -.25em; margin: -.75em -.25em;
} }
header > nav, header > nav,
a[href="#h1"], /* skip link */ a[href="#h1"], /* skip link */
div[itemprop="comment"] dd > a , [itemprop="comment"] dd > a ,
footer > nav, footer > nav,
/* List items with direct hyperlink children should only have one /* List items with direct hyperlink children should only have one
* hyperlink. */ * hyperlink. */
@ -260,15 +279,12 @@ html {
margin: 0 0 0 -.5em; margin: 0 0 0 -.5em;
} }
/* align h-feeds in sections; they typically follow articles. */ /* align h-feeds in sections; they typically follow articles. */
a[role="doc-backlink"], [role="doc-backlink"],
section article p { section article p {
margin-left: -.5em; margin-left: -.5em;
} }
/* The nav has to be distant-enough from the top to make room for a /* The nav has to be distant-enough from the top to make room for a
* skip-link. The breadcrumbs also can't have their focus-outlines * skip-link. The breadcrumbs also can't have their focus-outlines
* overflow while CSS containment is enabled. */ * overflow while CSS containment is enabled. */
@ -284,6 +300,7 @@ html {
padding-top: 0; padding-top: 0;
} }
/* Lists of links should have some spacing so tap targets don't overlap. */
/* stylelint-disable selector-max-compound-selectors -- simplest way to describe link-lists */ /* stylelint-disable selector-max-compound-selectors -- simplest way to describe link-lists */
:not(nav) > ul li > a, :not(nav) > ul li > a,
nav:not([itemprop="breadcrumb"]) li, nav:not([itemprop="breadcrumb"]) li,
@ -293,7 +310,7 @@ html {
} }
/* Increase backlink tap target size to at least 48x48 */ /* Increase backlink tap target size to at least 48x48 */
a[role="doc-backlink"] { [role="doc-backlink"] {
contain: content; contain: content;
display: inline-block; display: inline-block;
padding: .75em .5em; padding: .75em .5em;
@ -311,7 +328,7 @@ html {
a[href="#h1"]:focus { a[href="#h1"]:focus {
top: 0; top: 0;
} }
} } /* End of adjustments for screen media type */
/* Make superscripts a bit easier to tap, and prevent consecutive /* Make superscripts a bit easier to tap, and prevent consecutive
* superscripts from touching. */ * superscripts from touching. */
@ -328,7 +345,6 @@ sup {
line-height: 0; line-height: 0;
} }
/* narrow screens: reduce list indentation, hyphenate nested lists /* narrow screens: reduce list indentation, hyphenate nested lists
* touch screens: lists of links should be easy to tap so give them * touch screens: lists of links should be easy to tap so give them
* some spacing (partial SC 2.5.5). There should be non-interactive * some spacing (partial SC 2.5.5). There should be non-interactive
@ -359,20 +375,20 @@ nav ul {
} }
/* step 2: remove bullets and make elements inline. */ /* step 2: remove bullets and make elements inline. */
nav[itemprop="breadcrumb"] ol, [itemprop="breadcrumb"] ol,
nav[itemprop="breadcrumb"] li, [itemprop="breadcrumb"] li,
nav[itemprop="breadcrumb"] > span, [itemprop="breadcrumb"] > span,
nav ul li, nav ul li,
dt > a { dt > a {
display: inline-block; display: inline-block;
} }
nav[itemprop="breadcrumb"] ol { [itemprop="breadcrumb"] ol {
margin: -.25em; margin: -.25em;
padding: 0; padding: 0;
} }
nav[itemprop="breadcrumb"] li:not(:last-of-type)::after { [itemprop="breadcrumb"] li:not(:last-of-type)::after {
content: "→"; content: "→";
} }
/* narrow screens: we reduce margin for blockquotes a lot, using /* narrow screens: we reduce margin for blockquotes a lot, using
@ -402,8 +418,8 @@ h1 {
} }
li > a, li > a,
nav[itemprop="breadcrumb"] a, [itemprop="breadcrumb"] a,
nav[itemprop="breadcrumb"] > span { [itemprop="breadcrumb"] > span {
padding: .25em; padding: .25em;
} }
@ -429,6 +445,7 @@ kbd {
ins, ins,
[role="note"], [role="note"],
[role="doc-tip"] { [role="doc-tip"] {
contain: content;
font-style: italic; font-style: italic;
text-decoration: none; text-decoration: none;
} }
@ -439,8 +456,8 @@ ins,
* This does not hold true for figures in somewhat distinct sections; the * This does not hold true for figures in somewhat distinct sections; the
* section should instead get the spacing. A section that constitutes a * section should instead get the spacing. A section that constitutes a
* separate schema.org object would qualify. */ * separate schema.org object would qualify. */
section[itemprop="mentions"], figure,
figure { section[itemprop="mentions"] {
margin: 1.5em 0; margin: 1.5em 0;
} }
@ -462,7 +479,7 @@ samp {
* I use hidden spans in backlinks to provide ARIA labels. * I use hidden spans in backlinks to provide ARIA labels.
* Some ancient browsers don't support input[type="hidden"] */ * Some ancient browsers don't support input[type="hidden"] */
[hidden], [hidden],
input[type="hidden"] { [type="hidden"] {
display: none; display: none;
} }
@ -476,7 +493,7 @@ input[type="hidden"] {
* viewport, triggering horizontal scrolling. Allow breaking words in * viewport, triggering horizontal scrolling. Allow breaking words in
* content I don't control (comments, names). For content I do control, * content I don't control (comments, names). For content I do control,
* I just add soft hyphens to the HTML. */ * I just add soft hyphens to the HTML. */
div[itemprop="comment"], [itemprop="comment"],
:not(pre) > code, :not(pre) > code,
:not(pre) > samp, :not(pre) > samp,
span[itemtype="https://schema.org/Person"] { span[itemtype="https://schema.org/Person"] {
@ -517,7 +534,7 @@ summary {
/* center standalone images; same justification as /* center standalone images; same justification as
* for centering the body contents. Also makes images easier to see * for centering the body contents. Also makes images easier to see
* for people holding a device with one hand. */ * for people holding a device with one hand. */
div[itemprop="articleBody"] img { [itemprop="articleBody"] img {
display: block; display: block;
height: auto; height: auto;
margin: auto; margin: auto;
@ -585,7 +602,7 @@ form > div > div {
a:focus, a:focus,
summary:focus, summary:focus,
pre[tabindex]:focus, [tabindex="0"]:focus,
form :focus { form :focus {
outline: 3px solid; outline: 3px solid;
} }
@ -594,7 +611,7 @@ form :focus {
* Leave it on for elements that are supposed to show focus on click. */ * Leave it on for elements that are supposed to show focus on click. */
@supports selector(:focus-visible) { @supports selector(:focus-visible) {
a:focus:not(:focus-visible), a:focus:not(:focus-visible),
pre[tabindex]:focus:not(:focus-visible) { [tabindex="0"]:focus:not(:focus-visible) {
outline: none; outline: none;
} }
} }

View file

@ -7,8 +7,8 @@
} }
/* Hide screen-only content */ /* Hide screen-only content */
a[href="#h1"], /* Skip link */ [href="#h1"], /* Skip link */
a[role="doc-backlink"], /* can't navigate back on print. */ [role="doc-backlink"], /* can't navigate back on print. */
aside:not([role="note"]), aside:not([role="note"]),
/* An un-opened summary inside an article has no use in print. /* An un-opened summary inside an article has no use in print.
* Outside an article it's used in my webring list where it has some * Outside an article it's used in my webring list where it has some
@ -20,6 +20,7 @@
/* splitting up sections with <hr> is unnecesary if those /* splitting up sections with <hr> is unnecesary if those
* sections are removed */ * sections are removed */
body > hr, body > hr,
main[itemprop] > article + hr,
nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) { nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
display: none; display: none;
} }
@ -27,8 +28,8 @@
/* Print: don't break up self-contained items. */ /* Print: don't break up self-contained items. */
figure, figure,
section[itemprop="mentions"],
blockquote, blockquote,
section[itemprop="mentions"],
li { li {
break-inside: avoid; break-inside: avoid;
} }