From 9607b2313025e04ce023f2e3704bac6d15778aae Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Thu, 9 Oct 2025 12:22:21 +0200
Subject: [PATCH] fix 404 page, add dashed grid bg

---
 web/input.css     | 50 +++++++++++++++++++++++++++++++++++++++++++++++
 web/notfound.html | 23 ++++++++++++++--------
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/web/input.css b/web/input.css
index ec95a7c..90104dc 100644
--- a/web/input.css
+++ b/web/input.css
@@ -17,3 +17,53 @@
         #ff637e 120%
     );
 }
+
+.dashed-bottom-fade-grid {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+
+    background-image:
+        linear-gradient(to right, #e7e5e4 1px, transparent 1px),
+        linear-gradient(to bottom, #e7e5e4 1px, transparent 1px);
+    background-size: 20px 20px;
+    background-position:
+        0 0,
+        0 0;
+
+    mask-image:
+        repeating-linear-gradient(
+            to right,
+            black 0px,
+            black 3px,
+            transparent 3px,
+            transparent 8px
+        ),
+        repeating-linear-gradient(
+            to bottom,
+            black 0px,
+            black 3px,
+            transparent 3px,
+            transparent 8px
+        ),
+        radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%);
+    -webkit-mask-image:
+        repeating-linear-gradient(
+            to right,
+            black 0px,
+            black 3px,
+            transparent 3px,
+            transparent 8px
+        ),
+        repeating-linear-gradient(
+            to bottom,
+            black 0px,
+            black 3px,
+            transparent 3px,
+            transparent 8px
+        ),
+        radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%);
+
+    mask-composite: intersect;
+    -webkit-mask-composite: source-in;
+}
diff --git a/web/notfound.html b/web/notfound.html
index 66bd780..fd20194 100644
--- a/web/notfound.html
+++ b/web/notfound.html
@@ -1,14 +1,21 @@
 {% extends "base.html" %} {# # # # # # # # # # # # # # # # # # # # # # # # # #}
 {% block title %}gractwo.pl | Błąd 404{% endblock %} {% block pagecontent %}
 
-<div class="mx-auto my-auto sm:flex gap-2">
-    <div class="size-16 pl-2 sm:pl-0">{% include "gractwo.svg" %}</div>
-    <div class="px-2">
-        <h1 class="font-bold text-2xl">Błąd 404</h1>
-        <p>
-            Nie ma strony o podanym adresie.
-            <a class="text-gractwo-blu-dark hover:underline" href="/">Wróć.</a>
-        </p>
+<div class="w-full h-full flex-1 flex justify-center items-center relative">
+    <div class="dashed-bottom-fade-grid w-full h-full z-10"></div>
+    <div class="sm:flex gap-2 z-20">
+        <div class="[&>svg]:size-16 pl-2 sm:pl-0">
+            {% include "gractwo.svg" %}
+        </div>
+        <div class="px-2">
+            <h1 class="font-bold text-2xl">Błąd 404</h1>
+            <p>
+                Nie ma strony o podanym adresie.
+                <a class="text-gractwo-blu-dark hover:underline" href="/"
+                    >Wróć.</a
+                >
+            </p>
+        </div>
     </div>
 </div>