decentraland / sites / 30371322099

96%

push

github

feat: update the 404 illustration to the shrugging avatar (#704)

* feat: update the 404 illustration to the shrugging avatar

Replaces notfound_robot.webp with notfound_avatar.webp (801x698, cwebp
q85). The new artwork is nearly square instead of 16:9, so the image
width is re-derived from that ratio to keep the rendered height inside
Figma's 516px desktop slot and the mobile 62vw graphic block, and the
horizontal position is recentered on the 404 watermark.

* feat: center the 404 graphic vertically and scale it up on desktop

The avatar and the 404 watermark now share one center, are sized from the
free space next to the text column (height-driven, capped by that width)
and are centered vertically in the viewport along with the text column.
This makes the avatar noticeably larger on wide screens while keeping it
clear of the description at 1280x720, where the previous fixed 40vw cap
overlapped it. Short desktop viewports get a padding offset so the
centered text column clears the absolute logo. Mobile is unchanged.

* feat: move the 404 mark above the title instead of behind the avatar

As a backdrop the watermark competed with the artwork for the same space
and had to bleed off-screen to coexist with it. It now sits in the text
column above "Oops!" at the same 0.2 opacity, so the avatar reads clean.
Mobile spacing is tightened (column padding 150 -> 132, gap 60 -> 48,
graphic margin 48 -> 24) to keep the avatar above the fold now that the
mark takes vertical room in the flow; desktop keeps Figma's 60 gap.

4345 of 4855 branches covered (89.5%)

Branch coverage included in aggregate %.

20 of 20 new or added lines in 2 files covered. (100.0%)

10395 of 10480 relevant lines covered (99.19%)

17.83 hits per line