fix(design): drop landing hr + duplicate link + snowflake background
Playwright inspection of the redesigned root page surfaced three real issues: 1. The .landing-hero element had a bottom-border that rendered as a harsh horizontal rule between the intro and the search. Combined with the footer's top-border, a short landing page had TWO visual <hr> lines fighting each other. Removed the bottom-border. 2. The intro's secondary paragraph ended with "Mer om personvern og hvordan det virker." — the persistent footer right below has the exact same link. Two identical CTAs within ~400 vertical pixels on a short page. Dropped the inline link. 3. **Real contrast bug**: the body's snowflake background image was meant to be barely-visible (a body::before wash at z-index -1 was supposed to fade it). But `z-index: -1` on a pseudo-element of body puts it BEHIND the body's painted background — not in front. So the wash did nothing, and on full-screen viewports (≥1100 px) the snowflake rendered at full luminosity-blended opacity, wrecking text contrast. The user spotted this in full screen. Fix: remove the body-background snowflake entirely. The ❄ glyph next to the wordmark in nav.top h1::after already carries the seasonal icon language and never interferes with content text. Also: extended .gitignore to drop .playwright-mcp/ artefacts and *.png. The previous attempt at this commit accidentally included inspection screenshots and console logs; reset and redone.
This commit is contained in:
parent
567d7540f5
commit
291b2cdfe0
3 changed files with 11 additions and 34 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -7,3 +7,8 @@ data/
|
|||
.env
|
||||
.env.local
|
||||
.DS_Store
|
||||
|
||||
# Playwright inspection artefacts — generated by the MCP browser tool when
|
||||
# inspecting the live site. Never source of truth, never committed.
|
||||
.playwright-mcp/
|
||||
*.png
|
||||
|
|
|
|||
|
|
@ -131,7 +131,6 @@
|
|||
<p class="muted-secondary" style="margin: 0;">
|
||||
Du velger selv om hver oppføring er privat (kryptert i nettleseren
|
||||
din), anonym (synlig uten navn), eller offentlig.
|
||||
<a href="/personvern">Mer om personvern og hvordan det virker.</a>
|
||||
</p>
|
||||
</div>
|
||||
{:else if session.user}
|
||||
|
|
|
|||
|
|
@ -55,38 +55,10 @@ html, body {
|
|||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Body gets a very subtle snowflake silhouette in the corner, picking up the
|
||||
icon language without being intrusive. Hidden on small viewports because
|
||||
it competes with content. Disabled under prefers-reduced-motion only when
|
||||
the background image could imply motion — here it's static, so it stays. */
|
||||
@media (min-width: 1100px) {
|
||||
body {
|
||||
background-image: url('/icon.svg');
|
||||
background-position: calc(50% + 420px) 80px;
|
||||
background-size: 260px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
/* Heavily de-emphasised so it never competes with text contrast. */
|
||||
background-blend-mode: luminosity;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
body::before {
|
||||
/* Layer a soft wash over the icon to fade it to barely-visible. */
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--bg);
|
||||
opacity: 0.92;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem max(1rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
|
||||
position: relative; /* sit above the body::before wash */
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 { line-height: 1.2; margin-top: 0; }
|
||||
|
|
@ -263,12 +235,13 @@ nav.top h1::after {
|
|||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Hero treatment on the landing — a touch more breathing room and weight
|
||||
on the first paragraph so the page reads as inviting, not utilitarian. */
|
||||
/* Hero treatment on the landing — extra weight on the first paragraph so
|
||||
the page reads as inviting, not utilitarian. No bottom border: a short
|
||||
landing page only needs one horizontal rule (the footer's), and adding
|
||||
a second made the hero read as a separate section visually fighting the
|
||||
list below. */
|
||||
.landing-hero {
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.landing-hero p {
|
||||
font-size: 1.05rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue