lobee.ca · Documents
📄 HTML Library
Live components from lobee.css. New blog posts: use tools/post-generator locally (run-gui.bat), then add a card to blogs.html. All posts use article.post + div.prose like existing blogs.
Site header
Fixed bar: site-header, site-header__link, site-header__toggle. Set aria-current="page" on the active link (blue 3D pill). Theme toggle uses the same 3D surface as cards and buttons.
Feed cards
List rows on index, blogs, documents, and fishing. Use feed-card--featured for the accent pill; feed-card--muted on a div for disabled rows.
Card blocks
Rich grid cards — optional pattern when you need a taller tile with a CTA line.
🎴 Card title
One or two short sentences of description.
View📌 Another card
Equal height inside card-grid.
🔗 Third card
1 column mobile, 2 tablet, 3 desktop.
ViewBack button
Post pages place this above the title, linking to the parent section.
← DocumentsContact chips
About page copy buttons — btn-back contact-chip with data-copy-text.
Raised panel
Home page widgets use index-panel (raised) and surface-3d-inset (pressed).
Panel label
Raised 3D surface — same chrome as nav buttons.
Prose (posts)
Article body on blog posts, about, and template pages.
Section heading
Body text with comfortable line height. Matches april-check-in.html and other posts.
Italic note — often placed above a list.
- List item one
- List item two
An inline accent link inside prose.
Colour tokens
Token reference
| Token | Purpose |
|---|---|
--color-canvas | Page background |
--color-text | Primary text |
--color-text-muted | Descriptions, prose body |
--color-accent | Links, hover borders, featured surfaces |
--btn-3d-* | Shared 3D gradient, depth, frame (nav + cards + buttons) |
--header-h | Fixed header height (56px) |
--space-1 … --space-20 | Spacing scale |
--radius-md | Default control corner radius |