Tangly v0.2 ships richer code blocks, page chrome, and more — see what's new

Pip

Minimal theme for tiny sites. Single column, topbar-only chrome, no sidebar.

~ 1 min read

Pip

Pip is the smallest theme. No sidebar. One topbar row holding logo + flat nav links + theme toggle. Single content column. Built for sites with 4–5 pages where a sidebar is overhead.

When to use it

  • A small project’s docs that’s barely more than a README.
  • A landing page + a few deep-link pages (changelog, license, contributing).
  • Internal tools where you want docs but not the full information-architecture treatment.

If your docs grew past ~6 pages, pip starts feeling sparse — switch to tang.

Set it

json
{ "theme": "pip" }

Token table

From packages/theme-pip/src/styles/theme.css:

Colors — light

TokenValue
--tangly-color-primary#16a34a (green)
--tangly-color-primary-light#22c55e
--tangly-color-primary-dark#15803d
--tangly-color-bg#ffffff
--tangly-color-bg-elevated#f7f7f5
--tangly-color-fg#18181b
--tangly-color-muted#71717a
--tangly-color-border#e4e4e7

Colors — dark

Near-black (#09090b), brighter green primary (#22c55e), zinc-tone hairlines.

Typography

TokenValue
--tangly-font-headingInter → system-ui → sans-serif
--tangly-font-bodyInter
--tangly-font-monoJetBrains Mono

Layout

TokenValueNotes
--tangly-sidebar-width0No sidebar.
--tangly-content-max-width42remNarrower than tang.
--tangly-toc-width0No TOC.
--tangly-topnav-row1-height3.5remSingle row — logo, links, toggle.
--tangly-topnav-row2-height0No tabs row.

Because there’s no sidebar, your navigation.tabs and navigation.groups collapse into the topbar:

json
{
  "theme": "pip",
  "navigation": {
    "tabs": [
      { "tab": "Docs", "groups": [...] },
      { "tab": "Changelog", "pages": ["changelog/v1"] }
    ]
  }
}

Tabs render inline. Within a tab, groups become a flyout menu.

Customizing

Same pattern as the other themes — colors, fonts, then theme/styles/theme.css for layout overrides.

css
:root {
  --tangly-content-max-width: 48rem;
}

Source

packages/theme-pip/src/styles/theme.css

Last updated Edit this page
↑↓ navigate open esc close