jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-19 01:07:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

styleguide

Browse Source
This commit is contained in:
Jaron
2026-08-25 22:33:31 -05:00
parent 6a34a90d11
commit 41e3031843
4 changed files with 662 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/writing/demo.md
-123
View File
@@ -1,123 +0,0 @@
---
title: Notes in the margin
date: 2026-08-22
description: Every mark this site knows how to make — body type, asides, notices, redaction, quotes, lists, code, and images.
hidden: true
---
This page is a working sample, not an essay. Walk it when you change type, color, or a content component. The **description** above is the article lead — bold, then the body.
Ordinary copy sits in the column. You can *emphasize*, **stress**, or [link out](https://jaronpate.com). A thought that does not belong in the sentence can sit beside it. :margin-note[(A margin note. Wide screens put it in the right gutter. Narrow screens drop it under the paragraph.)] Parentheticals you can actually skip.
## Headings
`h2` and `h3` share one italic, muted style. Use them as section marks, not display type.
### A third-level mark
Still the same size and color. Hierarchy is the word, not the weight.
## Margin notes
Two notes in one stretch of text, so you can see them stack.
The first is a mutter. :margin-note[(First note — should sit next to this sentence.)] A little later, a second one arrives. :margin-note[(Second note. On a wide screen these should not collide with the column.)] Between them the column keeps moving.
```md
:margin-note[(like this)]
```
## Notices
A notice interrupts on purpose. It stays in the column.
::notice
**In-column.** Use this when the aside *is* the point for a minute. Navy, hard to miss, still inside the measure.
::
```md
::notice
**In-column.**
::
```
And when it needs to break the column:
::notice{bleed}
**Bleed.** Same idea, edge to edge. Save it for the one time in a piece you actually want to shout.
::
```md
::notice{bleed}
**Bleed.**
::
```
## Redaction
A span can be set in Redaction. `strength` is a grade: `0` is the clean face, `100` is almost gone. Other numbers snap to `0`, `10`, `20`, `35`, `50`, `70`, or `100`. Default is `100`.
```md
:redacted[these words]{strength="50"}
```
Same phrase, every grade:
- 0 — :redacted[the record is still intact]{strength="0"}
- 10 — :redacted[the record is still intact]{strength="10"}
- 20 — :redacted[the record is still intact]{strength="20"}
- 35 — :redacted[the record is still intact]{strength="35"}
- 50 — :redacted[the record is still intact]{strength="50"}
- 70 — :redacted[the record is still intact]{strength="70"}
- 100 — :redacted[the record is still intact]{strength="100"}
Inline, mixed into a sentence: the filing names :redacted[a person we will not repeat]{strength="20"}, then later :redacted[almost nothing remains]{strength="100"}.
**Bold around** :redacted[a redacted span]{strength="50"} should pick Redaction Bold.
## Blockquote
The pointing hand sits in the gutter. Use it for a quote, or a line you want pointed at.
> The best sticking point is the way using the thing *feels*. Everything else is infrastructure.
## Lists
Unordered, for a pile of equals:
- Plantin for reading
- Space Mono for the wordmark, footer, and code
- Redaction only where you ask for it
Ordered, when sequence matters:
1. Write the sentence
2. Park the mutter in a margin note
3. Redact what should stay almost-said
## Code
Inline: the helper is `resolveRedactionStrength`, and the shortcode is `:redacted`.
A block:
```ts
const grade = resolveRedactionStrength(strength);
const family = redactionFamily(grade);
```
## Image
A figure in the column. This is an old Edlink shot, just to see the matte, radius, and caption line.
![Billing overview](/work/edlink/billing-overview.png "The billing screen")
The quoted title becomes the caption. Skip it and the image still sits in a figure, never wider than itself.
```md
![Billing overview](/work/edlink/billing-overview.png "The billing screen")
```
---
That’s the set. Margin for a mutter. Notice for a point. Redaction when the words should still be there, barely. Everything else is ordinary prose.