fix 404 page, add dashed grid bg

This commit is contained in:
2025-10-09 12:22:21 +02:00
parent ff12471308
commit 9607b23130
2 changed files with 65 additions and 8 deletions

View File

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

View File

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