projekte/deklarix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mobile-first styling matching enconf's CI

Browse Source 
Pages were unstyled HTML until now. design/enterprise.css (enconf's
4400-line stylesheet) is tightly coupled to Ant Design/React class
names and a fixed desktop sidebar layout — not usable as-is for
Deklarix's plain server-rendered forms. Instead, internal/web/static/
app.css is a small, purpose-built mobile-first stylesheet that reuses
enconf's actual design tokens (primary blue #1677ff, radius scale,
shadows, Inter) for brand consistency without dragging in the
unrelated layout/framework rules.

Inter is self-hosted (copied from enconf's font files) rather than
pulled from Google Fonts, keeping the "no runtime internet dependency"
property. Only the "latin" subset is included — German umlauts and ß
all live in U+0000-00FF, so the cyrillic/greek/vietnamese subsets
enconf ships aren't needed here.

Inputs/buttons are sized for touch (44px min-height) and use 16px font
size to avoid iOS's auto-zoom-on-focus. Findings are color-coded by
severity (red/amber/green backgrounds with a matching left border).

Verified visually with chromium --headless --screenshot at both mobile
(390px) and desktop (1280px) viewports, including a real WK-001 finding
fetched from the running server and rendered through the actual
stylesheet — not just asserted via HTTP status codes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
noroot
2026-08-27 17:41:57 +02:00
parent 374f4ade31
commit 77de1627c5
7 changed files with 265 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
internal/web/templates/index.html
View File

@@ -3,6 +3,7 @@
<head>{{template "head" .}}</head>
<body>
{{template "nav" .}}
<div class="page">
<h1>Pre-Publish-Prüfung</h1>
<p>Caption und Plattform eingeben, um auf Kennzeichnungsrisiken zu prüfen.</p>
@@ -41,6 +42,7 @@
</form>
<div id="ergebnis"></div>
</div>
</body>
</html>
{{end}}

1
internal/web/templates/layout.html
View File

@@ -2,6 +2,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.Title}} — Deklarix</title>
<link rel="stylesheet" href="/static/app.css">
<script src="/static/htmx.min.js"></script>
{{end}}

2
internal/web/templates/login.html
View File

@@ -2,6 +2,7 @@
<html lang="de">
<head>{{template "head" .}}</head>
<body>
<div class="page">
<h1>Anmelden</h1>
{{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
<form method="post" action="/login">
@@ -14,6 +15,7 @@
<button type="submit">Anmelden</button>
</form>
<p><a href="/register">Noch kein Konto? Registrieren</a></p>
</div>
</body>
</html>
{{end}}

2
internal/web/templates/register.html
View File

@@ -2,6 +2,7 @@
<html lang="de">
<head>{{template "head" .}}</head>
<body>
<div class="page">
<h1>Registrieren</h1>
{{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
<form method="post" action="/register">
@@ -25,6 +26,7 @@
<button type="submit">Konto anlegen</button>
</form>
<p><a href="/login">Schon ein Konto? Anmelden</a></p>
</div>
</body>
</html>
{{end}}