gractwo/arche
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark mode

Browse Source
This commit is contained in:
Jakub Mańczak
2025-10-28 19:24:27 +01:00
parent 8415f9a114
commit 66cbf5dbba
6 changed files with 59 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/base.html
View File

@@ -14,7 +14,9 @@
<title>{% block title %}{{ title }}{% endblock %}</title> <title>{% block title %}{{ title }}{% endblock %}</title>
{% block head %} {% endblock %} {% block head %} {% endblock %}
</head> </head>
<body class="min-h-screen flex flex-col"> <body
class="min-h-screen flex flex-col bg-white text-black dark:bg-neutral-900 dark:text-neutral-100"
>
{% block pagecontent %} {{ pagecontent }} {% endblock %} {% block pagecontent %} {{ pagecontent }} {% endblock %}
</body> </body>
</html> </html>

24
web/footer.html
View File

@@ -1,5 +1,5 @@
<footer <footer
class="w-full h-full border-t border-neutral-300 bg-neutral-100 p-4 flex flex-col mt-auto" class="w-full h-full border-t border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col mt-auto"
> >
<div class="flex flex-col sm:grid sm:grid-cols-3 gap-8 mx-auto"> <div class="flex flex-col sm:grid sm:grid-cols-3 gap-8 mx-auto">
<section class="max-w-sm w-full"> <section class="max-w-sm w-full">
@@ -11,30 +11,38 @@
Gractwo Gractwo
</h1> </h1>
</div> </div>
<p class="text-neutral-500 text-sm"> <p class="text-neutral-500 dark:text-neutral-400 text-sm">
Poznańskie stowarzyszenie okołogrowe, anime-informatyzacyjno Poznańskie stowarzyszenie okołogrowe, anime-informatyzacyjno
konwentowo-hangoutowe. konwentowo-hangoutowe.
</p> </p>
</section> </section>
<section class="max-w-sm w-full"> <section class="max-w-sm w-full">
<h1 class="font-medium text-lg text-neutral-500 pb-4"> <h1
class="font-medium text-lg text-neutral-500 dark:text-neutral-400 pb-4"
>
Informacje prawne Informacje prawne
</h1> </h1>
<p class="text-sm text-neutral-500 mb-2"> <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
Stowarzyszenie niezawiązane. Stowarzyszenie niezawiązane.
</p> </p>
</section> </section>
<section class="max-w-sm w-full"> <section class="max-w-sm w-full">
<h1 class="font-medium text-lg text-neutral-500 pb-4">Kontakt</h1> <h1
<p class="text-sm text-neutral-500 mb-2"> class="font-medium text-lg text-neutral-500 dark:text-neutral-400 pb-4"
>
Kontakt
</h1>
<p class="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
Kontakt poprzez Discorda. Kontakt poprzez Discorda.
</p> </p>
<p class="text-sm text-neutral-500">Poznań, Polska</p> <p class="text-sm text-neutral-500 dark:text-neutral-400">
Poznań, Polska
</p>
</section> </section>
</div> </div>
<!--<hr class="mt-4 border-neutral-300" />--> <!--<hr class="mt-4 border-neutral-300" />-->
<p <p
class="text-center py-2 text-neutral-500 text-sm border-t border-neutral-300 mt-12 h-fit" class="text-center py-2 text-neutral-500 dark:text-neutral-400 text-sm border-t border-neutral-300 dark:border-neutral-700 mt-12 h-fit"
> >
&copy; 2020-2025 Gractwo. Wszystkie prawa zastrzeżone. &copy; 2020-2025 Gractwo. Wszystkie prawa zastrzeżone.
</p> </p>

22
web/index.html
View File

