Improve persona page with browser-like screenshots and background color
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
3fca077425
commit
24eb85edc1
13 changed files with 143 additions and 2 deletions
22
layouts/partials/usage-browser.html
Normal file
22
layouts/partials/usage-browser.html
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue