From 8597e50a591d038501668fa770009ff7a6758ecb Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Wed, 27 Apr 2022 08:41:36 -0700 Subject: [PATCH] Stylesheet: better print theme, simpler dark theme - Better print stylesheet, now with a file dedicated just for print style improvements. - Hide extra stuff in print. - Bring back navbar for print because it also tells users the current section and the site name. - Dark theme: make superscripts bold instead of using a higher-contrast color. --- assets/css/dark.css | 31 +++++++------------- assets/css/main.css | 60 ++++++++++++++++++++------------------ assets/css/print.css | 24 +++++++++++++++ layouts/partials/head.html | 1 + 4 files changed, 67 insertions(+), 49 deletions(-) create mode 100644 assets/css/print.css diff --git a/assets/css/dark.css b/assets/css/dark.css index fdb7f5f..b28f9d6 100644 --- a/assets/css/dark.css +++ b/assets/css/dark.css @@ -1,13 +1,17 @@ +/* The dark stylesheet is the only place we set custom colors besides + * border colors for inline text. Make sure the perceptual contrast + * stays within the ideal APCA ranges, not lower and preferably not + * higher either. */ @media (prefers-color-scheme: dark) { - /* I've been told that pure white on black is a bit harsh */ html { - color: #e9e9e9; - } - - html { - /* "background" is short for a bunch of unnecessary CSS rules + /* Pure white on black causes halation. + * "background" is short for a bunch of unnecessary CSS rules * background-color is all I need */ background-color: #111; + /* Dimming the default text color is not the same as reducing screen + * brightness, since other colors in this stylesheet have brighter + * red and blue channels than the default text. */ + color: #e9e9e9; } /* Only color if it's a link; if href is empty, let it be. */ @@ -20,20 +24,7 @@ } a:visited { - color: #ffd6ff; - } - - sup a:link { - color: #f3f0cb; - } - - sup a:visited { - color: #ffdfff; - } - - :not(pre) > code, - :not(pre) > samp { - border-color: #555; + color: #fdf; } /* stylelint-disable -- hasn't heard of "prefers-contrast" yet */ diff --git a/assets/css/main.css b/assets/css/main.css index 6303fae..33d0ed4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2,9 +2,9 @@ * Nothing here exists purely for aesthetics except the unstyled-list; * everything else addresses a specific a11y, compatibility, or critical * usability need. - * I also don't use any classes besides unstyled-list and pixelated. My + * I also don't use any classes besides "unstyled-list" and "pix". My * HTML contains microformats2 classnames for IndieWeb parsers, but I - * don't actually use those. */ + * don't actually use those for styling. */ html { /* Mobile screens benefit from greater line-spacing so links are @@ -12,18 +12,11 @@ html { * <100dpi screens: sans-serif is better. Why did browsers settle * on serif being the default?? */ font: 100%/1.5 sans-serif; - - /* Aligning to the center with space on both sides prevents accidental - * link activation on mobile devices. */ - margin: auto; } -/* WCAG recommends a max line width. Not everyone can resize the - * viewport. - * This should not take effect on printouts, to save paper. */ +/* This should not take effect on printouts, to save paper. */ @media screen { - /* 45em is the lowest reasonable width for titles, nav, footers, etc */ - html { + body { /* Default font sizes are one-size-fits-all; they're optimized for a * wide variety of complex pages. For single-column websites like * mine, it's ideal to bump it up ever so slightly. This also makes @@ -33,6 +26,13 @@ html { * and cost paper + ink. */ font-size: 105%; + /* Aligning to the center with space on both sides prevents accidental + * link activation on tablets. */ + margin: auto; + + /* WCAG recommends a max line width. Not everyone can resize the + * viewport. + * 45em is the lowest reasonable width for titles, nav, footers, etc */ max-width: 45em; padding: 0 2%; } @@ -44,6 +44,15 @@ html { } } +/* Small text is easier to read when slightly bolder. + * This is important in the dark theme where I set my own colors and + * try to maintain good perceptual contrast even for small text, but + * I don't want toggling the theme to impact anything besides color so + * I set the weight here. */ +sup { + font-weight: 600; +} + /* narrow screens: reduce margin for blockquotes a lot, using * a thick left-side border instead. */ blockquote { @@ -68,8 +77,8 @@ dd { ol ol, ul ul { - padding-left: 1em; hyphens: auto; + padding-left: 1em; } /* Narrow screens: allow hyphenating titles @@ -100,15 +109,6 @@ h1 { } } -/* Print: anchor links and nav are useless in printouts. Hide them. */ -@media print { - a[aria-hidden], - header nav, - footer nav { - display: none; - } -} - /* should be distinguished from and surrounding text * in a way beyond font-face; at least two visual distinctions needed */ kbd { @@ -121,7 +121,6 @@ kbd { * be some extra space. */ figure { margin: 1.5em 0; - page-break-inside: avoid; } /* figcaptions should be distinct from surrounding paragraphs tho */ @@ -188,14 +187,15 @@ pre, border: 1px solid; } -.pix { - image-rendering: pixelated; -} - /* A black border is too harsh. */ :not(pre) > code, :not(pre) > samp { - border-color: #aaa; + border-color: #999; +} + +/* Some images look blurry when scaled */ +.pix { + image-rendering: pixelated; } /* center images that aren't my indieweb icon; same justification as @@ -227,14 +227,16 @@ div[role="doc-endnotes"] { /* For browsers that don't support :focus-visible */ a:focus, -[tabindex]:focus { +summary:focus, +pre[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) { + summary:focus:not(:focus-visible), + pre[tabindex]:focus:not(:focus-visible) { outline: none; } } diff --git a/assets/css/print.css b/assets/css/print.css new file mode 100644 index 0000000..2235a22 --- /dev/null +++ b/assets/css/print.css @@ -0,0 +1,24 @@ +/* Print stylesheet: hide stuff that we don't need. */ +@media print { + /* Currently only used for transcripts */ + details, + /* Currently only used for anchors */ + span[aria-hidden], + /* You can't navigate in a printout. */ + footer nav { + display: none; + } +} + +/* Print: don't orphan headings */ +h2, +h3, +h4 { + break-after: avoid; +} + +figure, +article article, +div[role="doc-endnotes"] ol li { + break-inside: avoid; +} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 29427db..b77b2d5 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -41,6 +41,7 @@ {{- if not (eq $dark "off") -}} {{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}} {{- end -}} +{{ $resources = $resources | append (resources.Get "css/print.css" | resources.ExecuteAsTemplate "print.css" .) -}} {{- $css := $resources | resources.Concat "css/style.css" | minify -}}