From e25746d5f05105ce4ab5f30ac9c08dbcb37819c2 Mon Sep 17 00:00:00 2001 From: Oleksandr Kozachuk <201152+ok2@users.noreply.github.com> Date: Tue, 9 Jun 2026 21:38:14 +0200 Subject: [PATCH] =?UTF-8?q?web:=20add=20an=20always-visible=20'=E2=86=90?= =?UTF-8?q?=20Kaizenkodo'=20back=20link=20to=20the=20main=20site?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The brand only reloaded the tool and the byline was hidden on mobile, so there was no easy way back. Add a pill back link (href='../') as the first header item, shown on every width; drop the wordmark below 540px so it still fits on phones. --- helwasm/index.html | 2 +- helwasm/style.css | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/helwasm/index.html b/helwasm/index.html index b98538b..f37fa1c 100644 --- a/helwasm/index.html +++ b/helwasm/index.html @@ -22,12 +22,12 @@
+ Kaizenkodo LesS/KEY password generator - by Kaizenkodo diff --git a/helwasm/style.css b/helwasm/style.css index 94fd9ce..5cc370f 100644 --- a/helwasm/style.css +++ b/helwasm/style.css @@ -68,8 +68,10 @@ body { .wordmark { font-family: var(--disp); font-weight: 700; font-size: 22px; color: var(--ocean); letter-spacing: -0.01em; } .tagline { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; } .nav-spacer { flex: 1; } -.byline { font-family: var(--mono); font-size: 11px; color: var(--muted); text-decoration: none; letter-spacing: 0.04em; border-bottom: 1px solid transparent; margin-left: 6px; align-self: center; } -.byline:hover { color: var(--ocean); border-bottom-color: currentColor; } +/* Always-visible link back to the main Kaizenkodo site. */ +.backlink { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); text-decoration: none; white-space: nowrap; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); } +.backlink:hover { color: var(--ocean); border-color: var(--ocean); background: rgba(27, 65, 97, 0.05); } +.backlink .arr { font-size: 14px; line-height: 1; } /* Eyebrow label */ .eyebrow { @@ -259,8 +261,10 @@ input.mask { -webkit-text-security: disc; } @media (max-width: 680px) { .fields { grid-template-columns: 1fr; align-items: stretch; } .nav { gap: 9px; height: 60px; } - .tagline, .byline { display: none; } + .tagline { display: none; } body { font-size: 15px; } + /* free space for the back link: the ensō icon alone carries the brand on phones */ + .backlink { padding: 5px 9px; } /* result row stacks cleanly on phones: the password on its own full-width line, then a tidy meta line (result + len ........ Copy / Store). */ .result { align-items: center; row-gap: 12px; } @@ -269,3 +273,5 @@ input.mask { -webkit-text-security: disc; } .result .len { order: 3; margin-right: auto; } .result .actions { order: 4; margin-left: 0; } } +/* On narrow phones drop the wordmark so the back link + ensō + buttons all fit. */ +@media (max-width: 540px) { .wordmark { display: none; } }