mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02: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:
parent
fc8eb8d7a6
commit
5affa6df0b
3 changed files with 93 additions and 65 deletions
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue