add dark mode

2025-10-28 19:24:27 +01:00
parent 8415f9a114
commit 66cbf5dbba
6 changed files with 59 additions and 80 deletions
--- a/web/base.html
+++ b/web/base.html
@@ -14,7 +14,9 @@
        <title>{% block title %}{{ title }}{% endblock %}</title>
        {% block head %} {% endblock %}
    </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 %}
    </body>
 </html>
--- a/web/footer.html
+++ b/web/footer.html
@@ -1,5 +1,5 @@
 <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">
        <section class="max-w-sm w-full">
@@ -11,30 +11,38 @@
                    Gractwo
                </h1>
            </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
                konwentowo-hangoutowe.
            </p>
        </section>
        <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
            </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.
            </p>
        </section>
        <section class="max-w-sm w-full">
-            <h1 class="font-medium text-lg text-neutral-500 pb-4">Kontakt</h1>
-            <p class="text-sm text-neutral-500 mb-2">
+            <h1
+                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.
            </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>
    </div>
    <!--<hr class="mt-4 border-neutral-300" />-->
    <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.
    </p>
--- a/web/index.html
+++ b/web/index.html
@@ -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")%}
--- a/web/input.css
+++ b/web/input.css
@@ -9,61 +9,22 @@
    --color-gractwo-blu-dark: #3e8f9b;
 }

-.bg-gractwo-index-light {
+@layer components {
+    .bg-gractwo-index {
        background-size: "100% 100%";
        background-image:
            radial-gradient(125% 125% at 50% 90%, #ffffff 40%, transparent 95%),
            linear-gradient(to right, #ff637e 15%, #00d3f2 100%);
-}
-
-.dashed-top-fade-grid {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-
+        @variant dark {
            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
+                radial-gradient(
+                    125% 125% at 50% 90%,
+                    #1a1a1a 40%,
+                    transparent 95%
                ),
-        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;
+                linear-gradient(to right, #ad415377 15%, #3e8f9b77 85%);
+        }
+    }
 }

 .dashed-bottom-fade-grid {
--- a/web/notfound.html
+++ b/web/notfound.html
@@ -2,16 +2,20 @@
 {% 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="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="[&>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>
+            <h1 class="font-bold text-2xl dark:text-neutral-100">Błąd 404</h1>
+            <p class="dark:text-neutral-400">
                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
                >
            </p>
--- a/web/statcard.html
+++ b/web/statcard.html
@@ -1,8 +1,10 @@
 {% macro statcard(number, description) %}
 <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>
-    <p class="text-neutral-500 whitespace-nowrap">{{ description }}</p>
+    <p class="text-neutral-500 dark:text-neutral-400 whitespace-nowrap">
+        {{ description }}
+    </p>
 </div>
 {% endmacro %}