Nautilus/bitsforfree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimize branded 404 artwork

Browse Source
This commit is contained in:
smileBeda
2026-08-31 12:07:38 -03:00
parent a3859f1efc
commit 5f20e5d2b7
9 changed files with 59 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/404.html
+18 -6
View File
@@ -17,9 +17,9 @@
<meta property="og:description" content="__SEO_DESCRIPTION__">
<meta property="og:url" content="__SEO_URL__">
<meta property="og:image" content="__SEO_IMAGE__">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1266">
<meta property="og:image:height" content="1242">
<meta property="og:image:type" content="image/webp">
<meta property="og:image:width" content="828">
<meta property="og:image:height" content="813">
<meta property="og:image:alt" content="__SEO_IMAGE_ALT__">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="__SEO_TITLE__">
@@ -31,6 +31,15 @@
<link rel="shortcut icon" href="/favicon.ico?v=20260814">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png?v=20260814">
<meta name="apple-mobile-web-app-title" content="Meme Protocol">
<link
rel="preload"
as="image"
type="image/webp"
href="/assets/homo-reseticus-404-552.f829379a.webp"
imagesrcset="/assets/homo-reseticus-404-276.0fde8f3e.webp 276w, /assets/homo-reseticus-404-552.f829379a.webp 552w, /assets/homo-reseticus-404-828.68be2119.webp 828w"
imagesizes="(max-width: 488px) 127px, (max-width: 1062px) 26vmin, 276px"
fetchpriority="high"
>
<link rel="stylesheet" href="/assets/styles.css">
</head>
<body class="not-found-page">
@@ -51,9 +60,12 @@
<section class="not-found-content" aria-label="Page not found">
<div class="not-found-visual">
<img
src="/assets/homo-reseticus-404.png"
width="1266"
height="1242"
src="/assets/homo-reseticus-404-552.f829379a.webp"
srcset="/assets/homo-reseticus-404-276.0fde8f3e.webp 276w, /assets/homo-reseticus-404-552.f829379a.webp 552w, /assets/homo-reseticus-404-828.68be2119.webp 828w"
sizes="(max-width: 488px) 127px, (max-width: 1062px) 26vmin, 276px"
width="552"
height="542"
fetchpriority="high"
alt="Homo Reseticus surrounded by an unreachable node pattern"
>
</div>
public/assets/homo-reseticus-404-276.0fde8f3e.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

public/assets/homo-reseticus-404-552.f829379a.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

public/assets/homo-reseticus-404-828.68be2119.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

public/assets/homo-reseticus-404.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 653 KiB

public/assets/styles.css
+6 -6
View File
@@ -957,7 +957,7 @@ dialog::backdrop {
.not-found-visual {
position: relative;
isolation: isolate;
width: clamp(190px, 39vmin, 414px);
width: clamp(127px, 26vmin, 276px);
max-width: 100%;
}
@@ -974,14 +974,14 @@ dialog::backdrop {
background:
radial-gradient(
ellipse at 50% 47%,
rgb(255 255 255 / 58%) 0%,
rgb(244 248 244 / 36%) 36%,
rgb(211 224 213 / 16%) 58%,
rgb(0 255 65 / 48%) 0%,
rgb(0 230 57 / 30%) 36%,
rgb(0 128 33 / 14%) 58%,
transparent 76%
),
radial-gradient(
ellipse at 50% 48%,
rgb(192 216 198 / 12%) 0%,
rgb(0 255 65 / 14%) 0%,
transparent 72%
);
content: "";
@@ -993,7 +993,7 @@ dialog::backdrop {
display: block;
width: 100%;
height: auto;
filter: contrast(1.06) drop-shadow(0 0 18px rgb(229 226 225 / 14%));
filter: contrast(1.06) drop-shadow(0 0 16px rgb(0 255 65 / 16%));
}
.not-found-action {