1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14: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;
}
a:active {
color: #b93;
}
a:visited {
color: #ffdaff;
}
/* For users who request less contrast, target ACPA Lc of -85 to -86 */
@media (prefers-contrast: less) {
html {
background-color: #333;
@ -44,20 +41,33 @@
/* Small text needs higher contrast. */
@media not (prefers-contrast: less) {
sup a:link {
sup a:link:not(:active) {
color: #feb;
}
sup a:visited {
color: #ffe5ff;
sup a:visited:not(:active) {
color: #ffe6ff;
}
}
/* For users who request more contrast, target ACPA Lc near -96 */
@media (prefers-contrast: more) {
html {
background-color: #111;
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
* 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
* only defining spacing in increments of .25em. Pixels are 1px or
* multiples of 3px. This also improves compression. No more "finding
@ -54,10 +72,10 @@ html {
* with minimal adjustment, and makes tap-targets larger.
* Only do this on screen, since printouts already improve legibility
* and cost paper + ink.
* 108.75% is the minimum required to get superscripts to reach 14.5
* CSS pixels with most default stylesheets. At that size, my dark
* color palette has sufficient contrast.*/
font-size: 109%;
* 109.375% is the minimum required to get text to 17.5 CSS pixels and
* superscripts past 14.75 px with most default stylesheets. At that
* size, my dark color palette has sufficient contrast.*/
font-size: 109.375%;
/* Aligning to the center with space on both sides prevents accidental
* 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.
* Typically meets SC 1.4.8, plus or minus a few characters. */
div[itemprop="articleBody"],
li[itemprop="dataFeedElement"],
[itemprop="articleBody"],
[itemprop="dataFeedElement"],
.narrow {
margin: auto;
max-width: 34em;
@ -105,9 +123,9 @@ html {
/* Add padding on both sides so that focus outlines don't escape their
* containers. This will let us enable CSS containment without
* clipping overflowing elements. */
padding: 0 .5em;
margin-top: .25em;
margin-bottom: .25em;
padding: 0 .5em;
}
/* 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
* down the browser by using content-visibility. */
dt,
footer,
h2,
h3,
aside > a,
footer,
dt,
a[role="doc-backlink"],
section[role="doc-endnotes"],
li article,
summary {
summary,
aside > a,
[role="doc-backlink"],
[role="doc-endnotes"] {
content-visibility: auto;
contain-intrinsic-size: auto 3em;
}
@ -146,40 +164,42 @@ html {
}
.tall,
section[role="doc-endnotes"] {
[role="doc-endnotes"] {
contain-intrinsic-size: auto 50em;
}
/* Full-width elements (e.g. display: block) have known widths, so
* contain their widths. */
html,
body,
main,
article,
body,
dt,
h1,
h2,
h3,
html,
main,
pre,
dt,
summary,
section[role="doc-endnotes"] {
[role="doc-endnotes"],
[role="doc-preface"] {
contain: inline-size layout paint;
}
p,
figure {
figure,
p {
contain: inline-size layout;
}
/* Containment changed spaicng a bit; correct that. */
article > h2 {
margin: .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. */
form,
details {
details,
form {
contain: inline-size layout;
margin: .5em 0;
}
@ -192,13 +212,13 @@ html {
* paragraph are section permalinks. */
input,
div[itemprop="comment"] dd > a,
dt > a,
summary,
nav[itemprop="breadcrumb"] a,
nav[itemprop="breadcrumb"] > span,
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;
}
@ -207,8 +227,7 @@ html {
* Also prevent overlapping outlines on focus */
/* We've increased the padding for dt > a, but dt without a link
* should take up as much space. Also: since it got
* content-visibility: auto previously, give it an intrinsic size. */
* should take up as much space. */
dt {
padding: 1em .5em;
margin: -.25em 0 -.25em -.5em;
@ -220,15 +239,15 @@ html {
padding-bottom: .25em;
}
dt > a,
aside > a {
aside > a,
dt > a {
contain: content;
margin: -.75em -.25em;
}
header > nav,
a[href="#h1"], /* skip link */
div[itemprop="comment"] dd > a ,
[itemprop="comment"] dd > a ,
footer > nav,
/* List items with direct hyperlink children should only have one
* hyperlink. */
@ -260,15 +279,12 @@ html {
margin: 0 0 0 -.5em;
}
/* align h-feeds in sections; they typically follow articles. */
a[role="doc-backlink"],
[role="doc-backlink"],
section article p {
margin-left: -.5em;
}
/* 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
* overflow while CSS containment is enabled. */
@ -284,6 +300,7 @@ html {
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 */
:not(nav) > ul li > a,
nav:not([itemprop="breadcrumb"]) li,
@ -293,7 +310,7 @@ html {
}
/* Increase backlink tap target size to at least 48x48 */
a[role="doc-backlink"] {
[role="doc-backlink"] {
contain: content;
display: inline-block;
padding: .75em .5em;
@ -311,7 +328,7 @@ html {
a[href="#h1"]:focus {
top: 0;
}
}
} /* End of adjustments for screen media type */
/* Make superscripts a bit easier to tap, and prevent consecutive
* superscripts from touching. */
@ -328,7 +345,6 @@ sup {
line-height: 0;
}
/* narrow screens: reduce list indentation, hyphenate nested lists
* 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
@ -359,20 +375,20 @@ nav ul {
}
/* step 2: remove bullets and make elements inline. */
nav[itemprop="breadcrumb"] ol,
nav[itemprop="breadcrumb"] li,
nav[itemprop="breadcrumb"] > span,
[itemprop="breadcrumb"] ol,
[itemprop="breadcrumb"] li,
[itemprop="breadcrumb"] > span,
nav ul li,
dt > a {
display: inline-block;
}
nav[itemprop="breadcrumb"] ol {
[itemprop="breadcrumb"] ol {
margin: -.25em;
padding: 0;
}
nav[itemprop="breadcrumb"] li:not(:last-of-type)::after {
[itemprop="breadcrumb"] li:not(:last-of-type)::after {
content: "→";
}
/* narrow screens: we reduce margin for blockquotes a lot, using
@ -402,8 +418,8 @@ h1 {
}
li > a,
nav[itemprop="breadcrumb"] a,
nav[itemprop="breadcrumb"] > span {
[itemprop="breadcrumb"] a,
[itemprop="breadcrumb"] > span {
padding: .25em;
}
@ -429,6 +445,7 @@ kbd {
ins,
[role="note"],
[role="doc-tip"] {
contain: content;
font-style: italic;
text-decoration: none;
}
@ -439,8 +456,8 @@ ins,
* This does not hold true for figures in somewhat distinct sections; the
* section should instead get the spacing. A section that constitutes a
* separate schema.org object would qualify. */
section[itemprop="mentions"],
figure {
figure,
section[itemprop="mentions"] {
margin: 1.5em 0;
}
@ -462,7 +479,7 @@ samp {
* I use hidden spans in backlinks to provide ARIA labels.
* Some ancient browsers don't support input[type="hidden"] */
[hidden],
input[type="hidden"] {
[type="hidden"] {
display: none;
}
@ -476,7 +493,7 @@ input[type="hidden"] {
* viewport, triggering horizontal scrolling. Allow breaking words in
* content I don't control (comments, names). For content I do control,
* I just add soft hyphens to the HTML. */
div[itemprop="comment"],
[itemprop="comment"],
:not(pre) > code,
:not(pre) > samp,
span[itemtype="https://schema.org/Person"] {
@ -517,7 +534,7 @@ summary {
/* center standalone images; same justification as
* for centering the body contents. Also makes images easier to see
* for people holding a device with one hand. */
div[itemprop="articleBody"] img {
[itemprop="articleBody"] img {
display: block;
height: auto;
margin: auto;
@ -585,7 +602,7 @@ form > div > div {
a:focus,
summary:focus,
pre[tabindex]:focus,
[tabindex="0"]:focus,
form :focus {
outline: 3px solid;
}
@ -594,7 +611,7 @@ form :focus {
* Leave it on for elements that are supposed to show focus on click. */
@supports selector(:focus-visible) {
a:focus:not(:focus-visible),
pre[tabindex]:focus:not(:focus-visible) {
[tabindex="0"]:focus:not(:focus-visible) {
outline: none;
}
}

View file

@ -7,8 +7,8 @@
}
/* Hide screen-only content */
a[href="#h1"], /* Skip link */
a[role="doc-backlink"], /* can't navigate back on print. */
[href="#h1"], /* Skip link */
[role="doc-backlink"], /* can't navigate back on print. */
aside:not([role="note"]),
/* 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
@ -20,6 +20,7 @@
/* splitting up sections with <hr> is unnecesary if those
* sections are removed */
body > hr,
main[itemprop] > article + hr,
nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
display: none;
}
@ -27,8 +28,8 @@
/* Print: don't break up self-contained items. */
figure,
section[itemprop="mentions"],
blockquote,
section[itemprop="mentions"],
li {
break-inside: avoid;
}