1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00

Prepare a TOC template

This commit is contained in:
Rohan Kumar 2022-03-26 12:32:22 -07:00
parent 422369ea4f
commit fd576c9175
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 59 additions and 18 deletions

View file

@ -1,4 +1,7 @@
/* CSS that adds the bare minimum for a simple layout */ /* CSS that adds the bare minimum for a simple layout.
* Nothing here exists purely for aesthetics except the unstyled-list;
* everything else addresses a specific a11y, compatibility, or critical
* usability need. */
/* This site's CSS does 10 major things: /* This site's CSS does 10 major things:
* 1. sans-serif instead of serif for low-res screens. * 1. sans-serif instead of serif for low-res screens.
@ -23,44 +26,62 @@
* default fonts, non-dark-mode colors, etc. * default fonts, non-dark-mode colors, etc.
*/ */
html { html,
font: 100%/1.5 sans-serif; .e-content {
/* Mobile screens benefit from greater line-spacing so links are
* further apart. Dyslexic users prefer the spacing too.
* <100dpi screens: sans-serif is better. Why did browsers settle
* on serif being the default??*/
font: 110%/1.5 sans-serif;
/* WCAG recommends a max line width. Not everyone can resize the
* viewport. TODO: see if this should be reduced.
* Aligning to the center with space on both sides prevents accidental
* link activation on mobile devices.*/
margin: auto; margin: auto;
max-width: 45em; max-width: 48em;
padding: 0 3%; padding: 0 3%;
} }
/* narrow screens: no margin for blockquotes and figures */ .e-content {
max-width: 40em;
}
/* narrow screens: reduce margin for blockquotes a lot, using
* a thick left-side border instead. */
blockquote { blockquote {
border-left: 6px solid #bbb; border-left: 6px solid #bbb;
margin-left: 0; margin-left: 0;
padding-left: 1em; padding-left: 1em;
} }
/* narrow screens: remove figure margin. */ /* narrow screens: remove unused figure margin. */
figure { figure {
margin: 0; margin: 0;
} }
/* nav links should be easy to tap with fat fingers */ /* Mobile optimization: nav links are tappable with fat fingers */
.unstyled-list li,
nav li { nav li {
padding-right: 0.5em; margin-bottom: 0.5em;
} }
/* Lists without bullets: navlinks, posts lists, webmentions */ /* Lists without bullets: navlinks, posts lists, webmentions.
* Those three are lists whose items are already easily distinguishable,
* rendering bullet points as unnecessary extra visual noise. */
.unstyled-list { .unstyled-list {
padding-left: 0; padding-left: 0;
} }
.unstyled-list li { .unstyled-list li {
list-style-type: none; list-style-type: none;
margin-bottom: 0.5em;
} }
/* single-line nav on widescreen, multi-line nav on narrow screens */ /* single-line nav on widescreen */
@media (min-width: 32em) { @media (min-width: 32em) {
nav li { header nav li {
display: inline; display: inline;
padding-right: 0.5em;
} }
} }
@ -98,17 +119,34 @@ pre {
/* Distinguish images from the background in case their color is /* Distinguish images from the background in case their color is
* too similar to the page background color. Also put a border around * too similar to the page background color. Also put a border around
* <pre> so that it looks just like <code> (see below). */ * <pre> so that it looks just like <code> (see below). The use of
* borders in place of background colors for distinguishing elements
* is an officially documented WCAG technique. */
img, img,
pre, pre,
:not(pre) > code { :not(pre) > code {
border: 1px solid #bbb; border: 1px solid #bbb;
} }
/* center images that aren't my indieweb icon */ /* center images that aren't my indieweb icon; same justification as
* for centering the body contents. */
img:not(.u-photo) { img:not(.u-photo) {
display: block; display: block;
height: auto; height: auto;
margin: auto; margin: auto;
max-width: 100%; max-width: 100%;
} }
/* Todo:
* - Some browsers don't scale SVGs properly; the img container
* dimensions crop the image rather than scale it. Investigate
* if this only applies to Internet Explorer or if it applies to
* other uncommon browsers too. If any non-IE browsers do this and/or
* if the spec allows this behavior, try to correct it here.
* - Investigate reduced-contrast for dark mode
* - Wait till Webkit fixes its broken-ass default dark stylesheet
* then consider trimming the dark stylesheet I provide.
* - Narrow screen optimization for bullet indents.
* - Investigate CSS-based hints to screenreaders.
* - See if any "-left" properties should switch to "-right" for users
* who machine-translate the page to a RTL language. */

View file

@ -68,7 +68,8 @@ posts = "/:year/:month/:day/:filename"
unsafe = true unsafe = true
[markup.tableOfContents] [markup.tableOfContents]
ordered = true ordered = false
endLevel = 2
# lifted from https://git.sr.ht/~sircmpwn/drewdevault.com # lifted from https://git.sr.ht/~sircmpwn/drewdevault.com
[mediaTypes] [mediaTypes]

View file

@ -1,4 +1,6 @@
<aside id="toc"> <aside>
<h4>Table of Contents</h4> <details>
{{ .Page.TableOfContents }} <summary id="toc">Table of Contents</summary>
{{.Page.TableOfContents}}
</details>
</aside> </aside>