@@ -3,26 +3,26 @@
{% block title %}gractwo.pl | Witamy!{% endblock %} {% block pagecontent %} {% block title %}gractwo.pl | Witamy!{% endblock %} {% block pagecontent %}
<div <div
class="bg-gractwo-index-light flex flex-col items-center text-center w-full h-full flex-1" class="bg-gractwo-index flex flex-col items-center text-center w-full h-full flex-1"
> >
<div class="mt-16 md:mt-56 mx-auto [&>svg]:size-24"> <div class="mt-16 md:mt-56 mx-auto [&>svg]:size-24">
{% include "gractwo.svg" %} {% include "gractwo.svg" %}
</div> </div>
<h1 <h1
class="text-7xl font-semibold bg-gradient-to-r from-gractwo-red to-gractwo-blu from-30% to-70% text-transparent bg-clip-text" class="text-7xl font-semibold bg-linear-to-r from-gractwo-red to-gractwo-blu from-30% to-70% text-transparent bg-clip-text"
> >
Gractwo Gractwo
</h1> </h1>
<p <p
class="text-xl font-light mt-8 text-neutral-600 text-balance max-w-[50ch]" class="text-xl font-light mt-8 text-neutral-600 dark:text-neutral-300 text-balance max-w-[50ch]"
> >
Zakładamy okołogrowe, anime-informatyzacyjno konwentowo-hangoutowe Zakładamy okołogrowe, anime-informatyzacyjno konwentowo-hangoutowe
stowarzyszenie. Dołącz do nas! stowarzyszenie. Dołącz do nas!
</p> </p>
<div class="flex flex-row gap-4 mt-8"> <div class="flex flex-row gap-4 mt-8 dark:text-neutral-100">
<a <a
href="/discord" href="/discord"
class="flex gap-4 px-4 py-3 rounded text-neutral-100 hover:text-white font-semibold bg-gradient-to-r from-gractwo-red-semidark to-gractwo-red [text-rendering:geometricPrecision] hover:scale-[1.02] hover:-translate-y-[2px] hover:shadow-lg transition-all" class="flex gap-4 px-4 py-3 rounded text-neutral-100 hover:text-white font-semibold bg-linear-to-r from-gractwo-red-semidark to-gractwo-red [text-rendering:geometricPrecision] hover:scale-[1.02] hover:-translate-y-[2px] hover:shadow-lg transition-all"
> >
<span class="scale-[.75]">{% include "icons/users.svg" %}</span> <span class="scale-[.75]">{% include "icons/users.svg" %}</span>
<span>Dołącz na serwer Discord</span> <span>Dołącz na serwer Discord</span>
@@ -31,27 +31,29 @@
> >
</a> </a>
</div> </div>
<div class="flex flex-col sm:flex-row gap-2 mt-4 text-neutral-500"> <div
class="flex flex-col sm:flex-row gap-2 mt-4 text-neutral-500 dark:text-neutral-400"
>
<a <a
href="/github" href="/github"
class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition" class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 dark:hover:bg-neutral-700 hover:text-black dark:hover:text-white transition"
><span class="scale-[.75]">{% include "icons/github.svg" %}</span> ><span class="scale-[.75]">{% include "icons/github.svg" %}</span>
GitHub</a GitHub</a
> >
<a <a
href="/bsky" href="/bsky"
class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition" class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 dark:hover:bg-neutral-700 hover:text-black dark:hover:text-white transition"
><span class="scale-[.75]">{% include "icons/twitter.svg" %}</span> ><span class="scale-[.75]">{% include "icons/twitter.svg" %}</span>
Bluesky</a Bluesky</a
> >
<a <a
href="/youtube" href="/youtube"
class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition" class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 dark:hover:bg-neutral-700 hover:text-black dark:hover:text-white transition"
><span class="scale-[.75]">{% include "icons/youtube.svg" %}</span> ><span class="scale-[.75]">{% include "icons/youtube.svg" %}</span>
YouTube</a YouTube</a
> >
</div> </div>
<div class="my-16 flex flex-col sm:flex-row gap-4"> <div class="my-16 flex flex-col sm:flex-row gap-4 dark:text-neutral-100">
{%call statcard::statcard(dsc_members, "członków na discordzie")%} {%call statcard::statcard(dsc_members, "członków na discordzie")%}
{%call statcard::statcard(days_community, "dni istnienia {%call statcard::statcard(days_community, "dni istnienia
społeczności")%} społeczności")%}

71
web/input.css
View File

@@ -9,61 +9,22 @@
--color-gractwo-blu-dark: #3e8f9b; --color-gractwo-blu-dark: #3e8f9b;
} }
.bg-gractwo-index-light { @layer components {
background-size: "100% 100%"; .bg-gractwo-index {
background-image: background-size: "100% 100%";
radial-gradient(125% 125% at 50% 90%, #ffffff 40%, transparent 95%), background-image:
linear-gradient(to right, #ff637e 15%, #00d3f2 100%); radial-gradient(125% 125% at 50% 90%, #ffffff 40%, transparent 95%),
} linear-gradient(to right, #ff637e 15%, #00d3f2 100%);
@variant dark {
.dashed-top-fade-grid { background-image:
position: absolute; radial-gradient(
inset: 0; 125% 125% at 50% 90%,
z-index: 0; #1a1a1a 40%,
transparent 95%
background-image: ),
linear-gradient(to right, #e7e5e4 1px, transparent 1px), linear-gradient(to right, #ad415377 15%, #3e8f9b77 85%);
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 70% 60% at 50% 0%, #000 60%, transparent 100%);
-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 70% 60% at 50% 0%, #000 60%, transparent 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
} }
.dashed-bottom-fade-grid { .dashed-bottom-fade-grid {

12
web/notfound.html
View File

@@ -2,16 +2,20 @@
{% block title %}gractwo.pl | Błąd 404{% endblock %} {% block pagecontent %} {% block title %}gractwo.pl | Błąd 404{% endblock %} {% block pagecontent %}
<div class="w-full h-full flex-1 flex justify-center items-center relative"> <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="dashed-bottom-fade-grid w-full h-full z-10 dark:opacity-50"
></div>
<div class="sm:flex gap-2 z-20"> <div class="sm:flex gap-2 z-20">
<div class="[&>svg]:size-16 pl-2 sm:pl-0"> <div class="[&>svg]:size-16 pl-2 sm:pl-0">
{% include "gractwo.svg" %} {% include "gractwo.svg" %}
</div> </div>
<div class="px-2"> <div class="px-2">
<h1 class="font-bold text-2xl">Błąd 404</h1> <h1 class="font-bold text-2xl dark:text-neutral-100">Błąd 404</h1>
<p> <p class="dark:text-neutral-400">
Nie ma strony o podanym adresie. Nie ma strony o podanym adresie.
<a class="text-gractwo-blu-dark hover:underline" href="/" <a
class="text-gractwo-blu-dark hover:underline dark:text-gractwo-blu"
href="/"
>Wróć.</a >Wróć.</a
> >
</p> </p>

6
web/statcard.html
View File

@@ -1,8 +1,10 @@
{% macro statcard(number, description) %} {% macro statcard(number, description) %}
<div <div
class="min-w-64 flex-1 p-4 bg-neutral-100 border border-neutral-300 shadow rounded" class="min-w-64 flex-1 p-4 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 shadow rounded"
> >
<h1 class="font-bold text-2xl">{{ number }}</h1> <h1 class="font-bold text-2xl">{{ number }}</h1>
<p class="text-neutral-500 whitespace-nowrap">{{ description }}</p> <p class="text-neutral-500 dark:text-neutral-400 whitespace-nowrap">
{{ description }}
</p>
</div> </div>
{% endmacro %} {% endmacro %}