happyDomain/website
2
0
Fork 0
Code Issues Pull requests Releases Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
layouts/partials/usage-browser.html Normal file
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>

7
layouts/shortcodes/usage-feature.html
View file

@ -1,5 +1,6 @@
{{ $image := .Get "image" }}
{{ $alt := .Get "alt" | default "" }}
{{ $url := .Get "url" }}
{{ $title := .Get "title" }}
{{ $flip := eq (.Get "flip") "true" }}
{{ $bg := .Get "bg" | default "" }}
@ -9,12 +10,14 @@
{{ if eq $bg "green" }}{{ $style = "background: var(--hd-green-50)" }}{{ end }}
{{ if eq $bg "plum" }}{{ $style = "background: var(--hd-plum-100)" }}{{ end }}
{{ $browserArgs := dict "image" $image "alt" $alt "url" $url }}
<div class="container-fluid py-5"{{ with $style }} style="{{ . }}"{{ end }}>
<div class="container my-5">
<div class="row">
{{ if $flip }}
<div class="order-1 order-md-0 col-md-7 align-self-center">
<img class="rounded img-thumbnail" src="{{ $image }}" alt="{{ $alt }}">
{{ partial "usage-browser.html" $browserArgs }}
</div>
<div class="order-0 order-md-1 col-md-5 align-self-center text-center">
{{ else }}
@ -28,7 +31,7 @@
</div>
{{ if not $flip }}
<div class="order-1 col-md-7 py-2 align-self-center">
<img class="rounded img-thumbnail" src="{{ $image }}" alt="{{ $alt }}">
{{ partial "usage-browser.html" $browserArgs }}
</div>
{{ end }}
</div>