Compact Theme is a portable HTML, CSS, and JavaScript theme built with IBM Plex Sans and IBM Plex Mono. It includes light and dark palettes, compact layouts, responsive navigation, and readable code blocks. Consumer sites need no framework, package install, or build step.
- Distribution
- Files
- Install
- Theme behavior
- Code blocks
- Layout and palette
- Showcase
- Tests and compatibility
- Publishing
- Licence and attribution
Download the clean consumer bundle from the latest GitHub release. The current file is compact-theme-v1.0.0.zip.
The ZIP contains 11 public theme, documentation, font, and licence files. Tests, screenshots, package metadata, dependencies, and workflows appear only in GitHub's source archives. Future releases attach a new ZIP and SHA-256 checksum.
compact-theme.css: colours, typography, components, responsive rules, and code stylingcompact-theme.js: theme preferences, language labels, and code-copy controlsindex.html: complete component reference and GitHub Pages entry pointfonts/: bundled IBM Plex files and their SIL Open Font LicenseLICENSEandCOPYRIGHT.txt: BSD 2-Clause terms and attribution.nojekyll: prevents Jekyll processing when the repository is served directly
Copy the distribution into your site, keep fonts/ beside the stylesheet, and load the assets:
<link rel="stylesheet" href="/theme/compact-theme.css">
<script src="/theme/compact-theme.js" defer></script>Relative paths work for GitHub project Pages and nested sites. Use index.html as the semantic starting point.
The first visit follows the system colour preference. Add the persistent control anywhere in the page:
<button class="compact-theme-toggle" type="button" data-theme-toggle hidden>
Theme
</button>The script reveals the button and stores the choice in localStorage. Without JavaScript, the button stays hidden and the system palette still applies. Set data-theme="light" or data-theme="dark" on <html> to force a mode. Use data-theme-storage-key="my-site-theme" when several themes share one domain.
Semantic code markup receives a label and copy button:
<pre><code class="language-shell">npm install
npm test</code></pre>Labels cover Shell, JavaScript, TypeScript, HTML, CSS, JSON, Markdown, Python, and YAML. Override a label or leave a block untouched:
<pre data-code-label="Configuration"><code>theme: compact</code></pre>
<pre data-no-copy><code>This block receives no toolbar.</code></pre>The main layout classes are:
compact-shell: centred content widthcompact-header,compact-brand,compact-nav: header and navigationcompact-hero,compact-title,compact-lede: opening sectioncompact-section,compact-section-head,compact-section-title: content sectionscompact-grid,compact-card,compact-card-title: bordered card gridcompact-button,compact-button-primary: actionscompact-footer: footer
Base styles cover text, links, focus states, inline code, responsive media, and unenhanced pre elements. The shell grows from 1180px to 1360px on wide screens.
Override variables after the theme stylesheet:
:root {
--compact-accent: #82afff;
--compact-content-width: 1180px;
}
[data-theme="light"] {
--compact-accent: #315f9f;
}The GitHub Pages site is the live reference for components, theme behavior, responsive layouts, accessibility utilities, and code treatment.
For local review, serve this directory with any static file server and open index.html.
| Area | Coverage |
|---|---|
| Browsers and CI | Chromium, Firefox, and WebKit from Playwright 1.61.1; pinned Noble Linux container |
| Functional behavior | Local assets, fonts, theme persistence, labels, copy controls, fragments, and semantic landmarks |
| Layout and visuals | Responsive checks from 320 to 3440px; light and dark Chromium baselines on macOS and Linux |
| Accessibility | Axe in Chromium, Firefox, and WebKit; keyboard focus and semantic checks |
| JavaScript fallback | Content, system palette, and raw code checked with JavaScript disabled in all 3 engines |
| HTML | Live page checked by the W3C Nu validator |
| Packaging | Exact 11-file allowlist with development-file leak and symlink checks |
| Tool consistency | Playwright package, CI image, and Linux snapshot image must use the same exact version |
Install the development tools once, then run the complete suite:
npm install
npx playwright install chromium firefox webkit
npm testAfter an intentional visual change, review the page and update both baseline sets:
npm run test:update-snapshots
npm run test:update-snapshots:linuxThe Linux command requires Docker.
Pushes to main test, build, and deploy the allowlisted _site artifact. Pull requests test without deploying. Set GitHub Actions as the Pages publishing source.
Tags matching vMAJOR.MINOR.PATCH test and publish a clean ZIP with its SHA-256 checksum. The release workflow can also rebuild an existing tag manually.
The code, documentation, and example page use the BSD 2-Clause License. Redistribution must retain the copyright notice, conditions, and disclaimer in LICENSE.
Use this notice when referencing the theme:
Compact Theme — Copyright (c) 2026 Lila Brooks
Licensed under the BSD 2-Clause License.
The bundled IBM Plex files retain IBM's copyright and use the SIL Open Font License in fonts/LICENSE.txt.