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:
Ole-Morten Duesund 2026-05-25 15:57:56 +02:00
commit 291b2cdfe0
3 changed files with 11 additions and 34 deletions

5
.gitignore vendored
View file

@ -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

View file

@ -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}

View file

@ -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;