jpnadas/finrod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: drop page header, move Finrod wordmark into the drawer

Browse Source 
The h1 + tagline at the top of the main view were just taking
vertical space. Strip them. The "Finrod" wordmark now lives only
inside the side drawer, set in Cinzel (classical-inscription
serif, loaded from Google Fonts) alongside the Star of Fëanor
mark — matches the favicon and the loremaster vibe.

Body padding-top adjusted to 3.5 rem so the controls clear the
fixed hamburger button at the top-left.
This commit is contained in:
João Pedro Battistella Nadas
2026-06-09 20:09:36 +02:00
parent 1fffe8b7e1
commit b4990e1729
2 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
static/index.html
View File

@@ -6,6 +6,7 @@
<title>finrod — translator</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23d4a566'%3E%3Cpath d='M16 1 L18 14 L31 16 L18 18 L16 31 L14 18 L1 16 L14 14 Z'/%3E%3Cpath d='M16 4 L22 16 L16 28 L10 16 Z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&display=swap" />
<style>
:root {
color-scheme: light dark;
@@ -34,16 +35,26 @@
background: var(--bg);
color: var(--fg);
margin: 0;
/* extra bottom padding so content scrolls clear of the stacked FABs */
padding: 2rem 1rem calc(9rem + env(safe-area-inset-bottom, 0px)) 1rem;
/* Top padding (~3.5 rem) clears the fixed hamburger button.
Bottom padding leaves room for the stacked FABs. */
padding: 3.5rem 1rem calc(9rem + env(safe-area-inset-bottom, 0px)) 1rem;
}
.wrap { max-width: 960px; margin: 0 auto; }
h1 {
font-weight: 300;
letter-spacing: 0.05em;
margin: 0 0 0.25rem 0;
/* Cinzel wordmark — only used inside the side drawer */
.drawer-wordmark {
font-family: 'Cinzel', Georgia, serif;
font-size: 1.9rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--accent);
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0;
text-transform: uppercase;
line-height: 1;
}
.sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.drawer-wordmark svg { width: 26px; height: 26px; }
.controls {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -114,14 +125,6 @@
justify-content: space-between;
margin-bottom: 0.5rem;
}
.drawer-header h2 {
margin: 0;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: uppercase;
}
.drawer-close {
background: transparent;
border: none;
@@ -488,7 +491,15 @@
<div id="drawer-backdrop" class="drawer-backdrop"></div>
<aside id="drawer" class="drawer" aria-hidden="true">
<div class="drawer-header">
<h2>Settings</h2>
<div class="drawer-wordmark">
<svg viewBox="0 0 32 32" aria-hidden="true">
<g fill="currentColor">
<path d="M16 1 L18 14 L31 16 L18 18 L16 31 L14 18 L1 16 L14 14 Z"/>
<path d="M16 4 L22 16 L16 28 L10 16 Z" opacity=".55"/>
</g>
</svg>
<span>Finrod</span>
</div>
<button type="button" id="drawer-close" class="drawer-close" aria-label="Close menu" title="Close">
<span class="material-symbols-outlined">close</span>
</button>
@@ -499,9 +510,6 @@
</div>
</aside>
<div class="wrap">
<h1>finrod</h1>
<div class="sub">Translation via Ollama · loremaster of tongues</div>
<div class="controls">
<div>
<label for="source">From</label>