add dark mode

This commit is contained in:
2025-10-28 19:24:27 +01:00
parent 8415f9a114
commit 66cbf5dbba
6 changed files with 59 additions and 80 deletions

View File

@@ -3,26 +3,26 @@
{% block title %}gractwo.pl | Witamy!{% endblock %} {% block pagecontent %}
<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">
{% include "gractwo.svg" %}
</div>
<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
</h1>
<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
stowarzyszenie. Dołącz do nas!
</p>
<div class="flex flex-row gap-4 mt-8">
<div class="flex flex-row gap-4 mt-8 dark:text-neutral-100">
<a
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>Dołącz na serwer Discord</span>
@@ -31,27 +31,29 @@
>
</a>
</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
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>
GitHub</a
>
<a
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>
Bluesky</a
>
<a
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>
YouTube</a
>
</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(days_community, "dni istnienia
społeczności")%}