mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-10-21 19:25:22 +00:00
Nuno CoraçãoandClaude Fable 5
09f0573749
Floating glass header with ⌘K search, landing homepage layout with hero image and GitHub-stars CTA, background canvas with dissolving heroes, burufugu colour scheme, movie-quote 404, taxonomy pills, keyboard/ARIA accessibility across menus, search and tabs, idle- loaded third-party scripts, and dedicated print styles. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
41 lines
2.9 KiB
HTML
41 lines
2.9 KiB
HTML
{{/* Opt-in preview for Blowfish's built-in homepage layouts. */}}
|
|
{{ $layouts := slice "landing" "background" "hero" "profile" "page" "card" }}
|
|
<section data-layout-switcher>
|
|
<div>
|
|
{{ range $index, $layout := $layouts }}
|
|
{{ $html := partial (printf "home/%s.html" $layout) $ }}
|
|
{{ if ne $index 0 }}
|
|
{{/* Hidden panels must not eagerly fetch their imagery. */}}
|
|
{{ $html = replace $html `loading="eager"` `loading="lazy"` }}
|
|
{{ $html = replace $html `fetchpriority="high"` `fetchpriority="low"` }}
|
|
{{ end }}
|
|
<div id="layout-panel-{{ $layout }}" data-layout-switcher-panel="{{ $layout }}" role="tabpanel" aria-labelledby="layout-tab-{{ $layout }}" tabindex="0"{{ if ne $index 0 }} hidden{{ end }}>
|
|
{{ $html | safeHTML }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="mb-8 mt-8 rounded-3xl border border-neutral-200/80 bg-neutral/85 p-5 shadow-lg shadow-neutral-900/5 backdrop-blur-xl dark:border-neutral-700/80 dark:bg-neutral-800/85 sm:p-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-400">Theme playground</p>
|
|
<h2 class="mt-1 text-2xl font-black tracking-tight text-neutral-900 dark:text-white">Try a homepage layout</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-300">Same content, six built-in Blowfish layouts. Pick one to preview it in place.</p>
|
|
</div>
|
|
<a class="text-sm font-bold text-primary-600 underline decoration-primary-300 underline-offset-4 hover:text-primary-500 dark:text-primary-400" href="{{ `docs/homepage-layout/` | relLangURL }}">Layout documentation</a>
|
|
</div>
|
|
<div class="mt-5 flex flex-wrap gap-2" role="tablist" aria-label="Homepage layouts">
|
|
{{ range $index, $layout := $layouts }}
|
|
<button type="button" id="layout-tab-{{ $layout }}" class="rounded-full border border-neutral-300 bg-white px-4 py-2 text-sm font-bold text-neutral-700 shadow-sm transition hover:border-primary-400 hover:text-primary-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:text-primary-400 {{ if eq $index 0 }}border-primary-600 bg-primary-600 text-white hover:bg-primary-500 hover:text-white dark:border-primary-500 dark:bg-primary-500{{ end }}" data-layout-switcher-button="{{ $layout }}" role="tab" aria-selected="{{ cond (eq $index 0) `true` `false` }}" aria-controls="layout-panel-{{ $layout }}" tabindex="{{ cond (eq $index 0) `0` `-1` }}">{{ $layout | title }}</button>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
{{ $jsSwitcher := resources.Get "js/layout-switcher.js" | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
|
|
<script
|
|
defer
|
|
type="text/javascript"
|
|
src="{{ $jsSwitcher.RelPermalink }}"
|
|
integrity="{{ $jsSwitcher.Data.Integrity }}"></script>
|
|
</section>
|