Improve persona page with browser-like screenshots and background color
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
nemunaire 2026-06-11 22:53:12 +09:00
commit 24eb85edc1
13 changed files with 143 additions and 2 deletions

View file

@ -0,0 +1,22 @@
{{/*
Wraps a screenshot in a fake browser frame, like the hero on the home page.
Params (passed as a dict):
image (required) — screenshot URL
alt — alt text
url — address shown in the URL bar (default: app.happydomain.org)
*/}}
{{ $image := .image }}
{{ $alt := .alt | default "" }}
{{ $url := .url | default "app.happydomain.org" }}
<div class="usage-browser">
<div class="browser-bar">
<div class="browser-dots"><span></span><span></span><span></span></div>
<div class="browser-url">
<i class="bi bi-lock-fill lock"></i>
<span>{{ $url }}</span>
</div>
</div>
<div class="browser-body">
<img src="{{ $image }}" alt="{{ $alt }}">
</div>
</div>