feat: add modern content and navigation primitives

assets/css/compiled/main.css

@@ -274,6 +274,9 @@
   .-start-6 {
     inset-inline-start: calc(var(--spacing) * -6);
   }
+  .-start-\[2\.1rem\] {
+    inset-inline-start: calc(2.1rem * -1);
+  }
   .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
     inset-inline-start: calc(max(-50vw, -800px) + 50%);
   }
@@ -292,6 +295,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
   .top-5 {
     top: calc(var(--spacing) * 5);
   }
@@ -427,6 +433,9 @@
   .my-8 {
     margin-block: calc(var(--spacing) * 8);
   }
+  .my-10 {
+    margin-block: calc(var(--spacing) * 10);
+  }
   .-ms-5 {
     margin-inline-start: calc(var(--spacing) * -5);
   }
@@ -1382,6 +1391,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-\[104px\] {
+    min-height: 104px;
+  }
   .min-h-\[130px\] {
     min-height: 130px;
   }
@@ -1805,6 +1817,10 @@
     border-block-style: var(--tw-border-style);
     border-block-width: 10px;
   }
+  .border-s {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+  }
   .border-s-0 {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 0px;
@@ -1855,9 +1871,18 @@
   .border-neutral-200 {
     border-color: rgba(var(--color-neutral-200), 1);
   }
+  .border-neutral-200\/80 {
+    border-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-200), 1), 1) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, rgba(var(--color-neutral-200), 1) 80%, transparent);
+    }
+  }
   .border-neutral-300 {
     border-color: rgba(var(--color-neutral-300), 1);
   }
+  .border-primary-200 {
+    border-color: rgba(var(--color-primary-200), 1);
+  }
   .border-primary-400 {
     border-color: rgba(var(--color-primary-400), 1);
   }
@@ -1975,6 +2000,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 50%, transparent);
     }
   }
+  .bg-neutral\/85 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 85%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 85%, transparent);
+    }
+  }
   .bg-primary-100 {
     background-color: rgba(var(--color-primary-100), 1);
   }
@@ -1999,6 +2030,9 @@
   .bg-white {
     background-color: #fff;
   }
+  .bg-white\/80 {
+    background-color: color-mix(in oklab, #fff 80%, transparent);
+  }
   .bg-linear-60 {
     --tw-gradient-position: 60deg;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -2180,6 +2214,9 @@
   .ps-5 {
     padding-inline-start: calc(var(--spacing) * 5);
   }
+  .ps-6 {
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
   .pe-2 {
     padding-inline-end: calc(var(--spacing) * 2);
   }
@@ -2549,12 +2586,19 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-4 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-primary-500\/20 {
     --tw-shadow-color: color-mix(in srgb, rgba(rgba(var(--color-primary-500), 1), 1) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, rgba(var(--color-primary-500), 1) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .ring-neutral {
+    --tw-ring-color: rgba(var(--color-neutral), 1);
+  }
   .ring-primary-500 {
     --tw-ring-color: rgba(var(--color-primary-500), 1);
   }
@@ -3004,6 +3048,9 @@
     .sm\:-top-80 {
       top: calc(var(--spacing) * -80);
     }
+    .sm\:top-5 {
+      top: calc(var(--spacing) * 5);
+    }
     .sm\:left-\[calc\(50\%-30rem\)\] {
       left: calc(50% - 30rem);
     }
@@ -3264,6 +3311,12 @@
   .dark\:border-neutral-700:is(.dark *) {
     border-color: rgba(var(--color-neutral-700), 1);
   }
+  .dark\:border-neutral-700\/80:is(.dark *) {
+    border-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-700), 1), 1) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, rgba(var(--color-neutral-700), 1) 80%, transparent);
+    }
+  }
   .dark\:border-neutral-800:is(.dark *) {
     border-color: rgba(var(--color-neutral-800), 1);
   }
@@ -3273,6 +3326,9 @@
   .dark\:border-primary-600:is(.dark *) {
     border-color: rgba(var(--color-primary-600), 1);
   }
+  .dark\:border-primary-900:is(.dark *) {
+    border-color: rgba(var(--color-primary-900), 1);
+  }
   .dark\:border-secondary-600:is(.dark *) {
     border-color: rgba(var(--color-secondary-600), 1);
   }
@@ -3357,6 +3413,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 60%, transparent);
     }
   }
+  .dark\:bg-neutral-800\/85:is(.dark *) {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 85%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 85%, transparent);
+    }
+  }
   .dark\:bg-neutral-900:is(.dark *) {
     background-color: rgba(var(--color-neutral-900), 1);
   }
@@ -3372,6 +3434,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 50%, transparent);
     }
   }
+  .dark\:bg-neutral-900\/80:is(.dark *) {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 80%, transparent);
+    }
+  }
   .dark\:bg-neutral-900\/99:is(.dark *) {
     background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 99%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3454,6 +3522,9 @@
   .dark\:opacity-60:is(.dark *) {
     opacity: 60%;
   }
+  .dark\:ring-neutral-800:is(.dark *) {
+    --tw-ring-color: rgba(var(--color-neutral-800), 1);
+  }
   .dark\:backdrop-brightness-95:is(.dark *) {
     --tw-backdrop-brightness: brightness(95%);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);

exampleSite/config/_default/params.toml

@@ -40,7 +40,7 @@ smartTOCHideUnfocusedChildren = false
 fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384", "sha256"
 
 [header]
-  layout = "fixed" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur
+  layout = "floating" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur, floating
 
 [footer]
   showMenu = true

exampleSite/content/_index.md

@@ -11,6 +11,12 @@ Blowfish gives you expressive layouts, thoughtful defaults, and practical conten
  
 {{< cta url="/docs/" label="Explore the docs" style="outline" >}}
 
+{{< stats >}}
+{{< stat value="5" label="Homepage layouts" >}}Choose the structure that suits the site you are making.{{< /stat >}}
+{{< stat value="40+" label="Shortcodes" >}}Compose expressive content without maintaining one-off templates.{{< /stat >}}
+{{< stat value="100%" label="Your content" >}}Portable Markdown, familiar Hugo configuration, and no lock-in.{{< /stat >}}
+{{< /stats >}}
+
 {{< feature-grid >}}
 {{< feature icon="list-check" title="Make it yours" url="/docs/configuration/" >}}
 A coherent system of layouts, colours, typography, and content controls.
@@ -23,7 +29,20 @@ Explore real sites, community contributions, and patterns that hold up in produc
 {{< /feature >}}
 {{< /feature-grid >}}
 
+## A theme that grows with your work
+
+{{< steps >}}
+{{< step number="1" title="Start with a strong foundation" >}}
+Pick a layout, set your colours and typography, then publish a useful first version.
+{{< /step >}}
+{{< step number="2" title="Build richer pages from content" >}}
+Use shortcodes for calls to action, feature grids, media, diagrams, tabs, and more.
+{{< /step >}}
+{{< step number="3" title="Keep evolving without rewrites" >}}
+Add what your site needs while keeping your content and configuration portable.
+{{< /step >}}
+{{< /steps >}}
+
 {{< alert "circle-info" >}}
 This homepage uses Blowfish's built-in `landing` layout and standard shortcodes. No custom homepage template is required.
 {{< /alert >}}
-

exampleSite/content/docs/configuration/index.md

@@ -226,7 +226,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 
 | Name | Default | Description |
 | --- | --- | --- |
-| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
+| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, `fixed-fill-blur`, `fixed-gradient`, and `floating`. |
 
 ### Footer
 

exampleSite/content/docs/shortcodes/index.md

@@ -1441,3 +1441,41 @@ Use `cta` for a clear, accessible call to action inside documentation, landing p
 {{< cta url="/docs/installation/" label="Start building" >}}
 &nbsp;
 {{< cta url="/docs/configuration/" label="Explore configuration" style="outline" >}}
+
+<br/><br/><br/>
+
+## Stats
+
+Use `stats` and `stat` to present concise, high-signal metrics in a responsive grid. The grid uses three columns on large screens by default, or four with `columns="4"`.
+
+```md
+{{</* stats */>}}
+{{</* stat value="40+" label="Shortcodes" */>}}Compose pages without bespoke templates.{{</* /stat */>}}
+{{</* stat value="100%" label="Portable" */>}}Keep your content in Markdown.{{</* /stat */>}}
+{{</* stat value="0" label="Required plugins" */>}}Start with Hugo and Blowfish.{{</* /stat */>}}
+{{</* /stats */>}}
+```
+
+{{< stats >}}
+{{< stat value="40+" label="Shortcodes" >}}Compose pages without bespoke templates.{{< /stat >}}
+{{< stat value="100%" label="Portable" >}}Keep your content in Markdown.{{< /stat >}}
+{{< stat value="0" label="Required plugins" >}}Start with Hugo and Blowfish.{{< /stat >}}
+{{< /stats >}}
+
+<br/><br/><br/>
+
+## Steps
+
+Use `steps` and `step` for onboarding, processes, roadmaps, and tutorials.
+
+```md
+{{</* steps */>}}
+{{</* step number="1" title="Configure the theme" */>}}Choose a colour scheme and homepage layout.{{</* /step */>}}
+{{</* step number="2" title="Write your content" */>}}Use standard Markdown and shortcodes.{{</* /step */>}}
+{{</* /steps */>}}
+```
+
+{{< steps >}}
+{{< step number="1" title="Configure the theme" >}}Choose a colour scheme and homepage layout.{{< /step >}}
+{{< step number="2" title="Write your content" >}}Use standard Markdown and shortcodes.{{< /step >}}
+{{< /steps >}}

layouts/partials/header/floating.html

@@ -0,0 +1,6 @@
+<div class="min-h-[104px]"></div>
+<header class="fixed inset-x-0 top-3 z-100 px-3 sm:top-5 sm:px-6">
+  <div class="mx-auto max-w-7xl rounded-2xl border border-neutral-200/80 bg-neutral/85 px-3 shadow-lg shadow-neutral-950/5 backdrop-blur-xl dark:border-neutral-700/80 dark:bg-neutral-800/85">
+    {{ partial "header/basic.html" . }}
+  </div>
+</header>

layouts/shortcodes/stat.html

@@ -0,0 +1,7 @@
+{{ $value := .Get "value" | default "0" }}
+{{ $label := .Get "label" | default "Metric" }}
+<div class="rounded-2xl border border-neutral-200 bg-white/80 p-6 text-center shadow-sm dark:border-neutral-800 dark:bg-neutral-900/80">
+  <p class="text-4xl font-black tracking-tight text-primary-600 dark:text-primary-400">{{ $value | markdownify }}</p>
+  <p class="mt-2 font-bold text-neutral-950 dark:text-white">{{ $label | markdownify }}</p>
+  {{ with .Inner }}<div class="mt-2 text-sm leading-6 text-neutral-600 dark:text-neutral-400">{{ . | markdownify }}</div>{{ end }}
+</div>

layouts/shortcodes/stats.html

@@ -0,0 +1,4 @@
+{{ $columns := .Get "columns" | default "3" }}
+<div class="not-prose my-10 grid gap-4 sm:grid-cols-2 {{ if eq $columns "4" }}lg:grid-cols-4{{ else }}lg:grid-cols-3{{ end }}">
+  {{ .Inner }}
+</div>

layouts/shortcodes/step.html

@@ -0,0 +1,7 @@
+{{ $title := .Get "title" | default "Step" }}
+{{ $number := .Get "number" }}
+<li class="relative">
+  <span class="absolute -start-[2.1rem] top-0 flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-sm font-black text-white ring-4 ring-neutral dark:ring-neutral-800">{{ $number | default "•" }}</span>
+  <h3 class="text-lg font-bold text-neutral-950 dark:text-white">{{ $title | markdownify }}</h3>
+  <div class="mt-1 text-neutral-600 dark:text-neutral-400">{{ .Inner | markdownify }}</div>
+</li>

layouts/shortcodes/steps.html

@@ -0,0 +1,3 @@
+<ol class="not-prose my-10 space-y-5 border-s border-primary-200 ps-6 dark:border-primary-900">
+  {{ .Inner }}
+</ol>