From 13b5e6d1a97d35f0d9508ab423695b34e4afc792 Mon Sep 17 00:00:00 2001 From: bronku Date: Wed, 10 Jun 2026 19:44:28 +0200 Subject: [PATCH] ux improvements: contrast, readability, accessibility, keyboard nav --- css/base.css | 41 ++++++++++++++++++++++++++++++++++++++--- css/wyroby_torty.css | 5 +++-- html/album.templ | 4 ++-- html/layout.templ | 17 +++++++++++++---- html/wyroby_torty.templ | 10 +++++----- js/album.js | 35 +++++++++++++++++++++++++++++++++++ 6 files changed, 96 insertions(+), 16 deletions(-) diff --git a/css/base.css b/css/base.css index 282aa6c..1392b71 100644 --- a/css/base.css +++ b/css/base.css @@ -3,7 +3,7 @@ --surface-container-highest: #eae2d2; --surface: #fff8f0; --backdrop-blur: 24px; - --primary: #8c4d50; + --primary: #753a3d; --primary-container: #fcacaf; --on-background: #363227; --nav-height: 4rem; @@ -33,8 +33,8 @@ body { background-color: var(--surface); - font-family: "Plus Jakarta Sans", sans-serif; box-sizing: border-box; + line-height: 1.5; } h1, @@ -91,7 +91,7 @@ h5 { p { color: var(--on-background); - line-height: 1.5rem; + line-height: 1.5; } body > nav, @@ -134,6 +134,41 @@ img { color: transparent; } +:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sr-only:focus { + position: fixed; + top: 0.5rem; + left: 0.5rem; + width: auto; + height: auto; + padding: 0.5rem 1rem; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; + background: var(--surface); + color: var(--on-background); + z-index: 1000; + border-radius: var(--small-radius); + box-shadow: 0 2px 8px rgba(0,0,0,0.15); +} + main { transition: opacity 0.15s ease; } diff --git a/css/wyroby_torty.css b/css/wyroby_torty.css index 7589a1c..e557e2a 100644 --- a/css/wyroby_torty.css +++ b/css/wyroby_torty.css @@ -163,10 +163,11 @@ } } - & h4 { + & h3 { font-family: - "Plus Jakarta Sans", sans-serif; /* Modern font for titles */ + "Plus Jakarta Sans", sans-serif; font-weight: 700; + font-size: 0.95rem; margin-bottom: 0.5rem; letter-spacing: 1px; text-transform: uppercase; diff --git a/html/album.templ b/html/album.templ index 6001df3..b2b3482 100644 --- a/html/album.templ +++ b/html/album.templ @@ -6,8 +6,8 @@ templ Album(images []string, activePage string, pages []string) {
for _, img := range images { -
- @AvifImage("album/"+img, "album", true) +
+ @AvifImage("album/"+img, img, true)
}
diff --git a/html/layout.templ b/html/layout.templ index 87ea181..8706151 100644 --- a/html/layout.templ +++ b/html/layout.templ @@ -18,7 +18,8 @@ templ layout(activePage string) { -