- 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>
47 lines
1.2 KiB
Markdown
47 lines
1.2 KiB
Markdown
# hugo_bootstrap_theme
|
|
|
|
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.
|
|
|
|
If the site has an SVG image in `assets/svg/404.svg`,
|
|
this image will be displayed instead of a generic 404
|
|
code. Regardless of whether an SVG assets exists or not,
|
|
English and German explanations of what's going on will
|
|
be included on the page.
|
|
|