- A completed task
- A task still to do
Components
A living specimen of the website’s shared styles, rendered with the same CSS as the rest of the site. This page is built from Markdown and HTML; class names beside the examples make them easier to reuse. Return to the colophon.
Jump to: Typography · Lists · Quotes and messages · Code and tables · Tags · Post elements · Notes · Navigation and layouts.
Typography
An introductory paragraph using .lead, set in PT Sans.
Body text uses Latin Modern. Here are strong emphasis, italic emphasis, an ordinary link, inline code, and an SSG abbreviation. There is also small text, a superscript x2, and a subscript H2O.
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Lists
- An unordered list item
- Another item with a nested list
- A nested item
- An ordered list item
- A second step
- Definition term
- A definition with the spacing provided by the base stylesheet.
- Another term
- Definitions can contain links too.
Task lists use .task-list-item-checkbox inside .post.
Quotes and messages
A quotation gets a large opening quote, a shaded background, and a left border. — A sample citation using <cite>
Code and tables
Inline code: uv run python3 generate_me.py.
# Fenced code blocks use syntax highlighting.
def greet(name):
return f"Hello, {name}!"
print(greet("reader"))
A plain preformatted block:
Content/components/index.md
→ docs/components/index.html| Element | Purpose | Example |
|---|---|---|
| Heading | Organize content | h2 |
| Link | Connect pages | a |
| Tag | Group related posts | .tag-pill |
Math is rendered by the Markdown generator: .
Tags
Regular .tag-pill links:
Large pills (.tag-pill-lg) and counts (.tag-count) in a wrapping .tag-cloud. Counts below are specimen values.
Post elements
The following specimen uses .post, including its paragraph spacing, indentation, headings, links, and ornamental horizontal rule.
Sample category · .post-kicker
A sample post title
The post header combines a kicker, title, metadata, and a decorative divider. This paragraph shows the reading column and post link styling.
A second paragraph demonstrates the first-line indent used in longer articles.
A subsection within a post
Headings give the next thought a little breathing room.
An ornamental rule separates passages within a post.
The older date style is available as .post-date:
Post endings use .post-end-illustration:
Notes
A numbered sidenote uses .sidenote-number, .sidenote-toggle, and .sidenote. On smaller screens, select the number to show or hide the note.
A sentence with a sidenoteThis note sits in the margin on wide screens and opens inline on smaller screens. continues here.
An unnumbered margin noteThe .left modifier places a note in the left margin on wide screens. uses the same toggle pattern.
Footnote text can use .footnotes; the alternate definition style uses .footnote-definition.
A sample footnote reference1.
A small, left-aligned footnote with a return link.
2
An alternate footnote definition.
Navigation and layouts
The .post-list adds a small leaf ornament to each entry. Hover over an entry to see its motion.
- Browse the archive
- A sample post description and metadata list.
- Browse by tag
Related entries use .related and .related-posts:
Pagination uses .pagination and .pagination-item, with a span for an unavailable direction:
The legacy masthead styles are .masthead, .masthead-title, and a small subtitle:
Navan’s Archive A sample subtitle
The surrounding page demonstrates .paint, .content.container, and the responsive .sidebar, .sidebar-about, .sidebar-nav, .sidebar-nav-item, and .copyright. The sidebar’s motto and the quill in the margin are enhanced by JavaScript.
The 404 page demonstrates the full .error-hero composition: .error-copy, .error-description, .error-link, and .error-illustration-wrap with .error-illustration. Its decorative .error-divider is also shown in the post specimen above.
Layout options in the theme include .layout-reverse for a right sidebar, .sidebar-sticky for bottom-aligned sidebar content, and .theme-base-08 through .theme-base-0f for sidebar and link colors. The current site uses .theme-base-0d; .libertinus switches the body typeface. These are whole-page options, rather than individual content components.
Interactive post demos can use .demo-container inside .post to keep wide content scrollable within the column:
A scrollable demo container → content stays within the reading column even when a line is much wider than the available screen width.Small footer text using .copyright. Styles come from /assets/c-hyde.css and /assets/main.css.