add stat cards to index page, new pattern, misc

web/index.html

@@ -1,10 +1,11 @@
 {% extends "base.html" %} {# # # # # # # # # # # # # # # # # # # # # # # # # #}
+{%- import "statcard.html" as statcard -%} {# # # # # # # # # # # # # # # # # #}
 {% 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 pb-48"
+    class="bg-gractwo-index-light flex flex-col items-center text-center w-full h-full flex-1"
 >
-    <div class="mt-16 md:mt-60 mx-auto [&>svg]:size-24">
+    <div class="mt-16 md:mt-56 mx-auto [&>svg]:size-24">
         {% include "gractwo.svg" %}
     </div>
     <h1
@@ -50,7 +51,12 @@
             YouTube</a
         >
     </div>
+    <div class="my-16 flex flex-col sm:flex-row gap-4">
+        {%call statcard::statcard(dsc_members, "członków na discordzie")%}
+        {%call statcard::statcard(days_community, "dni istnienia
+        społeczności")%}
+        <!--{% call statcard::statcard("0", "dni od powstania stowarzyszenia") %}-->
+    </div>
 </div>
 
-{% include "footer.html" %} {# # # # # # # # # # # # # # # # # # # # # # # # #}
-{% endblock %}
+{% include "footer.html" %} {% endblock %}

web/input.css

@@ -16,6 +16,56 @@
         linear-gradient(to right, #ff637e 15%, #00d3f2 100%);
 }
 
+.dashed-top-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 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 {
     position: absolute;
     inset: 0;

web/statcard.html

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