Reference on first-folio.demo.lobb.ie

Shortcode Showcase

Mon, 01 Dec 2025 00:00:00 +0000

This page demonstrates every shortcode available in the First Folio theme. Use it as a visual reference.

Callout

Four built-in types plus custom styling:

Tip
This is a tip callout — use it for helpful suggestions.

Info
This is an info callout — use it for informational notes.

Alert
This is an alert callout — use it for critical information.

Warning
This is a warning callout — use it for cautionary notes.

Buy Now
Available worldwide

Custom Callout
This callout has a custom title and background colour.

With float positioning:

Navigation and CTA Features

Sat, 15 Nov 2025 00:00:00 +0000

This page demonstrates the navigation features of the First Folio theme.

The breadcrumb trail appears automatically on article pages, showing the section path, author, and date. It uses purple accents for sections and orange for metadata.

Control it with frontmatter:

breadcrumb: false — hide on article pages (default: true)
breadcrumb_list: true — show on list/section pages (default: false)
hideAuthor: true — omit author segment
hideDate: true — omit date segment

Signpost CTA

The signpost bar appears below the banner/hero image. Configure it in frontmatter:

Typography in the First Folio Theme

Tue, 01 Jul 2025 00:00:00 +0000

This post demonstrates how standard Markdown typography renders in the First Folio theme. Use it as a reference when writing content.

Headings

Headings from H2 to H6 are available. H1 is reserved for the page title.

Third Level

Fourth Level

Fifth Level

Sixth Level

Text Formatting

Regular paragraph text. Bold text for emphasis. Italic text for subtlety. ~~Strikethrough~~ for corrections. Inline code for technical terms.

Blockquotes are useful for highlighting important passages or attributing quotes to their sources.

The Featured Image Layout

Sun, 01 Jun 2025 00:00:00 +0000

The featured layout places the article’s image prominently within the content flow. Unlike the banner or hero layouts, the image does not span the full viewport width — it sits within the content column, scaled to fit.

When to Use Featured

This layout suits articles where the image is important but not the primary focus. The image appears after the title and metadata, before the body text — a natural reading order.

Configuring Dark Mode

Tue, 20 May 2025 00:00:00 +0000

The theme supports four dark mode strategies, configured via params.mode in your hugo.yaml.

Mode Options

`auto` (recommended)

Follows the operating system preference using prefers-color-scheme: dark. When the user switches their OS to dark mode, the site follows automatically.

params:
 mode: auto

`toggle`

Adds a toggle button in the header. Users can switch between light and dark mode regardless of their OS setting. Their preference is stored in localStorage.

params:
 mode: toggle

`dark`

Forces dark mode for all visitors.

How the Masonry Grid Works

Thu, 10 Apr 2025 00:00:00 +0000

The homepage and section list pages use a masonry grid — a layout where items of varying heights pack together without gaps, like a stone wall.

The Hybrid Approach

Pure CSS Grid gives us responsive columns but leaves vertical gaps. Pure JavaScript positioning is fragile on resize. The First Folio theme uses both:

CSS Grid handles the horizontal layout — responsive columns that reflow based on viewport width.
JavaScript runs after images load and adjusts vertical positioning to fill gaps.

This means the layout works (albeit with gaps) even when JavaScript is disabled.

The Background Image Layout

Thu, 20 Mar 2025 00:00:00 +0000

The background layout places the article’s image behind the content, with configurable opacity and blur. The text remains fully readable while the image provides atmosphere.

Controlling the Effect

Two parameters fine-tune the background:

opacity — how visible the image is (0.0 to 1.0). Lower values are more subtle.
blur — how much the image is blurred. Higher values create a softer, less distracting backdrop.

This page uses opacity: 0.15 and blur: 8px for a gentle wash of colour behind the text.

Reference on first-folio.demo.lobb.ie

Shortcode Showcase

Callout

Navigation and CTA Features

Breadcrumb Trail

Signpost CTA

Typography in the First Folio Theme

Headings

Third Level

Fourth Level

Fifth Level

Sixth Level

Text Formatting

The Featured Image Layout

When to Use Featured

Configuring Dark Mode

Mode Options

auto (recommended)

toggle

dark

How the Masonry Grid Works

The Hybrid Approach

The Background Image Layout

Controlling the Effect

`auto` (recommended)

`toggle`

`dark`