Add lead shortcode; make banner a full-bleed hero image

- lead: wraps content in a Bootstrap .lead paragraph (moved from the
  ctsmockup site, where {.lead} could not target a paragraph).
- banner: resolves src as a page/global resource or base-URL-aware
  link, and spans the full viewport width via symmetric
  calc(50% - 50vw) margins while page content stays in .container.
  Optional height crops via object-fit: cover. A banner that starts a
  page's content is pulled flush against the navbar.
- html { overflow-x: hidden } to absorb the 100vw scrollbar overhang.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-02 09:53:20 +02:00
co-authored by Claude Sonnet 5
parent 55308f7703
commit ec9cba0555
4 changed files with 91 additions and 5 deletions
+31
View File
@@ -3,6 +3,37 @@
Simple Bootstrap-based theme for Hugo.
## Shortcodes
### `lead`
Wraps its content in a Bootstrap `.lead` paragraph (the Markdown
attribute syntax `{.lead}` cannot target a paragraph):
```
{{< lead >}}
An introductory paragraph that stands out.
{{< /lead >}}
```
Pass extra classes with `class`, e.g. `{{< lead class="mb-5" >}}`.
### `banner`
A full-bleed banner / hero image: it spans the entire viewport width
while the rest of the page stays within `.container`. Put it on the
first line of a page's content to get a hero flush against the navbar.
```
{{< banner src="hero.png" alt="…" >}}
```
`src` is resolved as a page resource first, then a global resource
(`assets/`), then as a plain link respecting the site's base URL.
Optional params: `title`, `height` (a CSS length such as `60vh`, which
crops the image with `object-fit: cover`) and `class`.
## Custom error page
The theme has a custom 404 error page.