fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00
Code Issues Projects Releases Wiki Activity

CSS: narrow-screen nested lists, border for <samp>

Browse source
This commit is contained in:
Rohan Kumar 2022-04-25 22:11:18 -07:00
parent 5afbe2b108
commit 46a0e5127b
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/css/dark.css
View file

@ -33,7 +33,8 @@
color: #fae4ff; color: #fae4ff;
} }
:not(pre) > code { :not(pre) > code,
:not(pre) > samp {
border-color: #555; border-color: #555;
} }

38
assets/css/main.css
View file

@ -34,7 +34,7 @@ html {
font-size: 106%; font-size: 106%;
max-width: 45em; max-width: 45em;
padding: 0 2%; padding: initial 2%;
} }
/* 45em is too wide for long body text. */ /* 45em is too wide for long body text. */
@ -49,7 +49,7 @@ html {
blockquote { blockquote {
border-left: 4px solid; border-left: 4px solid;
margin: 0; margin: 0;
padding-left: 0.8em; padding-left: .8em;
} }
/* narrow screens: reduce list indentation /* narrow screens: reduce list indentation
@ -66,6 +66,12 @@ dd {
margin: 0; margin: 0;
} }
ol ol,
ul ul {
padding-left: 1em;
hyphens: auto;
}
/* Narrow screens: allow hyphenating titles /* Narrow screens: allow hyphenating titles
* I can't add soft hyphens to these. */ * I can't add soft hyphens to these. */
h1 { h1 {
@ -90,7 +96,7 @@ h1 {
/* inline-end doesn't work in netsurf. -right should stil make sense /* inline-end doesn't work in netsurf. -right should stil make sense
* in RTL machine translation, it'll just look a bit indented. */ * in RTL machine translation, it'll just look a bit indented. */
padding-right: 0.5em; padding-right: .5em;
} }
} }
@ -110,21 +116,23 @@ kbd {
} }
/* narrow screens: remove unused figure margins /* narrow screens: remove unused figure margins
* print stylesheet: avoid page breaks that split up figures */ * print stylesheet: avoid page breaks that split up figures
* figure captions shouldn't look like regular paragraphs; there should
* be some extra space. */
figure { figure {
margin: 1em 0; margin: 1.5em 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
/* figcaptions should be distinct from surrounding paragraphs tho */ /* figcaptions should be distinct from surrounding paragraphs tho */
figure:not([itemtype]) figcaption { figure:not([itemtype]) figcaption {
margin: 0 10%; margin: initial 10%;
} }
/* Mobile optimization: nav links are tappable with fat fingers */ /* Mobile optimization: nav links are tappable with fat fingers */
nav li, nav li,
.unstyled-list li { .unstyled-list li {
margin-bottom: 0.5em; margin-bottom: .5em;
} }
/* Lists without bullets: navlinks, posts lists, webmentions. /* Lists without bullets: navlinks, posts lists, webmentions.
@ -150,10 +158,12 @@ samp {
/* Narrow screens: long words can cause content to flow out of the /* Narrow screens: long words can cause content to flow out of the
* 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, names). For content I do control,
* add soft hyphens to the HTML. */ * I just add soft hyphens to the HTML. */
li[itemprop="comment"], li[itemprop="comment"],
:not(pre) > code { :not(pre) > code,
:not(pre) > samp,
span[itemtype="https://schema.org/Person"] {
overflow-wrap: break-word; overflow-wrap: break-word;
/* borders shouldn't touch text */ /* borders shouldn't touch text */
@ -163,7 +173,7 @@ li[itemprop="comment"],
/* Narrow screens: allow horizontal scroll in a pre block. */ /* Narrow screens: allow horizontal scroll in a pre block. */
pre { pre {
overflow: auto; overflow: auto;
padding: 0.5em; padding: .5em;
} }
/* Distinguish images from the background in case their color is /* Distinguish images from the background in case their color is
@ -173,12 +183,14 @@ pre {
* elements is an officially documented WCAG technique. */ * elements is an officially documented WCAG technique. */
img, img,
pre, pre,
:not(pre) > code { :not(pre) > code,
:not(pre) > samp {
border: 1px solid; border: 1px solid;
} }
/* A black border is too harsh. */ /* A black border is too harsh. */
:not(pre) > code { :not(pre) > code,
:not(pre) > samp {
border-color: #aaa; border-color: #aaa;
} }