ux improvements: contrast, readability, accessibility, keyboard nav
This commit is contained in:
parent
cd3be4eba7
commit
13b5e6d1a9
6 changed files with 96 additions and 16 deletions
|
|
@ -6,8 +6,8 @@ templ Album(images []string, activePage string, pages []string) {
|
|||
<section>
|
||||
<div id="album-grid">
|
||||
for _, img := range images {
|
||||
<div>
|
||||
@AvifImage("album/"+img, "album", true)
|
||||
<div tabindex="0" role="button" aria-label={ img }>
|
||||
@AvifImage("album/"+img, img, true)
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ templ layout(activePage string) {
|
|||
<script defer src="/album.js"></script>
|
||||
</head>
|
||||
<body hx-boost="true" hx-ext="preload" preload="mouseover">
|
||||
<nav>
|
||||
<a href="#main-content" class="sr-only">Przejdź do treści</a>
|
||||
<nav aria-label="Główna nawigacja">
|
||||
<div>
|
||||
<a href="/">
|
||||
<img src="/images/logo.svg" alt="logo"/>
|
||||
|
|
@ -32,11 +33,13 @@ templ layout(activePage string) {
|
|||
<a class="btn" href="#footer">Kontakt</a>
|
||||
</div>
|
||||
</nav>
|
||||
{ children... }
|
||||
<div id="main-content" tabindex="-1">
|
||||
{ children... }
|
||||
</div>
|
||||
<footer id="footer">
|
||||
<div>
|
||||
<div>
|
||||
<img src="/images/logo.svg" alt="logo" style="width: 14rem"/>
|
||||
<img src="/images/logo.svg" alt="" style="width: 14rem"/>
|
||||
<p>Pasja, natura i domowy smak w każdym kawałku ciasta.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -186,6 +189,9 @@ templ Link(activePage, targetPage, title string) {
|
|||
href={ fmt.Sprint("/", targetPage, "/") }
|
||||
}
|
||||
}
|
||||
if activePage == targetPage {
|
||||
aria-current="page"
|
||||
}
|
||||
>{ title }</a>
|
||||
}
|
||||
|
||||
|
|
@ -198,6 +204,9 @@ templ GreenLink(activePage, targetPage, title string) {
|
|||
href={ fmt.Sprint("/", targetPage, "/") }
|
||||
}
|
||||
}
|
||||
if activePage == targetPage {
|
||||
aria-current="page"
|
||||
}
|
||||
class="btn-green"
|
||||
>{ title }</a>
|
||||
}
|
||||
|
|
@ -206,7 +215,7 @@ templ subnavHeader(title, description string) {
|
|||
<header class="subnav">
|
||||
<h1>{ title }</h1>
|
||||
<p>{ description }</p>
|
||||
<nav>
|
||||
<nav aria-label="Kategorie">
|
||||
{ children... }
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -176,29 +176,29 @@ templ WyrobyTorty() {
|
|||
</header>
|
||||
<div>
|
||||
<div>
|
||||
<h4>Karmel-jogurt-migdały</h4>
|
||||
<h3>Karmel-jogurt-migdały</h3>
|
||||
<p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Mango-marakuja-truskawka</h4>
|
||||
<h3>Mango-marakuja-truskawka</h3>
|
||||
<p>
|
||||
spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat
|
||||
kokosowo-waniliowy
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Czekolada-malina-jeżyna</h4>
|
||||
<h3>Czekolada-malina-jeżyna</h3>
|
||||
<p>
|
||||
biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus
|
||||
czekoladowy
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Whisky-mango</h4>
|
||||
<h3>Whisky-mango</h3>
|
||||
<p>brownie, krem mango, ganache czekoladowe , mus whisky</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Kawa-orzech ziemny</h4>
|
||||
<h3>Kawa-orzech ziemny</h3>
|
||||
<p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue