Style your page with CSS
A stylesheet of your own is applied after the page’s. These are the names it can hold on to and the rules it has to pass.
Write your rules over the page’s own.
In the app, open Page and then CSS. Your stylesheet sits in a later cascade layer than the page’s, so a rule of yours wins without a heavier selector. It may be 20 kB at most. Pricing lists the plans that include it.
Your stylesheet
body { --a: #1a4bff; --r: 0; }
.me h1 { letter-spacing: -0.03em; }
[data-widget="quote"] { border-top: 1px solid var(--l); padding-top: 2rem; }
@media (min-width: 60rem) {
body[data-layout="wide"] section h2 { font-size: 2.5rem; }
}Hold on to these selectors.
They keep their names from one release to the next. Any other class on the page may change.
| Selector | What it is |
|---|---|
body[data-layout="column"] | The page, in one column. "wide" is the other layout. |
body[data-align="left"] | The page, set to the left. "centre" is the other. |
main | Everything above the foot. |
.me | The head: picture, name, line and place. |
.me h1 | The name. |
.tag | The line under the name. |
.place | The place. |
[data-widget="about"] | A widget, by its kind. |
[data-widget="arrival"] | The strip a visitor sees when they came from one of your sites. |
section h2 | The title of a widget. |
.button | The contact button. |
footer | The foot of the page. |
Select a widget by its kind.
Every widget is a section that says its kind in data-widget. There are twelve kinds.
Kinds
[data-widget="about"] [data-widget="text"] [data-widget="links"] [data-widget="socials"] [data-widget="sites"] [data-widget="studies"] [data-widget="gallery"] [data-widget="video"] [data-widget="contact"] [data-widget="collaborators"] [data-widget="numbers"] [data-widget="quote"]
Set the properties the page is drawn from.
| Property | What it sets |
|---|---|
--g | Ground: the background. |
--i | Ink: the text. |
--a | Accent: the button and the live dot. |
--oa | The text on the accent. |
--d | Dimmed text. Set on body, mixed from ink and ground. |
--l | Lines and borders. Set on body. |
--s | A faint surface. Set on body. |
--r | The corner of cards, pictures and buttons. |
--ra | The corner of the picture at the head. |
--head | The typeface of headings. |
--body | The typeface of everything else. |
--hw | The weight of headings. |
--ht | The letter-spacing of headings. |
--w | The width of the page. |
Keep every file on the page’s own address.
The stylesheet is printed on a public page, and a request to another server would give that server your visitor’s address. A stylesheet that asks for one is refused whole, and the form says why. Each line below is refused.
- A file from another address
body { background: url(https://example.com/a.png); }- A set of images
body { background: image-set("a.png" 1x); }- An image by function
body { background: image("a.png"); }- An imported stylesheet
@import "other.css";- A typeface file
@font-face { font-family: Mine; }- A backslash escape
.me::after { content: "\201C"; }- The character <
.me::after { content: "<b>"; }- An expression
.me { width: expression(1); }- A binding
.me { -moz-binding: none; }- A behaviour
.me { behavior: none; }- A bracket with no partner
.me { margin: 0;- A comment left open
/* a note .me { margin: 0; }- A quoted string left open
.me::after { content: "a; }
Of the at-rules, @media, @supports, @container, @layer, @keyframes are accepted and every other is refused. Comments are taken out before the stylesheet is checked.
Leave the nods mark where it is.
Where a page carries “Made with nods” at its foot, the mark is held in a layer of its own, and a rule that hides, shrinks or recolours it has no effect.
Next, connect an assistant.