kaizenkodo/HEL
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: add an always-visible '← Kaizenkodo' back link to the main site

Browse Source 
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.
This commit is contained in:
Oleksandr Kozachuk
2026-06-09 21:38:14 +02:00
parent fc0e9bfafd
commit e25746d5f0
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
helwasm/index.html
+1 -1
View File
@@ -22,12 +22,12 @@
<body>
<header class="site">
<div class="wrap nav">
<a class="backlink" href="../" title="Back to the Kaizenkodo site"><span class="arr" aria-hidden="true">←</span> Kaizenkodo</a>
<a class="brand" href="./">
<img class="enso" src="./assets/enso.png" width="36" height="36" alt="" aria-hidden="true" />
<span class="wordmark">LesS/KEY</span>
<span class="tagline">password generator</span>
</a>
<a class="byline" href="https://kaizenkodo.no" target="_blank" rel="noopener">by Kaizenkodo</a>
<span class="nav-spacer"></span>
<button class="btn ghost" id="importBtn">Import</button>
<button class="btn ghost" id="exportBtn">Export</button>
helwasm/style.css
+9 -3
View File
@@ -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; } }