/* ========================================================================== NOFONT โ€” the brand layer for nofont.com -------------------------------------------------------------------------- One file for both halves of the site: Skrivr's Nofont Twentysix theme (start page, Journal, posts, static pages) and nofont-work (/work, /photography). nginx serves /assets/ from nofont-work on www.nofont.com, so both link the same URL, /assets/brand/nofont.css. Locally, staging Skrivr forwards /assets/ to nofont-work.local (txtpilot2023/.htaccess). Load order, on both sites: 1. nofont-design-system css/foundation.css structure, no looks 2. this file tokens, type, paint 3. the site's own CSS theme.css / work.css layout only The design system stays brand-free: everything here is a token override or a paint rule on a class the system or the shared partials already have. Nothing here adds layout a page could not do without it. Source of truth: Figma, "Nofont.com", section "nofont.com 2026 ยท from code (nds 2.0.0)". Variable names there carry their CSS name. Contents 1. Fonts 2. Tokens ............ colour, type, components 3. Type .............. body, the heading ramp, links, code 4. Components ........ paint on system components 5. Site header ....... nav.html (shared) 6. Site footer ....... site_footer.html (shared) 7. Pages ............. the start page, category titles, /work rows ========================================================================== */ /* ========================================================================== 1. FONTS -------------------------------------------------------------------------- Safiro, Nofont's webfont licence (the kit bought for Bartend). Roboto Mono is SIL OFL, from Fontsource. Self-hosted, woff2 only. SemiBold (600) is what the design uses for headings. Its woff2 is in Dropbox: Nofont projects/Bartend/Design and branding/Typografi/Safiro Complete Webfont/Webfont Kit/safiro web/. Copy safiro-semibold-webfont and safiro-semibolditalic-webfont into fonts/ and uncomment the two faces below. Until then a 600 resolves to Bold, the nearest heavier face. ========================================================================== */ @font-face { font-family: "Safiro"; src: url("fonts/safiro-regular-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Safiro"; src: url("fonts/safiro-regularitalic-webfont.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* @font-face { font-family: "Safiro"; src: url("fonts/safiro-semibold-webfont.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Safiro"; src: url("fonts/safiro-semibolditalic-webfont.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } */ @font-face { font-family: "Safiro"; src: url("fonts/safiro-bold-webfont.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Safiro"; src: url("fonts/safiro-bolditalic-webfont.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url("fonts/roboto-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto Mono"; src: url("fonts/roboto-mono-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 2. TOKENS -------------------------------------------------------------------------- The system's own tokens (tokens.css) overridden, plus the few the brand adds. Spacing, container, section and drawer already match the design (1200 container, 48 gutter at desktop, 96 section, 352 drawer), so they are not repeated here. ========================================================================== */ :root { color-scheme: dark; /* Colour. Dark is the default; the design has no light mode yet. */ --paper: #121212; --ink: #ffffff; --color-border: rgb(255 255 255 / 0.15); --color-link: #acb38d; /* links in menus and running text */ --color-passive: #727757; /* the footer's ridge */ /* The badge's own #d3dab0 is in img/nofont-badge.svg. */ /* Type. 16/22 body, 12/18 small, a 1.25 heading ramp. */ --font-body: "Safiro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --line-height: 1.375; --text-small: 0.75rem; --line-height-small: 1.5; --weight-heading: 600; --text-h1: clamp(2.25rem, 1.5rem + 2.5vw, 3.0625rem); /* 49/56 */ --text-h2: clamp(1.875rem, 1.4rem + 1.5vw, 2.4375rem); /* 39/48 */ --text-h3: 1.9375rem; /* 31/40 */ --text-h4: 1.5625rem; /* 25/32 */ --text-h5: 1.25rem; /* 20/28 */ --leading-h1: 1.143; --leading-h2: 1.231; --leading-h3: 1.29; --leading-h4: 1.28; --leading-h5: 1.4; /* Components */ --logo-h: 2rem; } /* The system ships the browser's colours on an inverted band; the brand swaps its own pair instead. */ .c-section--inverse { --ink: #121212; --paper: #ffffff; } /* Element defaults join the system's own base layer and the component paint joins its components layer. Inside a layer, specificity decides as usual, so a system modifier (c-button--inverse, c-button--bare) still beats the brand's plain .c-button, and the site's own unlayered CSS beats both. Written unlayered, every rule here would flatten those modifiers. */ @layer nofont.base { /* ========================================================================== 3. TYPE ========================================================================== */ html { background: var(--paper); color: var(--ink); } h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-heading); } h1 { font-size: var(--text-h1); line-height: var(--leading-h1); } h2 { font-size: var(--text-h2); line-height: var(--leading-h2); } h3 { font-size: var(--text-h3); line-height: var(--leading-h3); } h4 { font-size: var(--text-h4); line-height: var(--leading-h4); } h5 { font-size: var(--text-h5); line-height: var(--leading-h5); } h6 { font-size: 1rem; } small, .u-textSmall { line-height: var(--line-height-small); } /* Links are the olive; a link that is a heading or a card title keeps the heading's ink and loses the underline. */ a { color: var(--color-link); } :is(h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } } code, kbd, samp, pre { font-family: var(--font-mono); } pre { padding: var(--space-2); border: var(--border-width) solid var(--color-border); font-size: var(--text-small); line-height: var(--line-height-small); white-space: pre-wrap; } } @layer nofont.components { /* ========================================================================== 4. COMPONENTS ========================================================================== */ /* --- Group title: 12/18 bold, tracked, in ink ------------------------------ */ .c-groupTitle { line-height: var(--line-height-small); color: var(--ink); & a { color: inherit; } } /* --- Button: 12px side padding, 16/22 ------------------------------------- */ .c-button { padding-inline: 0.75rem; line-height: var(--line-height); color: var(--ink); } /* --- Filter pill: 16px sides, 32 high ------------------------------------- */ .c-filter .c-filter__pill { padding-inline: 1rem; line-height: var(--line-height-small); } /* --- Badge: 8px sides --------------------------------------------------------- */ .c-badge { padding: 0.125rem 0.5rem; line-height: var(--line-height-small); } /* --- Card --------------------------------------------------------------------- The meta row sits flush with the media, in mono; the media starts 8px under it. The title is the h5 step whatever its level (h2 in Skrivr's categories, h3 on /work), and the body is ink, not link colour. */ .c-card { & .c-card__meta { padding-inline: 0; font-family: var(--font-mono); line-height: var(--line-height-small); } & .c-card__meta + .c-card__media { margin-block-start: var(--space-1); } & .c-card__logo { padding-inline: 0; } & .c-card__logo + .c-card__media { margin-block-start: var(--space-3); } & .c-card__body :is(h2, h3, h4) { font-size: var(--text-h5); line-height: var(--leading-h5); } } /* --- Facts: semibold labels, a 160px label column ----------------------- */ .c-facts { --facts-gap: var(--space-1) var(--space-3); &:not(.c-facts--rows) { grid-template-columns: 10rem 1fr; } & dt { font-weight: var(--weight-heading); } } /* --- Figure: the caption under the image is small ------------------------- */ .c-figure figcaption, .c-figure .c-figure__caption { font-size: var(--text-small); line-height: var(--line-height-small); } /* ========================================================================== 5. SITE HEADER โ€” nav.html, shared by Skrivr and nofont-work -------------------------------------------------------------------------- The badge centred over the menu button: 48 above, 16 under. ========================================================================== */ .siteHeader { padding-block: var(--space-6) var(--space-2); & .siteHeader__home img { width: 5.8rem; height: auto; } & .siteHeader__menu svg { width: 1.25rem; height: auto; } } /* --- The drawer ---------------------------------------------------------------- 32 around and between groups, 16 from a title to its links, 4 between links. Menu links are olive and undecorated; the current page is ink. */ #menu { background: var(--paper); color: var(--ink); & .c-drawer__body { padding: var(--space-4); } /* c-flow reads --flow-space on the child, so the gap between groups is set as a margin: the groups set their own, tighter flow inside. */ & .siteNav { margin-block-start: var(--space-4); & > * + * { margin-block-start: var(--space-4); } & section { --flow-space: var(--space-2); } } } :is(.siteNav, .siteFooter) ul { display: grid; gap: 0.25rem; & a { text-decoration: none; &:hover { text-decoration: underline; } &[aria-current="page"] { color: var(--ink); } } } /* ========================================================================== 6. SITE FOOTER โ€” site_footer.html, shared by Skrivr and nofont-work -------------------------------------------------------------------------- The ridge over three compact columns, centred. 56 from the ridge to the columns, 16 from a title to its links. ========================================================================== */ .siteFooter { --flow-space: var(--space-7); & .siteFooter__ridge { width: min(100%, 38.875rem); height: auto; margin-inline: auto; color: var(--color-passive); } /* Compact columns, the block centred: on a phone they stack, and the stack sits centred under the ridge with its text still flush left. */ & .siteFooter__columns { width: fit-content; max-width: 100%; margin-inline: auto; & > section { --flow-space: var(--space-2); } } & .siteFooter__icon { display: inline-block; width: 1rem; height: 1rem; margin-inline-end: 0.5rem; vertical-align: -0.125rem; color: var(--ink); } & .siteFooter__legal { text-align: center; } } /* ========================================================================== 7. PAGES -------------------------------------------------------------------------- Paint for the few page classes the two sites own. Their layout stays in the site's CSS; only the looks are here. ========================================================================== */ /* Skrivr start page: the latest post, centred over its image. */ .latestPost { & .latestPost__text { --flow-space: var(--space-2); } & .latestPost__date { font-family: var(--font-mono); } & h1 { max-width: 15ch; margin-inline: auto; } & .latestPost__image { display: block; width: min(100%, 33.5rem); } } /* Skrivr category pages: a title, or a drawn wordmark (Journal). */ .pageTitle img { display: inline-block; width: min(100%, 18.5rem); height: auto; } /* nofont-work /work index: an empty thumb is a grey square, and the client name is ink, like a card title. */ .workRow .workRow__thumb { background: var(--color-border); } .workRow a { color: var(--ink); text-decoration: none; &:hover { text-decoration: underline; } } }