53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
# TooraSt-wikijs
|
|
|
|
**Vodafone-inspired design system for a household Wiki.js knowledge base.**
|
|
|
|
A bright, light-theme design system for a self-hosted Wiki.js instance that documents the household — entertainment, lighting, kitchen, garden, pets, and laundry. Everything about how the home works, what it uses, and how to fix it.
|
|
|
|
## What it is
|
|
|
|
A complete Wiki.js theme built on Vodafone's design language: white canvas, signature scarlet-red CTAs, near-black ink surfaces, and impossibly heavy weight-800 uppercase display type. The typographic story is the brand — a shout, then a calm sentence.
|
|
|
|
## Design system
|
|
|
|
| Token | Value | Role |
|
|
|-------|-------|------|
|
|
| Primary | `#e60000` | Vodafone Red — CTAs, accents |
|
|
| Ink | `#25282b` | Nav, hero band, footer, headings |
|
|
| Canvas | `#ffffff` | Light content background |
|
|
| Canvas soft | `#f2f2f2` | Chips, cards |
|
|
| Body | `#7e7e7e` | Secondary text |
|
|
| Display font | Inter (800/300) | Uppercase hero, weight-800 stencil |
|
|
| Radius | 60px pill / 6px card | Signature button geometry |
|
|
|
|
**Principles:** a single accent color, polarity-flip surfaces (dark hero → light content → dark footer), pill buttons on every CTA, no drop shadows — depth via surface contrast.
|
|
|
|
## Repository structure
|
|
|
|
```
|
|
├── DESIGN.md # Vodafone design tokens (full system)
|
|
├── toora-global.css # Global stylesheet injected via Wiki.js theme config
|
|
└── create-toora-pages.py # GraphQL script — creates household section pages
|
|
```
|
|
|
|
## Deployment to Wiki.js
|
|
|
|
1. **Inject the theme:** in Wiki.js admin → *Theme*, set custom head HTML to wrap `toora-global.css` in a `<style>` tag. Keep dark mode **off**.
|
|
2. **Create pages:** run `create-toora-pages.py` (requires admin JWT) to create: Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry.
|
|
3. **Configure navigation:** the script pairs with the sidebar tree — Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry.
|
|
|
|
## Architecture patterns
|
|
|
|
- **Design-token driven** — CSS custom properties centralize the full Vodafone system
|
|
- **Band rhythm** — alternating dark/light content bands for visual hierarchy
|
|
- **Component library** — reusable `.vf-*` classes (buttons, cards, badges, nav, hero bands)
|
|
- **API-first deployment** — full setup via Wiki.js GraphQL, reproducible
|
|
|
|
## Tech
|
|
|
|
Wiki.js 2.x · GraphQL API · CSS custom properties · Inter (Google Fonts) · Python (deployment scripts)
|
|
|
|
---
|
|
|
|
*Part of a homelab documentation ecosystem — see also [SamsTechnical-wikijs](https://gitea.lab.audasmedia.com.au/sam/SamsTechnical-wikijs).*
|