jsaumer / homepage

# Carte Noir
A printed-menu theme for Homepage: one page, three columns, every
service set as a line on a menu with a dotted leader to its status, and its figures underneath in
small type. Dark paper, brass accents, the Spectral typeface, a dated masthead with a three-day
weather outlook, and a closing line that tells you whether everything is up.
It is a full re-layout done in `custom.css` and `custom.js`, so it needs no fork of Homepage. There are
no image files: the lamp-glow background is CSS, and the service icons come from Homepage's icon CDN.
*The demo services with made-up figures. First shared in a
Dashboard Wednesday thread on r/selfhosted.*
## How this was made
This theme was built with Claude, Anthropic's AI model (Claude Opus 5.5), working in Claude Code.
I set the direction: I asked for new layouts, picked the printed-menu design from Claude's mockups,
chose the variations, typeface and details, and tried each change on my own dashboard. Claude wrote
the code: the CSS and JavaScript, the widget configuration, the demo services and mock data, and most
of this README.
## Fork it
I built this for my own dashboard and may not update it often, so please fork it and make it your
own rather than waiting on changes here. Pull requests are welcome, but I can't promise a quick reply.
The demo widgets read their figures from `demo/mock.json` in this repository. If you change those
figures in your fork, point the `mock.json` links in `services.yaml` at your fork.
## What's here
| File | What it does |
|---|---|
| `custom.css` | The whole theme |
| `custom.js` | Masthead (date and Open-Meteo weather), closing line, spelled-out durations, sizes in GB/TB |
| `settings.yaml` | Settings the theme relies on, and the group order that makes the columns |
| `services.yaml` | 46 demonstration services across the nine sections. Runs as is with made-up figures; each widget's real configuration sits beside it as a comment |
| `demo/mock.json` | The made-up figures the demo widgets read |
| `widgets.yaml` | Empty on purpose: the masthead replaces Homepage's information widgets |
| `bookmarks.yaml` | Example "Elsewhere" bookmarks group |
Built on Homepage v2.5.0 and checked in Chromium at desktop, tablet and phone widths. It uses CSS
`:has()`, so it needs a browser from 2023 or later.
## Install
1. Copy `custom.css` and `custom.js` into your Homepage config folder (the one mounted at `/app/config`).
 Empty your `widgets.yaml` too (or use the one here), or Homepage's resource and search widgets sit
 above the title.
2. Merge these into your `settings.yaml`. The theme expects them:
 [code] 
3. List **every** group in `layout:` in `settings.yaml`. That order fills the columns top to bottom,
 left to right. Bookmark groups can be mixed in.
4. Reload the page. Homepage picks up config changes without a restart.
## Try the demo
Drop all five YAML files plus `custom.css` and `custom.js` into an empty config folder and the page
fills with made-up figures straight awa