Appearance on OINK

Typography presets

Mon, 01 Jan 0001 00:00:00 +0000

OINK puts font choices behind seven semantic CSS custom properties. A site overrides those roles to change typography, without needing to know which selectors the theme uses internally.

Hugo compiles the whole mechanism into the same static stylesheet at build time: no JavaScript, no remote font service, and no runtime preset loader.

Two built-in presets

params:
  ui:
    typography:
      preset: technical # technical | system

Preset	Effect
`technical`	The default. Preserves the Chakra Petch and IBM Plex Mono treatment, with all font files bundled locally
`system`	Resets the display, metadata, print, and monospace roles to platform stacks and requests no OINK brand fonts

The selected value is emitted as data-td-typography on <html>. An unsupported value fails the build rather than silently changing the site.

Look and feel

Mon, 01 Jan 0001 00:00:00 +0000

OINK ships a complete visual system built on Bootstrap and Docsy, with local fonts, icons, styles, and browser code. A consuming site can change tokens and project styles without rebuilding a Node dependency tree.

Project styles

Hugo Extended compiles the theme’s SCSS through Hugo Pipes. Project overrides participate in the same bundle, so production builds can minify, fingerprint, and integrity-check one same-origin stylesheet.

Project style files

Override these files in the site’s assets/scss/ directory:

Advanced customization

Mon, 01 Jan 0001 00:00:00 +0000

OINK provides a small, layered customization contract instead of requiring a site to copy component selectors or fork the theme. Everything still passes through Hugo Extended and Hugo Pipes: no Node.js, npm, PostCSS, remote font service, or client-side preset loader is required.

This page documents the supported extension points and the first public semantic-token slice: typography. For general color-mode, code-highlighting, navbar, and template examples, see Look and feel.

Choose the right layer

Use the highest-level interface that can express the change:

Appearance

Mon, 01 Jan 0001 00:00:00 +0000

OINK’s appearance customization rests on semantic CSS custom properties: a site overrides a small number of variables to reskin, without copying the theme’s component selectors.

In this chapter

Typography presets: seven semantic font roles and two presets
Styling: colors, layout, and Sass variables
Advanced customization: template overrides and site-owned components

Precedence

Lowest to highest:

theme defaults
presets (typography.preset)
Sass variables in _variables_project.scss
custom-property overrides in _styles_project.scss

Site settings always take precedence over preset defaults.