mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
CSS: various tweaks
- minimal print style - trigger hyphens at a higher width threshold - almost fully classless
This commit is contained in:
parent
a5245b26fa
commit
5771a22943
1 changed files with 21 additions and 7 deletions
|
@ -2,8 +2,9 @@
|
||||||
* Nothing here exists purely for aesthetics except the unstyled-list;
|
* Nothing here exists purely for aesthetics except the unstyled-list;
|
||||||
* everything else addresses a specific a11y, compatibility, or critical
|
* everything else addresses a specific a11y, compatibility, or critical
|
||||||
* usability need.
|
* usability need.
|
||||||
* I also don't define any non-semantic classes besides unstyled-list.
|
* I also don't use any classes besides unstyled-list. My HTML contains
|
||||||
* The the other classnames referenced here are from microformats2 */
|
* microformats2 classnames for IndieWeb parsers, but I don't actually use
|
||||||
|
* those. */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
/* Mobile screens benefit from greater line-spacing so links are
|
/* Mobile screens benefit from greater line-spacing so links are
|
||||||
|
@ -25,7 +26,9 @@ html {
|
||||||
html {
|
html {
|
||||||
/* Default font sizes are one-size-fits-all; they're optimized for a
|
/* Default font sizes are one-size-fits-all; they're optimized for a
|
||||||
* wide variety of complex pages. For single-column websites like
|
* wide variety of complex pages. For single-column websites like
|
||||||
* mine, it's safe to bump it up ever so slightly.
|
* mine, it's ideal to bump it up ever so slightly. This also makes
|
||||||
|
* <sup>, <sub>, <small>, etc. large enough to have decent contrast with
|
||||||
|
* minimal adjustment.
|
||||||
* 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. */
|
||||||
font-size: 106%;
|
font-size: 106%;
|
||||||
|
@ -35,7 +38,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 45em is too wide for long body text. */
|
/* 45em is too wide for long body text. */
|
||||||
.e-content {
|
div[itemprop="articleBody"] {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 38em;
|
max-width: 38em;
|
||||||
}
|
}
|
||||||
|
@ -70,7 +73,7 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Very narrow screens: full hyphenation */
|
/* Very narrow screens: full hyphenation */
|
||||||
@media (max-width: 11em) {
|
@media (max-width: 11.6em) {
|
||||||
article,
|
article,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
|
@ -91,15 +94,26 @@ h1 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Print: anchor links and nav are useless in printouts. Hide them. */
|
||||||
|
@media print {
|
||||||
|
a[aria-hidden],
|
||||||
|
header nav,
|
||||||
|
footer nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* <kbd> should be distinguished from <code> and surrounding text
|
/* <kbd> should be distinguished from <code> and surrounding text
|
||||||
* in a way beyond font-face; at least two visual distinctions needed */
|
* in a way beyond font-face; at least two visual distinctions needed */
|
||||||
kbd {
|
kbd {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* narrow screens: remove unused figure margins */
|
/* narrow screens: remove unused figure margins
|
||||||
|
* print stylesheet: avoid page breaks that split up figures */
|
||||||
figure {
|
figure {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* figcaptions should be distinct from surrounding paragraphs tho */
|
/* figcaptions should be distinct from surrounding paragraphs tho */
|
||||||
|
@ -138,7 +152,7 @@ samp {
|
||||||
* viewport, triggering horizontal scrolling. Allow breaking words in
|
* viewport, triggering horizontal scrolling. Allow breaking words in
|
||||||
* content I don't control (comments). For content I do control, I just
|
* content I don't control (comments). For content I do control, I just
|
||||||
* add soft hyphens to the HTML. */
|
* add soft hyphens to the HTML. */
|
||||||
.u-comment,
|
li[itemprop="comment"],
|
||||||
:not(pre) > code {
|
:not(pre) > code {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue