explewd/retur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a real intro background image

Browse Source 
A generated desk/lamp/stamp photo (converted PNG -> WebP, 1.7MB ->
65KB, negligible quality loss at the size it's actually displayed)
now sits behind the intro screen, with the existing red "R" seal
stamped on top as an overlay — the seal already existed as a plain
CSS circle, just needed a photo worth stamping over. Gave it a subtle
dark backdrop + slightly stronger glow so it stays legible against
the busier background.

Raw source PNG gitignored — only the optimized derivative that
actually ships belongs in the repo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-07-26 19:43:18 +02:00
parent 7224027a77
commit e82d948f28
3 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -2,3 +2,7 @@ node_modules
dist dist
.env .env
*.local *.local
# Raw source image — public/intro.webp is the optimized derivative that
# actually ships; no need to bloat the repo with the 1.7MB original.
/intro.png

BIN
public/intro.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

10
src/style.css
View File

@@ -74,8 +74,14 @@ button { font: inherit; }
.penalty { margin-bottom: 12px; color: var(--danger); font-size: 10px; text-transform: uppercase; } .penalty { margin-bottom: 12px; color: var(--danger); font-size: 10px; text-transform: uppercase; }
.result button { border: 0; background: none; color: var(--text); cursor: pointer; } .result button { border: 0; background: none; color: var(--text); cursor: pointer; }
.intro-screen, .end-screen { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 30px; background: radial-gradient(circle, #20192c 0, var(--bg) 66%); } .intro-screen, .end-screen { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 30px; background: radial-gradient(circle, #20192c 0, var(--bg) 66%); }
.intro-screen { grid-template-columns: auto minmax(280px, 540px); gap: clamp(30px, 7vw, 90px); } .intro-screen {
.seal { width: clamp(160px, 25vw, 260px); aspect-ratio: 1; display: grid; place-items: center; border: 8px double var(--stamp); border-radius: 50%; color: var(--stamp); font: 700 clamp(90px, 16vw, 160px)/1 'Special Elite'; transform: rotate(-8deg); opacity: .78; box-shadow: 0 0 60px rgba(217,84,98,.12); } grid-template-columns: auto minmax(280px, 540px);
gap: clamp(30px, 7vw, 90px);
background:
linear-gradient(rgba(13, 13, 26, 0.6), rgba(13, 13, 26, 0.88)),
url('/intro.webp') center / cover no-repeat;
}
.seal { width: clamp(160px, 25vw, 260px); aspect-ratio: 1; display: grid; place-items: center; border: 8px double var(--stamp); border-radius: 50%; color: var(--stamp); font: 700 clamp(90px, 16vw, 160px)/1 'Special Elite'; transform: rotate(-8deg); opacity: .85; box-shadow: 0 0 60px rgba(217,84,98,.25); background: rgba(13, 13, 26, 0.35); backdrop-filter: blur(1px); }
.intro-copy h1 { margin: 0; color: var(--stamp); font-size: clamp(52px, 10vw, 92px); letter-spacing: .15em; line-height: 1; } .intro-copy h1 { margin: 0; color: var(--stamp); font-size: clamp(52px, 10vw, 92px); letter-spacing: .15em; line-height: 1; }
.intro-sub { color: var(--dim); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; } .intro-sub { color: var(--dim); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.intro-copy > p:not(.intro-sub) { color: #b0b0c4; } .intro-copy > p:not(.intro-sub) { color: #b0b0c4; }