mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
CSS fixes
- Fix nested list spacing - Remove redundant padding rule - Fix syntax error - A couple simplifiations
This commit is contained in:
parent
fb84eb5d12
commit
96666b671e
2 changed files with 22 additions and 15 deletions
|
@ -59,7 +59,9 @@ html {
|
||||||
* between tappables" by creating margins/paddings between nav links;
|
* between tappables" by creating margins/paddings between nav links;
|
||||||
* re-use that same amount of space here. 24px is what it takes to
|
* re-use that same amount of space here. 24px is what it takes to
|
||||||
* create atl 48px of non-interactive space on <ul> and <ol> elements
|
* create atl 48px of non-interactive space on <ul> and <ol> elements
|
||||||
* containing lists of interactives. */
|
* containing lists of interactives.
|
||||||
|
* Don't use relative units here; this margin shouldn't scale with
|
||||||
|
* zoom, or else text will get narrower with zoom. */
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -103,8 +105,12 @@ html {
|
||||||
margin: .5em .25em;
|
margin: .5em .25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent nested lists from overlapping */
|
|
||||||
nav li ol {
|
nav li ol {
|
||||||
|
/* Don't duplicate bottom space: the last list item in the nested
|
||||||
|
* list and the list item that is the entire nested list will both
|
||||||
|
* have bottom padding */
|
||||||
|
margin-bottom: -1em;
|
||||||
|
/* Prevent nested lists from overlapping */
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -169,7 +175,7 @@ h1 {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
padding: 0 5%;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -180,7 +186,7 @@ h1 {
|
||||||
* try to maintain good perceptual contrast even for small text, but
|
* 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 don't want toggling the theme to impact anything besides color so
|
||||||
* I set the weight here. */
|
* I set the weight here. */
|
||||||
kbd, {
|
kbd {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -245,7 +251,7 @@ pre {
|
||||||
/* 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. */
|
||||||
img:not([itemprop="image"]) {
|
picture img {
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -262,8 +268,7 @@ img:not([itemprop="image"]) {
|
||||||
* Also use "content-visibility: auto" to improve performance by
|
* Also use "content-visibility: auto" to improve performance by
|
||||||
* reducing the number of DOM nodes rendered at once. */
|
* reducing the number of DOM nodes rendered at once. */
|
||||||
footer,
|
footer,
|
||||||
/* independent section */
|
section[aria-labelledby="webmentions"],
|
||||||
:not(details) > section:not([role]):not([itemprop="hasPart"]),
|
|
||||||
section[role="doc-endnotes"] {
|
section[role="doc-endnotes"] {
|
||||||
border-top: 1px solid;
|
border-top: 1px solid;
|
||||||
content-visibility: auto;
|
content-visibility: auto;
|
||||||
|
|
|
@ -1,7 +1,15 @@
|
||||||
/* Print stylesheet: hide stuff that we don't need. */
|
/* Print stylesheet: hide stuff that we don't need. */
|
||||||
@media print {
|
@media print {
|
||||||
/* Currently only used for transcripts and TOC */
|
/* The triangle bullet on summary elements gives no actionable
|
||||||
article details,
|
* information on print. */
|
||||||
|
summary {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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
|
||||||
|
* use, see below. */
|
||||||
|
article summary,
|
||||||
/* Currently only used for in-page heading anchors,
|
/* Currently only used for in-page heading anchors,
|
||||||
* useless in printouts. */
|
* useless in printouts. */
|
||||||
span[aria-hidden],
|
span[aria-hidden],
|
||||||
|
@ -10,12 +18,6 @@
|
||||||
nav a:not([rel="home"]) span {
|
nav a:not([rel="home"]) span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The triangle bullet on summary elements gives no actionable
|
|
||||||
* information on print. */
|
|
||||||
summary {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Print: don't orphan headings
|
/* Print: don't orphan headings
|
||||||
|
|
Loading…
Reference in a new issue