admin
a818b9c576
gates / gates (push) Failing after 14m33s
Part C. The live home page is NOT touched: every CSS rule added is a new class
under .page-index, so index.html renders byte-for-byte as before.
website/preview/index.html (BOM + CRLF, noindex, Disallow: /preview/)
Ten sections, ten different layout families. The three repeats the audit found
are gone: why-grid ran 3x and apps-showcase 2x.
- hero: a real dashboard screenshot instead of the logo, sized by its content
instead of a forced 100vh band, no infinite float animation, and a sentence
made of four facts instead of "Professzionalis ... telepites es uzemeltetes".
- the ten capability cards become three labelled clusters. Their TEXT is
verbatim: the audit's own finding was that the writing is right and the
layout is wrong, so only the layout moved. Every hedge ("ha van") survives.
- NEW "Ki all mogotte" with the operator's photo and five approved sentences.
- the 3 cloud-problem cards + the 4 own-server cards merge into ONE two-column
comparison. No new claim about any competitor: all four left-hand sentences
already existed on the page.
- the two tile walls (10 + 7 tiles duplicating pages that already exist) shrink
to a two-item band that keeps the app names and the links.
- section headers are left-aligned and varied, not 11x centred-two-words-plus-
one-blue-word.
Em dashes in the page's own copy: 18 -> 0. Deliberately kept: the 6 in <title>,
meta description, OG, Twitter and JSON-LD (operator decision at STOP 1 - indexed
strings deserve their own pass), and 1 in the shared footer, which gate 3 requires
to be identical across all 14 pages. Both stated, neither swept silently.
JetBrains Mono is no longer fetched. Exactly 13 characters were loading 31 KB:
the 1..5 process badges, the 01..05 service numbers, and - the audit missed this
at first and it is corrected in the file - the 3/2/1 of the backup rule.
assets/operator-portrait.webp 720x900, 93 KB
Cropped from an original that stays OUTSIDE this public repo. All metadata
stripped and VERIFIED BY READ-BACK: 0 EXIF tags, 0 GPS IFD entries, and none of
EXIF/XMP/ICCP/samsung/SM-A705FN/2023:10:18 appear anywhere in the bytes. Built by
re-writing the pixels into a fresh image, so the source info dict cannot travel.
Honest correction to the brief's premise: this photo had NO GPS tag to begin with.
scripts/site_gates.py
preview/index.html registered in NO_TWIN, with the reason. It cannot go in TWINS:
gate 3 wants its nav identical to index.html's (globe -> / and /en/) while the
twin check wants a pair's globe pointing at the pair's own URLs. The English twin
is written in the same commit as the switch, as a real twin. Everything else still
runs on the preview - BOM, emoji, nav/footer, globe, analytics, CDN, tokens,
cache-busting, dash-language, viewer, tail.
site_gates.py green. The builder (kept in the session scratchpad) writes BOM + CRLF
and asserts both: it first wrote LF and turned the nav/footer gate red for the
preview, which is exactly the trap this CHANGELOG's morning entry records.
212 lines
15 KiB
Markdown
212 lines
15 KiB
Markdown
# Home-page redesign — the audit before anything is touched
|
||
|
||
**Date:** 2026-10-10 · **Scope:** `website/index.html` (+ its English twin `website/en/index.html`)
|
||
· **Baseline:** `felhom.eu` `main` @ `7ff64f40ed`, clean, in sync with `origin/main`
|
||
· **Method:** taste-skill §11.B, run against the **live** site, not the file on disk.
|
||
|
||
Companion skill files written in the same session: `skills/felhom-web-design/SKILL.md` (the override
|
||
layer) and `skills/SOURCES.md` (provenance of the vendored `design-taste-frontend`).
|
||
|
||
---
|
||
|
||
## A. Design read (taste-skill §0.B)
|
||
|
||
> **Reading this as:** a redesign-preserve of a trust-first consumer landing page, for Hungarian
|
||
> households who are considering handing their family photographs to a box in their own hall, with a
|
||
> plain-spoken technical language, leaning toward the existing Felhom v2 token set plus real product
|
||
> photography.
|
||
|
||
The audience is the thing most of the current page gets wrong. It is not a procurement panel and not
|
||
a self-hosting hobbyist. It is a household that has to decide whether to trust **a person**. The page
|
||
currently contains no person, no box, and no evidence that either exists.
|
||
|
||
## B. How the measurements were taken
|
||
|
||
Claude in Chrome cannot resize this workstation's Chrome: `resize_window` returns success and
|
||
`window.innerWidth` stays at 1920. Chrome DevTools device mode (R-918's recipe) could not be driven
|
||
either, because the extension's keystrokes reach the page, not the browser chrome.
|
||
|
||
**What worked, and why it is faithful:** the page was rendered inside a **same-origin iframe** of the
|
||
chosen CSS width. The site frames itself, so the iframe's own width drives the media queries. Two
|
||
positive observables confirm the layout really is the mobile one rather than a squeezed desktop one:
|
||
|
||
- at 390 px the hamburger computes to `display: block` (it is `none` on desktop), and
|
||
- `document.documentElement.clientWidth === scrollWidth === 375` — the viewport minus the scrollbar,
|
||
with **no horizontal overflow**.
|
||
|
||
Both the desktop and the phone figures below come from that harness. Screenshots are cropped to the
|
||
iframe's rectangle, so what is shown is the page at that width and nothing else.
|
||
|
||
## C. Brand tokens in use (preserve)
|
||
|
||
| Token | Value | Note |
|
||
|---|---|---|
|
||
| `--bg-0 / --bg-1 / --bg-2` | `#0A1220` / `#0F1B2E` / `#16263F` | One locked dark theme. No `prefers-color-scheme` block anywhere in `site.css` |
|
||
| `--text-1 / --text-2` | `#EDF2F9` / `#94A6BF` | Measured **16.67:1** and **7.56:1** against `--bg-0`. AAA, not merely AA |
|
||
| `--blue / --blue-bright` | `#0083D8` / `#2EA8F5` | One accent, used consistently. §4.2's Color Consistency Lock already passes |
|
||
| `--radius` | `2px` | §4.4's Shape Consistency Lock already passes. `box-shadow` is in the gate's `BANNED` list |
|
||
| `--font-ui` | Plus Jakarta Sans, self-hosted | Latin + latin-ext, 48 KB |
|
||
| `--font-data` | JetBrains Mono, self-hosted | 31 KB — see finding **R6** |
|
||
|
||
The token layer is in good shape and is **not** what makes the page look AI-made. Nothing in §C is
|
||
proposed for change.
|
||
|
||
## D. Information architecture and conversion paths (preserve)
|
||
|
||
Nav: `Szolgáltatások · Alkalmazások · Technológiák · Mentések · GYIK · Kapcsolat` + language globe.
|
||
One line at desktop, hamburger below 900 px. §4.7's nav rules already pass.
|
||
|
||
Conversion path: home → `/teszteles` (primary CTA, twice) → `/kapcsolat`. Secondary paths to
|
||
`/alkalmazasok`, `/technologiak`, `/biztonsagimentes`.
|
||
|
||
**No URL, nav label, anchor ID or form field is proposed for change** (§11.F).
|
||
|
||
## E. The page as it stands, measured
|
||
|
||
| | Desktop 1440 | Phone 390 |
|
||
|---|---|---|
|
||
| Full page height | **10 922 px** | **19 913 px** |
|
||
| Screens of scrolling | ≈ 11.6 | **≈ 23.6** |
|
||
| Sections | 11 + footer | same |
|
||
| Requests / weight | **16 requests, 533 KB**, hosts: `felhom.eu` 13, `stats.felhom.eu` 2 | — |
|
||
| Em dashes (`—`) in rendered text | **18** | — |
|
||
|
||
Section inventory, in page order, with the layout family each uses:
|
||
|
||
| # | Heading | Layout family | Items | Height |
|
||
|---|---|---|---|---|
|
||
| 1 | *(hero)* | `hero-content` | 2 | 900 |
|
||
| 2 | Mit tud a doboz ma? | `why-grid` | **10** | 1732 |
|
||
| 3 | Így néz ki a vezérlőpult | `dash-grid` | 4 | 1120 |
|
||
| 4 | Miért ne a felhőszolgáltatók? | `problem-grid` | 3 | 610 |
|
||
| 5 | Miért válaszd a saját szervered? | **`why-grid` again** | 4 | 755 |
|
||
| 6 | Hogyan működik? | `process-steps` | 5 | 715 |
|
||
| 7 | Mit kapsz tőlünk? | `service-list` | 5 | 1010 |
|
||
| 8 | Telepíthető Alkalmazások | `apps-showcase` | 10 | 939 |
|
||
| 9 | Professzionális Technológiák | **`apps-showcase` again** | 7 | 939 |
|
||
| 10 | Adataid biztonságban | `backup-content` | 2 | 519 |
|
||
| 11 | Zárt teszt | **`why-grid` a third time** | 3 | 1056 |
|
||
| 12 | Érdekel? Beszéljünk! | `contact-box` | 2 | 500 |
|
||
|
||
## F. Patterns to keep
|
||
|
||
1. **The token layer and the contrast wins** (§C). Honour them; §11.C.
|
||
2. **"Mit tud a doboz ma?"** — the content is the best thing on the site. Ten concrete, hedged,
|
||
honest facts. The *layout* is wrong, the *writing* is right.
|
||
3. **"Ismert korlátok"** — naming the shared household password and the missing DLNA is the single
|
||
most trust-building paragraph on the page. It stays, and it should be easier to find.
|
||
4. **The four real dashboard screenshots.** Real product images, already vendored, already with
|
||
captions that are claims. They are the asset the hero is missing.
|
||
5. **The picture viewer** (`gallery.js`), and its JS-off behaviour.
|
||
6. **The whole SEO head block** (§H).
|
||
7. **The nav, the footer and both CTAs' wording.** `Jelentkezem tesztelőnek` is one label for one
|
||
intent, used twice — §4.5's No-Duplicate-CTA-Intent already passes.
|
||
|
||
## G. Patterns to retire
|
||
|
||
Each row names the taste-skill rule it breaks.
|
||
|
||
| # | Pattern | Where | Rule broken |
|
||
|---|---|---|---|
|
||
| **R1** | **The hero's "visual" is the logo** (`logo.png`, 49 KB), beside a claim that states nothing. The real product pictures sit three sections lower | hero | §4.8 "Hero needs a real visual"; a logo fills the slot without showing the product |
|
||
| **R2** | **Hero content floats in the middle of a 900 px band**, roughly 300 px of empty space above it; on the phone the logo takes the top half and pushes the CTA to the fold | hero | §4.7 HERO TOP PADDING CAP — "reads as a layout bug, not as intentional space" |
|
||
| **R3** | **"Professzionális otthoni szerver telepítés és üzemeltetés"** as the one-line value proposition. Also "Ipari szintű megoldások", "Professzionális Technológiák", "Kulcsrakész megoldások, professzionális kivitelezéssel" | hero + §7 + §9 | §9.D filler verbs; `felhom-web-design` §5 — an empty word with no fact beside it |
|
||
| **R4** | **The same section header shape 11 times out of 11:** centred `h2` of two words with a blue-coloured tail in a `<span>`, then a centred grey sub-line | every section | §4.3 anti-centre bias; the templated rhythm the operator describes |
|
||
| **R5** | **Three layout families carry five sections.** `why-grid` runs three times, `apps-showcase` twice | §2, §5, §11 / §8, §9 | §4.7 Section-Layout-Repetition Ban — a family may appear **once** |
|
||
| **R6** | **`process-steps` numbered 1–5 and `service-list` numbered 01–05.** | §6, §7 | §9.F "NO generic step labels"; "NO section-number eyebrows" |
|
||
| **R6b** | **JetBrains Mono (31 KB) is loaded for 13 characters.** Exactly 13 elements on the page use `--font-data`: the ten numbers in R6, **plus the `3` / `2` / `1` of the backup rule**. Retiring R6 alone therefore does **not** drop the font — the 3-2-1 figures must also move to the UI font, which they do not need | §6, §7, §10 | page weight; §4.9 (mono is for data, and these are not data) |
|
||
| **R7** | **`problem-grid` is three equal feature cards** | §4 | §9.C — banned outright |
|
||
| **R8** | **A ten-card grid** under "Mit tud a doboz ma?", 1732 px tall, every card the same weight | §2 | §4.9 "Long lists need a different UI component, not a longer list" (> 5 items) |
|
||
| **R9** | **18 em dashes** in the rendered text | throughout | §9.G, kept in full; in Hungarian the gondolatjel is ` – ` anyway |
|
||
| **R10** | **Two sections are a catalogue of someone else's logos in words** — app names and technology names as plain text in identical tiles | §8, §9 | §4.9 content density; they duplicate `/alkalmazasok` and `/technologiak`, which both already exist |
|
||
| **R11** | **Nobody is behind it.** The only human trace on the page is "Üzemeltető: Nagyfenyvesi Viktor" in the legal footer line | whole page | The brief's core finding; §0.A audience |
|
||
| **R12** | **"Miért ne a felhőszolgáltatók?"** argues against Google before the page has said what Felhom *is* | §4 | §4.9 — the fourth section is too early for a competitor argument |
|
||
|
||
## H. SEO baseline — carried over unchanged
|
||
|
||
From `audits/seo-2026-10-10/` (6 indexed, 7 not indexed, nothing wrong with the home page) and the
|
||
file itself. **These exact strings are preserved** unless the operator says otherwise:
|
||
|
||
- `<title>Felhom.eu — Saját felhőd, saját szabályaid | Otthoni szerver szolgáltatás</title>`
|
||
- `meta description` (the "58 telepíthető alkalmazás, háromszintű automatikus mentés…" line)
|
||
- `canonical` `https://felhom.eu/`; `hreflang` hu / en / x-default
|
||
- All Open Graph and Twitter tags, and the `LocalBusiness` JSON-LD block
|
||
- `h1` text: *Saját felhőd, saját szabályaid*
|
||
|
||
> **One conflict to settle at STOP 1.** The `<title>` and three OG/Twitter titles contain an **em
|
||
> dash**, and the JSON-LD `description` contains "Professzionális". R3 and R9 would change them, the
|
||
> SEO-keep rule says do not. **Recommendation: leave all four alone this round.** They are the
|
||
> strings Google has indexed, the em dash is invisible to a visitor in a browser tab, and a title
|
||
> change is worth doing deliberately on its own, not as a side effect of a layout change.
|
||
|
||
## I. Dial reading (taste-skill §1)
|
||
|
||
| Dial | Current site | Proposed | Why |
|
||
|---|---|---|---|
|
||
| `DESIGN_VARIANCE` | **3** — every section is a centred header over a symmetric grid | **6** | §1.A "redesign - preserve" says match existing; 3 is what *causes* R4 and R5. 6 buys asymmetry and a real hero without touching the brand |
|
||
| `MOTION_INTENSITY` | **2** — CSS hover only, `prefers-reduced-motion` block already present | **3** | Trust-first audience (§1.A row 5 reads 2-3). Deliberately below 4 so §6.B's mandate and the no-JS-library fence never collide |
|
||
| `VISUAL_DENSITY` | **4** | **4** | Unchanged. The density is not the problem; the repetition is |
|
||
|
||
Mode: **redesign — preserve**.
|
||
|
||
## J. The levers, in priority order (taste-skill §11.D)
|
||
|
||
Each is one plain sentence. This is the list the operator approves, changes or cuts at STOP 1.
|
||
|
||
1. **Give the hero a real picture and a sentence that says something.** Replace the logo with the
|
||
Indítópult screenshot, and "Professzionális otthoni szerver telepítés és üzemeltetés" with a
|
||
concrete sentence drawn from the facts already on the page. *(R1, R2, R3)*
|
||
2. **Put a face and a name on the page.** A new "Ki áll mögötte" section with the operator's
|
||
photograph and three or four sentences in his own words. *(R11)*
|
||
3. **Break the eleven-times-identical section header.** Vary alignment and shape so that no two
|
||
consecutive sections open the same way. *(R4)*
|
||
4. **Give each section its own layout family.** Split the ten-card grid into a short scannable list,
|
||
and stop reusing `why-grid` and `apps-showcase`. *(R5, R7, R8)*
|
||
5. **Re-order so the page answers "what is it" before "why not Google".** *(R12)*
|
||
6. **Drop the two word-catalogue sections to a single line each with the link they already carry.**
|
||
*(R10)*
|
||
7. **Retire the numbered step and service lists, and move the 3-2-1 figures off the mono font**,
|
||
which together take JetBrains Mono (31 KB) off the home page. *(R6, R6b)*
|
||
8. **Sweep every em dash** out of the rendered text. *(R9)*
|
||
|
||
**Levers deliberately NOT proposed:** no new colour, no new font, no light mode, no animation
|
||
library, no nav change, no URL change, no change to the four SEO strings in §H.
|
||
|
||
## K. Known risks when this ships
|
||
|
||
1. **`site_gates.py` walks every `*.html` under `website/` at any depth** (R-423) and fails on a page
|
||
that is in neither `TWINS` nor `NO_TWIN`. The preview page must be registered before the gate can
|
||
pass, and a registered Hungarian page must carry a nav and footer **byte-identical** to
|
||
`index.html`'s after normalisation — which is a second, independent reason not to touch the nav.
|
||
2. **`site.css` is shared by every page, and scoping it has already bitten in both directions.**
|
||
A base-element change made for the home page leaks into `/gyik`, `/teszteles` and the legal pages;
|
||
but `69035f4af5` (2026-10-10) is the opposite failure — `.info-card` and `.highlight-box` were
|
||
scoped to `.page-technologiak` / `.page-biztonsagimentes`, so the new `.page-teszteles` pages got
|
||
**no card chrome at all** and rendered as unstyled text runs. That commit's own conclusion was to
|
||
fix base rules **site-wide** rather than patch per page.
|
||
**So the rule here is not "always scope":** a genuinely shared improvement (a base `a`, `ul` or
|
||
`code` rule) goes site-wide on purpose; only a rule that is specifically the home page's new
|
||
composition hides under `body.page-index`. Either way the mitigation is the same and is not
|
||
optional — **every other page is screenshotted at 1440 before the switch**, which is step D.3.
|
||
3. **The English twin** must move in the same commit, or the twin gate fails.
|
||
5. **One em dash cannot be swept from one page alone.** The shared footer reads
|
||
`© 2026 felhom.eu — Saját felhőd, saját szabályaid`, and gate 3 requires every Hungarian page's
|
||
`<footer>` to be **identical** to `index.html`'s. So "zero em dashes" is achievable on the home
|
||
page's own copy, but that last one needs the same edit on all 14 pages at once. It is a
|
||
one-character change per file and mechanical, but it is a site-wide change, not a home-page one.
|
||
**Carried as a separate decision for the operator at STOP 3**, not done silently.
|
||
6. **A preview page cannot be registered as a twin pair.** Gate 3 requires the nav to be identical to
|
||
`index.html`'s (whose language globe points at `/` and `/en/`), while the twin gate requires a
|
||
`TWINS` pair's globe to point at the pair's own two URLs. For `preview/` those two demands
|
||
contradict each other. The Hungarian preview therefore goes in `NO_TWIN` (where nav, globe
|
||
structure, BOM, emoji, analytics, dash-language and viewer checks all still run, and only the
|
||
twin-specific canonical/hreflang checks do not), and **the English twin is written in Part D, in
|
||
the same commit as the switch**, where the twin gate does its real job on two public pages.
|
||
4. **The `?v=` cache-bust** on `site.css` must be bumped, or the change looks like it did not deploy.
|
||
|
||
## L. Register
|
||
|
||
Nothing here is filed as an `OPEN-ITEMS.md` row yet: the whole list is this session's work and will
|
||
be closed in it. Anything on the list that the operator cuts at STOP 1, or that is not finished by
|
||
the end of the session, becomes a row before the session ends.
|