[func] mlodziez

[func] three leagues
[fix] ui stuff
[fix] scrollable table
[refactor] tailwind styles

.prettierignore

@@ -1,2 +1,2 @@
 # **/templates/**/*.html
-base.html
+# base.html

.worktime

@@ -8,3 +8,4 @@
 24.07.2022 - 3h 30 mins
 25.07.2022 - 3h 30 mins
 26.07.2022 - 1h 30 mins
+27.07.2022 - 4h

core/admin.py

@@ -24,6 +24,7 @@ apps = [
     'gpb',
     'tournaments',
     'membership',
+    'youth',
     'atu',
     'core'
 ]

core/context_processors.py

@@ -1,6 +1,36 @@
+
 from .models import *
+from db.main.models import *
+from db.administration.models import *
+from db.league.models import *
+from db.calendar.models import *
+from db.gpb.models import *
+from db.tournaments.models import *
+from db.membership.models import *
+from db.youth.models import *
+from db.atu.models import *
 
 
 def load_config(request):
-    config = {'nav': Button.objects.all()}
+    return {
-    return {'config': config}
+        'nav': Button.objects.all(),
+        'gpw': GrandPrixW.load(),
+        'posts': Post.objects.all(),
+        'czlonkowie': Member.objects.all(),
+        'statut': Statute.objects.first(),
+        'ogloszenia': Announcement.objects.all(),
+        'protokoly': Protocol.objects.all(),
+        'regulaminy': Regulation.objects.all(),
+        'rodos': RODO.objects.all(),
+        'leagues': {
+            'Wyniki I Ligi': FirstLeague.objects.all(),
+            'Wyniki II Ligi': SecondLeague.objects.all(),
+            'Wyniki III Ligi': ThirdLeague.objects.all()
+        },
+        'calendars': Calendar.objects.all(),
+        'gpb': GrandPrixB.load(),
+        'tournaments': Tournament.objects.all(),
+        'memberships': Membership.objects.all(),
+        'youth': Youth.load(),
+        'atu': Atu.load()
+    }

core/templates/administration.html

@@ -6,63 +6,77 @@
 <div
   class="flex flex-col lg:flex-row flex-wrap items-center justify-around gap-6 bg-white shadow-md rounded-md p-4 mb-2"
 >
-  <h1 class="text-[2.25rem] font-extrabold">Zarząd PodlZBS</h1>
+  <h1>Zarząd PodlZBS</h1>
   <nav>
     <ul class="flex flex-wrap justify-center lg:items-end gap-3">
-      <li
+      <li>
-        class="adm_nav-item {% if '/zarzad' == request.path %}adm_active{% endif %}"
+        <a
+          class="nbutton administration {% if '/zarzad' == request.path %}active{% endif %}"
+          href="{% url 'administration' %}"
+          >Zarząd</a
         >
-        <a href="{% url 'administration' %}">Zarząd</a>
       </li>
-      <li
+      <li>
-        class="adm_nav-item {% if 'ogloszenia' in request.path %}adm_active{% endif %}"
+        <a
+          class="nbutton administration {% if 'ogloszenia' in request.path %}active{% endif %}"
+          href="{% url 'administration_announcements' %}"
+          >Ogłoszenia</a
         >
-        <a href="{% url 'administration_announcements' %}">Ogłoszenia</a>
       </li>
-      <li
+      <li>
-        class="adm_nav-item {% if 'protokolyiuchwaly' in request.path %}adm_active{% endif %}"
+        <a
+          class="nbutton administration {% if 'protokolyiuchwaly' in request.path %}active{% endif %}"
+          href="{% url 'administration_protocols' %}"
+          >Protokoły i Uchwały</a
         >
-        <a href="{% url 'administration_protocols' %}">Protokoły i Uchwały</a>
       </li>
-      <li
+      <li>
-        class="adm_nav-item {% if 'regulaminy' in request.path %}adm_active{% endif %}"
+        <a
+          class="nbutton administration {% if 'regulaminy' in request.path %}active{% endif %}"
+          href="{% url 'administration_regulations' %}"
+          >Regulaminy</a
         >
-        <a href="{% url 'administration_regulations' %}">Regulaminy</a>
       </li>
-      <li
+      <li>
-        class="adm_nav-item {% if 'rodo' in request.path %}adm_active{% endif %}"
+        <a
+          class="nbutton administration {% if 'rodo' in request.path %}active{% endif %}"
+          href="{% url 'administration_rodos' %}"
+          >RODO</a
         >
-        <a href="{% url 'administration_rodos' %}">RODO</a>
       </li>
     </ul>
   </nav>
 </div>
 <div
-  class="mx-auto p-4 prose prose-h2:font-normal prose-h2:text-2xl prose-h2:text-center prose-h4:font-normal prose-h4:text-xl prose-h4:text-center"
+  class="mx-auto p-4 prose prose-h2:font-normal prose-h2:mb-2 prose-h4:font-normal"
 >
   {% block adm_content %}
-  <h2 class="prose prose-h2:font-light">
+  <a class="mb-0" href="{{ statut.attachment.url }}" target="_blank">
-    <a href="{{ statut.attachment.url }}" target="_blank">
+    <h2 class="my-0 text-center">{{ statut.title }}</h2>
-      <span class="my-0 text-center">{{ statut.title }}</span>
   </a>
-  </h2>
 
-  <h2 class="mb-2">Dane adresowe</h2>
+  <h2 class="mt-6">Dane adresowe</h2>
   <h3
-    class="flex flex-col items-center text-xl font-medium px-4 py-3 bg-blue-50 border border-blue-100 rounded-md shadow-md mb-8"
+    class="flex flex-col items-center text-center text-xl font-medium px-4 py-3 bg-blue-50 border border-blue-100 rounded-md shadow-md mb-8"
   >
-    <span>Adres Podlaskiego ZBS - 15-057 Białystok</span>
+    <span>Adres Podlaskiego ZBS - <strong>15-057 Białystok</strong></span>
-    <span>ul. B. Chrobrego 5B m.33</span>
+    <span><strong>ul. B. Chrobrego 5B m.33</strong></span>
-    <span>Konto: PKO SA O/B-tok 43 1240 5211 1111 0000 4919 1721</span>
+    <span
-    <span>NIP: 542 258 14 53 REGON 050816091</span>
+      >Konto: PKO SA O/B-tok
+      <strong
+        >43&nbsp;1240&nbsp;5211&nbsp;1111&nbsp;0000&nbsp;4919&nbsp;1721</strong
+      >
+    </span>
+    <span>NIP: <strong>542&nbsp;258&nbsp;14&nbsp;53</strong></span>
+    <span>REGON: <strong>050816091</strong></span>
   </h3>
 
-  <h2 class="mb-2">Członkowie</h2>
+  <h2>Członkowie</h2>
   {% if czlonkowie %}
   <div class="flex flex-col gap-4 text-center items-center place-items-center">
     {% for member in czlonkowie %}
     <h3
-      class="w-screen max-w-screen-lg flex flex-col lg:flex-row-reverse justify-between items-center px-4 py-3 bg-blue-50 border border-blue-100 rounded-md shadow-md my-0"
+      class="w-full lg:w-screen max-w-screen-lg flex flex-col lg:flex-row-reverse justify-between items-center px-4 py-3 bg-blue-50 border border-blue-100 rounded-md shadow-md my-0"
     >
       <span class="text-2xl font-light mb-0">{{ member.function }}</span>
       <div class="text-left">

core/templates/atu.html

@@ -2,8 +2,10 @@
 <!---->
 {% block title %}ATU | pdlzbs{% endblock %}
 <!---->
-{% load static tailwind_tags %} {% block content %}
+{% load static tailwind_tags tablepipe %} {% block content %}
 <div class="flex">
-  <article class="prose mx-auto">{{ atu.content | safe }}</article>
+  <article class="max-w-full mx-auto scrollable">
+    {{ atu.content | tablescroll | safe }}
+  </article>
 </div>
 {% endblock %}

core/templates/base.html

@@ -20,18 +20,32 @@
 
   <body class="antialiased flex flex-col gap-4 bg-stone-50">
     <header class="w-full bg-white shadow-md border-b border-slate-400 pb-1">
-      <div class="m-4 container flex flex-col lg:flex-row items-center lg:items-start justify-around mx-auto">
+      <div
-        <div class="self-center"><img class="min-w-[145px] min-h-[125px]" src="{% static 'logo.webp' %}" alt="" /></div>
+        class="m-4 container flex flex-col lg:flex-row items-center lg:items-start justify-around mx-auto"
-        <div class="flex flex-col self-end">
+      >
-          <div class="mb-4 mx-auto p-2 text-center">
+        <div class="self-center">
-            <h1 class="text-4xl">Podlaski Związek <br> Brydża Sportowego</h1>
+          <img class="max-h-[200px]" src="{% static 'podlzbs.jpg' %}" alt="" />
         </div>
-          {% if config.nav %}
+        <div class="flex flex-col lg:self-end">
+          <div class="mb-4 mx-auto p-2 text-center">
+            <h1>
+              Podlaski Związek <br />
+              Brydża Sportowego
+            </h1>
+          </div>
+          {% if nav %}
           <nav>
-            <ul class="flex flex-wrap justify-center lg:items-end gap-3 text-[15px] leading-5 m-2">
+            <ul
-              {% for button in config.nav %}
+              class="flex flex-wrap justify-center lg:items-end gap-3 text-[15px] leading-5 m-2"
-              <li class="nav-item {% if button.href == '/' %}{{ home }}{% elif button.href in request.path %}active{% endif %}">
+            >
-                <a href="{{ button.href }}">{{ button.title }}</a>
+              {% for button in nav %}
+              <li>
+                <a
+                  class="nbutton home {% if button.href == '/' %}{{ home }}{% elif button.href in request.path %}active{% endif %}"
+                  href="{{ button.href }}"
+                  target="{% if button.blank %}_blank{% else %}_self{% endif %}"
+                  >{{ button.title }}</a
+                >
               </li>
               {% endfor %}
             </ul>
@@ -40,26 +54,41 @@
         </div>
         <nav class="flex flex-wrap justify-center items-center gap-6 mt-8">
           <div title="Cezar">
-            <a href="http://www.msc.com.pl/cezar" target="_blank"><img class="max-h-12" src="{% static 'cezar.gif' %}" alt="Cezar" /></a>
+            <a href="http://www.msc.com.pl/cezar" target="_blank"
+              ><img class="max-h-12" src="{% static 'cezar.gif' %}" alt="Cezar"
+            /></a>
           </div>
           <div title="PZBS">
-            <a href="http://www.pzbs.pl" target="_blank"><img src="{% static 'pzbs.webp' %}" alt="PZBS" /></a>
+            <a href="http://www.pzbs.pl" target="_blank"
+              ><img src="{% static 'pzbs.webp' %}" alt="PZBS"
+            /></a>
           </div>
           <div title="Łomżyńska Akademia Brydża Sportowego">
-            <a href="http://www.labs.lomza.pl/" target="_blank"><img src="{% static 'labs.webp' %}" alt="LABS" /></a>
+            <a href="http://www.labs.lomza.pl/" target="_blank"
+              ><img class="max-h-12" src="{% static 'labs.jpg' %}" alt="ŁABS"
+            /></a>
           </div>
           <div>
-            <a href="{% url 'atu' %}" target="_self" id="atu" class="h-[40px] w-[48px] items-center text-white"
+            <a
-              ><div class="flex h-full items-center justify-center"><span class="text-[13px] font-bold">ATU</span></div></a
+              id="atu"
+              href="{% url 'atu' %}"
+              class="h-[40px] w-[48px] items-center text-white"
+              ><div class="flex h-full items-center justify-center">
+                <span class="text-[13px] font-bold">ATU</span>
+              </div></a
             >
           </div>
           <div title="Miejski Białostocki Klub Brydżowy">
-            <a href="https://andys0101.wixsite.com/pdlzbs/mbkb" target="_self"><img src="{% static 'mbkb.webp' %}" alt="MBKB" /></a>
+            <a href="https://andys0101.wixsite.com/pdlzbs/mbkb"
+              ><img src="{% static 'mbkb.webp' %}" alt="MBKB"
+            /></a>
           </div>
         </nav>
       </div>
     </header>
-    <main class="container mx-auto p-4">
+    <main
+      class="container xl:max-w-screen-xl mx-auto p-4 prose-img:m-1 prose-p:my-[0.3em]"
+    >
       {% block content %}{% endblock %}
     </main>
     <footer class="footer text-center font-light italic">

core/templates/calendar.html

@@ -1,16 +1,14 @@
 {% extends 'base.html' %} {% block title %}Kalendarz | pdlzbs{% endblock %} {%
-load static tailwind_tags %} {% block content %}
+load static tailwind_tags tablepipe %} {% block content %}
 <div class="flex flex-col items-center gap-4">
   {% for calendar in calendars %}
   <article class="w-full pb-4">
-    <h1 class="text-[2.25rem] font-extrabold text-center">
+    {{ calendar.content | tablescroll | safe }}
-      Kalendarz {{ calendar.year }}
-    </h1>
-    <div>{{ calendar.content | safe }}</div>
   </article>
   {% if not forloop.last %}
   <hr class="w-36 border-b border-stone-200" />
   {% endif %} {% empty %}
   <span class="py-4 text-xl">Brak kalendarzy</span>
-  {% endfor %} {% endblock %}
+  {% endfor %}
 </div>
+{% endblock %}

core/templates/grandprix.html

@@ -2,11 +2,6 @@
 <!---->
 {% block title %}Grand Prix Białegostoku | pdlzbs{% endblock %}
 <!---->
-{% load static tailwind_tags %} {% block content %}
+{% load static tailwind_tags tablepipe %} {% block content %}
-<article class="w-full">
+<article class="w-full">{{ gpb.content | tablescroll | safe }}</article>
-  <h1 class="text-[2.25rem] font-extrabold text-center">
-    Grand Prix Białegostoku
-  </h1>
-  <div>{{ gp.content | safe }}</div>
-</article>
 {% endblock %}

core/templates/home.html

@@ -1,15 +1,14 @@
 {% extends 'base.html' %} {% block title %}Strona główna | pdlzbs{% endblock %}
-{% load static tailwind_tags %} {% block content %}
+{% load static tailwind_tags tablepipe %} {% block content %}
 <div class="flex flex-col lg:flex-row justify-center gap-8">
   <article
-    class="basis-1/2 mb-auto prose max-w-screen-sm bg-white shadow-md rounded-md p-4"
+    class="basis-1/2 prose max-w-screen-sm mb-auto bg-white shadow-md rounded-md p-4"
   >
-    <h1>Grand Prix Województwa</h1>
+    {{ gpw.content | tablescroll | safe }}
-    {{ gpw.content | safe }}
   </article>
-  <div class="basis-1/2 max-w-screen-sm flex flex-col items-center gap-4">
+  <div class="basis-1/2 flex flex-col items-center gap-4">
     <h1
-      class="text-[2.25rem] font-medium w-full lg:text-right bg-white shadow-md rounded-md px-4 py-2"
+      class="text-[2.25rem] font-medium w-full text-center bg-white shadow-md rounded-md px-4 py-2"
     >
       Aktualności PodlZBS
     </h1>
@@ -18,14 +17,14 @@
     <article
       class="prose max-w-full w-full py-4 bg-white shadow-md rounded-md p-4"
     >
-      <h2 class="text-center font-medium">{{ post.title }}</h2>
+      {% if post.title %}
-      <div>{{ post.content | safe }}</div>
+      <h2 class="font-medium">{{ post.title }}</h2>
+      {% endif %}
+      <div>{{ post.content | tablescroll | safe }}</div>
     </article>
     {% if not forloop.last %}
     <hr class="w-36 border-b border-stone-200" />
-    {% endif %} {% empty %}
+    {% endif %} {% endfor %}
-    <h2 class="py-4 text-xl text-center">Więcej wpisów nie ma</h2>
-    {% endfor %}
   </div>
 </div>
 {% endblock %}

core/templates/league.html

@@ -1,24 +1,34 @@
 {% extends 'base.html' %}
 <!---->
-{% block title %}Liga | pdlzbs{% endblock %}
+{% block title %}Ligi | pdlzbs{% endblock %}
 <!---->
 {% load static tailwind_tags %} {% block content %}
-<h1 class="text-[2.25rem] font-extrabold text-center mb-4">Wyniki III ligi</h1>
+<!---->
+
 {% if leagues %}
+<div class="flex flex-col lg:flex-row justify-around gap-8">
+  {% for name, league in leagues.items %}
+  <div>
+    <h1 class="text-center mb-4">{{ name }}</h1>
     <ul class="flex flex-col items-center gap-4">
-  {% for league in leagues %}
+      {% for score in league %}
       <li>
         <a
-      href="{{ league.link }}"
+          href="{{ score.link }}"
           target="_blank"
           rel="noreferrer noopener"
-      class="transition ease-in-out duration-300 inline-block px-4 py-3 rounded-md shadow-md border font-semibold {% if forloop.counter0|divisibleby:2 %}border-pink-200 bg-pink-100 hover:border-pink-300 hover:bg-pink-200 {% else %} border-rose-200 bg-rose-100 hover:border-rose-300 hover:bg-rose-200{% endif %}"
+          class="button {% if forloop.counter0|divisibleby:2 %} pink color {% else %} rose color {% endif %}"
         >
-      <h2>Wyniki III ligi DMP {{ league.year }}-{{ league.year | add:"1" }}</h2>
+          Wyniki III ligi DMP {{ score.year }}-{{ score.year | add:"1" }}
         </a>
       </li>
+      {% empty %}
+      <h2>Brak wyników</h2>
       {% endfor %}
     </ul>
+  </div>
+  {% endfor %}
+</div>
 {% else %}
-<h2 class="py-4 text-xl text-center">Brak wyników</h2>
+<h2>Brak wyników</h2>
 {% endif %} {% endblock %}

core/templates/membership.html

@@ -2,24 +2,14 @@
 <!---->
 {% block title %}Składki Członkowskie | pdlzbs{% endblock %}
 <!---->
-{% load static tailwind_tags %} {% block content %}
+{% load static tailwind_tags tablepipe %} {% block content %}
-<h1 class="text-[2.25rem] font-extrabold text-center mb-4">
+<div class="flex flex-col items-center gap-4">
-  Składki członkowskie
-</h1>
-{% if memberships %}
-<ul class="flex flex-col items-center gap-4">
   {% for membership in memberships %}
-  <li>
+  <article class="w-full pb-4">{{ membership.content | safe }}</article>
-    <a
+  {% if not forloop.last %}
-      href="{{ membership.attachment.url }}"
+  <hr class="w-36 border-b border-stone-200" />
-      target="_blank"
+  {% endif %} {% empty %}
-      class="transition ease-in-out duration-300 inline-block px-4 py-3 rounded-md shadow-md border font-semibold {% if forloop.counter0|divisibleby:2 %}border-sky-200 bg-sky-100 hover:border-sky-300 hover:bg-sky-200 {% else %} border-indigo-200 bg-indigo-100 hover:border-indigo-300 hover:bg-indigo-200{% endif %}"
+  <span class="py-4 text-xl">Brak dokumentów</span>
-    >
-      <h2 class="my-0">{{ membership }}</h2>
-    </a>
-  </li>
   {% endfor %}
-</ul>
+</div>
-{% else %}
+{% endblock %}
-<h2 class="text-xl text-center">Brak dokumentów</h2>
-{% endif %} {% endblock %}

core/templates/tournaments.html

@@ -2,13 +2,13 @@
 <!---->
 {% block title %}Składki Członkowskie | pdlzbs{% endblock %}
 <!---->
-{% load static tailwind_tags %} {% block content %}
+{% load static tailwind_tags tablepipe %} {% block content %}
-<h1 class="text-[2.25rem] font-extrabold text-center mb-4">Inne turnieje</h1>
+<h1 class="text-center mb-4">Inne turnieje</h1>
 {% if tournaments %}
 <div class="flex flex-col items-center gap-4">
   {% for tournament in tournaments %}
   <article
-    class="prose prose-a:text-center bg-white rounded-md shadow-md p-4 pb-6"
+    class="prose prose-a:text-center w-full max-w-screen-md bg-white rounded-md shadow-md p-4 pb-6"
   >
     {% if tournament.title %}
     <h2>{{ tournament.title }}</h2>
@@ -23,7 +23,7 @@
       <a
         href="{{ tournament.link }}"
         target="_blank"
-        class="transition ease-in-out duration-300 px-4 py-3 rounded-md shadow-md font-semibold no-underline border border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200"
+        class="inline px-16 button red color"
       >
         Wyniki
       </a>
@@ -34,5 +34,5 @@
   {% endif %} {% endfor %}
 </div>
 {% else %}
-<h2 class="text-xl text-center">Brak turniejów</h2>
+<h2>Brak turniejów</h2>
 {% endif %} {% endblock %}

core/templates/youth.html

@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+<!---->
+{% block title %}Młodzież | pdlzbs{% endblock %}
+<!---->
+{% load static tailwind_tags tablepipe %} {% block content %}
+<article class="w-full">{{ youth.content | safe }}</article>
+{% endblock %}

core/templatetags/tablepipe.py

@@ -0,0 +1,10 @@
+from django import template
+import re
+
+register = template.Library()
+
+
+@register.filter(name='tablescroll')
+def get_due_date_string(value):
+    a = re.sub(r'<table[^>]*?>', '<div style="overflow-x: auto">\g<0>', value)
+    return re.sub(r'<\/table>', '</table></div>', a)

core/urls.py

@@ -12,10 +12,11 @@ urlpatterns = [
          name='administration_regulations'),
     path('zarzad/rodo', AdministrationRODOView.as_view(),
          name='administration_rodos'),
-    path('liga', LeagueView.as_view(), name='league'),
+    path('ligi', LeagueView.as_view(), name='league'),
     path('kalendarz', CalendarView.as_view(), name='calendar'),
     path('grandprixbialegostoku', GrandPrixView.as_view(), name='gpx'),
     path('inneturnieje', TournamentView.as_view(), name='tournaments'),
     path('skladki', MembershipView.as_view(), name='membership'),
+    path('mlodziez', YouthView.as_view(), name='youth'),
     path('atu', AtuView.as_view(), name='atu'),
 ]

core/views.py

@@ -3,136 +3,59 @@ from django.views.generic import TemplateView
 import importlib
 import pkgutil
 
-from db.main.models import *
-from db.administration.models import *
-from db.league.models import *
-from db.calendar.models import *
-from db.gpb.models import *
-from db.tournaments.models import *
-from db.membership.models import *
-from db.atu.models import *
-
 # Create your views here.
 
 
 class HomeView(TemplateView):
     template_name = 'home.html'
-
+    extra_context = {
-    def get_context_data(self, **kwargs):
+        'home': 'active'
-        return {
-            **super().get_context_data(**kwargs),
-            'home': 'active',
-            'gpw': GrandPrixW.load(),
-            'posts': Post.objects.all(),
     }
 
 
 class AdministrationView(TemplateView):
     template_name = 'administration.html'
 
-    def get_context_data(self, **kwargs):
-        return {
-            **super().get_context_data(**kwargs),
-            'czlonkowie': Member.objects.all(),
-            'statut': Statute.objects.first(),
-        }
-
 
 class AdministrationAnnouncementsView(TemplateView):
     template_name = 'administration/announcements.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['ogloszenia'] = Announcement.objects.all()
-
-        return context
-
 
 class AdministrationProtocolsView(TemplateView):
     template_name = 'administration/protocols.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['protokoly'] = Protocol.objects.all()
-
-        return context
-
 
 class AdministrationRegulationsView(TemplateView):
     template_name = 'administration/regulations.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['regulaminy'] = Regulation.objects.all()
-
-        return context
-
 
 class AdministrationRODOView(TemplateView):
     template_name = 'administration/rodos.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['rodos'] = RODO.objects.all()
-
-        return context
-
 
 class LeagueView(TemplateView):
     template_name = 'league.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['leagues'] = League.objects.all()
-
-        return context
-
 
 class CalendarView(TemplateView):
     template_name = 'calendar.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['calendars'] = Calendar.objects.all()
-
-        return context
-
 
 class GrandPrixView(TemplateView):
     template_name = 'grandprix.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['gp'] = GrandPrixB.load()
-
-        return context
-
 
 class TournamentView(TemplateView):
     template_name = "tournaments.html"
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['tournaments'] = Tournament.objects.all()
-
-        return context
-
 
 class MembershipView(TemplateView):
     template_name = 'membership.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['memberships'] = Membership.objects.all()
 
-        return context
+class YouthView(TemplateView):
+    template_name = "youth.html"
 
 
 class AtuView(TemplateView):
     template_name = 'atu.html'
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['atu'] = Atu.load()
-
-        return context

db/league/migrations/0003_firstleague_secondleague_rename_league_thirdleague_and_more.py

@@ -0,0 +1,43 @@
+# Generated by Django 4.0.5 on 2022-07-27 00:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('league', '0002_alter_league_options'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='FirstLeague',
+            fields=[
+                ('year', models.IntegerField(primary_key=True, serialize=False, verbose_name='Rok')),
+                ('link', models.CharField(max_length=512, verbose_name='Link do wyników')),
+            ],
+            options={
+                'verbose_name': 'Wyniki I ligi',
+                'verbose_name_plural': 'Wyniki I ligi',
+            },
+        ),
+        migrations.CreateModel(
+            name='SecondLeague',
+            fields=[
+                ('year', models.IntegerField(primary_key=True, serialize=False, verbose_name='Rok')),
+                ('link', models.CharField(max_length=512, verbose_name='Link do wyników')),
+            ],
+            options={
+                'verbose_name': 'Wyniki II ligi',
+                'verbose_name_plural': 'Wyniki II ligi',
+            },
+        ),
+        migrations.RenameModel(
+            old_name='League',
+            new_name='ThirdLeague',
+        ),
+        migrations.AlterModelOptions(
+            name='thirdleague',
+            options={'verbose_name': 'Wyniki III ligi', 'verbose_name_plural': 'Wyniki III ligi'},
+        ),
+    ]

db/league/models.py

@@ -4,13 +4,37 @@ from django.db import models
 
 
 class League(models.Model):
+    rank = '_'
     year = models.IntegerField('Rok', primary_key=True)
     link = models.CharField('Link do wyników', max_length=512)
 
     def __str__(self):
-        return f'Liga {self.year}'
+        return f'{self.rank} Liga {self.year}'
 
     class Meta:
-        verbose_name = 'Wyniki ligi'
+        abstract = True
-        verbose_name_plural = 'Wyniki ligi'
         ordering = ['-year']
+
+
+class FirstLeague(League):
+    rank = 'I'
+
+    class Meta:
+        verbose_name = 'Wyniki I ligi'
+        verbose_name_plural = 'Wyniki I ligi'
+
+
+class SecondLeague(League):
+    rank = 'II'
+
+    class Meta:
+        verbose_name = 'Wyniki II ligi'
+        verbose_name_plural = 'Wyniki II ligi'
+
+
+class ThirdLeague(League):
+    rank = 'III'
+
+    class Meta:
+        verbose_name = 'Wyniki III ligi'
+        verbose_name_plural = 'Wyniki III ligi'

db/membership/migrations/0002_remove_membership_attachment_membership_content.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.0.5 on 2022-07-27 01:06
+
+from django.db import migrations
+import tinymce.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('membership', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='membership',
+            name='attachment',
+        ),
+        migrations.AddField(
+            model_name='membership',
+            name='content',
+            field=tinymce.models.HTMLField(blank=True, default='', verbose_name='Treść'),
+        ),
+    ]

db/membership/models.py

@@ -1,11 +1,12 @@
 from django.db import models
+from tinymce.models import HTMLField
 
 # Create your models here.
 
 
 class Membership(models.Model):
     year = models.IntegerField('Rok', primary_key=True)
-    attachment = models.FileField('Plik pdf', upload_to='skladki')
+    content = HTMLField('Treść', default='', blank=True)
 
     def __str__(self):
         return f'Składki członkowskie {self.year}'

db/tournaments/models.py

@@ -14,7 +14,7 @@ class Tournament(OrderableModel):
     link = models.TextField('Link do wyników')
 
     def __str__(self):
-        return self.title or '(bez tytułu)'
+        return self.title or '(brak tytułu)'
 
     class Meta(OrderableModel.Meta):
         verbose_name = 'Inny turniej'

db/youth/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class YouthConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'db.youth'
+    verbose_name = '8. Młodzież'

db/youth/migrations/0001_initial.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.0.5 on 2022-07-26 22:29
+
+from django.db import migrations, models
+import tinymce.models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Youth',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('content', tinymce.models.HTMLField(blank=True, default='', verbose_name='Tekst')),
+            ],
+            options={
+                'verbose_name': 'Młodzież',
+                'verbose_name_plural': 'Młodzież',
+            },
+        ),
+    ]

db/youth/models.py

@@ -0,0 +1,16 @@
+from django.db import models
+from tinymce.models import HTMLField
+from core.utils import SingletonModel
+
+# Create your models here.
+
+
+class Youth(SingletonModel):
+    content = HTMLField('Tekst', default='', blank=True)
+
+    def __str__(self):
+        return 'Młodzież'
+
+    class Meta:
+        verbose_name = 'Młodzież'
+        verbose_name_plural = 'Młodzież'

pdlzbs/settings.py

@@ -50,6 +50,7 @@ INSTALLED_APPS = [
     'db.gpb',
     'db.tournaments',
     'db.membership',
+    'db.youth',
     'db.atu',
     'theme',
     'core'

static/css/dist/styles.css

@@ -1081,89 +1081,155 @@ select {
   margin-bottom: 0;
 }
 
-.nav-item > a {
+.button {
   display: inline-block;
   border-radius: 0.375rem;
   border-width: 1px;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-weight: 600;
+}
+
+.nbutton {
+  display: inline-block;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 10px;
+  padding-top: 0.5rem;
+}
+
+.nbutton:hover {
+  border-bottom-width: 4px;
+  padding-bottom: 7px;
+}
+
+.nbutton.active {
+    border-bottom-width: 4px;
+  }
+
+.nbutton.active {
+    padding-bottom: 7px;
+  }
+
+.nbutton.home {
+    --tw-border-opacity: 1;
     border-color: rgb(187 247 208 / var(--tw-border-opacity));
+  }
+
+.nbutton.home {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity));
+  }
+
+.nbutton.home {
     --tw-bg-opacity: 1;
     background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-bottom: 10px;
-  padding-top: 0.5rem;
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-.nav-item > a:hover {
+.nbutton.home:hover {
-  border-bottom-width: 4px;
+    --tw-border-opacity: 1;
     border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  }
+
+.nbutton.home:hover {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(22 163 74 / var(--tw-border-opacity));
+  }
+
+.nbutton.home:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-  padding-bottom: 7px;
   }
 
-.active > a {
+.nbutton.home.active {
-  border-bottom-width: 4px;
+      --tw-border-opacity: 1;
       border-color: rgb(134 239 172 / var(--tw-border-opacity));
+    }
+
+.nbutton.home.active {
       --tw-border-opacity: 1;
       border-bottom-color: rgb(22 163 74 / var(--tw-border-opacity));
+    }
+
+.nbutton.home.active {
       --tw-bg-opacity: 1;
       background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-  padding-bottom: 7px;
     }
 
-.adm_nav-item > a {
+.nbutton.administration {
-  display: inline-block;
+    --tw-border-opacity: 1;
-  border-radius: 0.375rem;
-  border-width: 1px;
     border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(59 130 246 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration {
     --tw-bg-opacity: 1;
     background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-bottom: 10px;
-  padding-top: 0.5rem;
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-.adm_nav-item > a:hover {
+.nbutton.administration:hover {
-  border-bottom-width: 4px;
+    --tw-border-opacity: 1;
     border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration:hover {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(37 99 235 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  padding-bottom: 7px;
   }
 
-.adm_active > a {
+.nbutton.administration.active {
       border-bottom-width: 4px;
+    }
+
+.nbutton.administration.active {
+      --tw-border-opacity: 1;
       border-color: rgb(147 197 253 / var(--tw-border-opacity));
+    }
+
+.nbutton.administration.active {
       --tw-border-opacity: 1;
       border-bottom-color: rgb(37 99 235 / var(--tw-border-opacity));
+    }
+
+.nbutton.administration.active {
       --tw-bg-opacity: 1;
       background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+    }
+
+.nbutton.administration.active {
       padding-bottom: 7px;
     }
 
@@ -1218,14 +1284,18 @@ select {
   margin-bottom: 0.5rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .mb-0 {
   margin-bottom: 0px;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1242,10 +1312,6 @@ select {
   display: block;
 }
 
-.inline-block {
-  display: inline-block;
-}
-
 .inline {
   display: inline;
 }
@@ -1290,12 +1356,16 @@ select {
   max-height: 18rem;
 }
 
-.min-h-\[125px\] {
+.max-h-24 {
-  min-height: 125px;
+  max-height: 6rem;
 }
 
-.w-screen {
+.max-h-\[200px\] {
-  width: 100vw;
+  max-height: 200px;
+}
+
+.min-h-\[125px\] {
+  min-height: 125px;
 }
 
 .w-full {
@@ -1322,8 +1392,20 @@ select {
   max-width: 100%;
 }
 
-.basis-3\/5 {
+.max-w-screen-sm {
-  flex-basis: 60%;
+  max-width: 640px;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
+.max-w-\[48px\] {
+  max-width: 48px;
+}
+
+.basis-1\/2 {
+  flex-basis: 50%;
 }
 
 .border-collapse {
@@ -1382,10 +1464,6 @@ select {
   gap: 2rem;
 }
 
-.self-end {
-  align-self: flex-end;
-}
-
 .self-center {
   align-self: center;
 }
@@ -1426,31 +1504,6 @@ select {
   border-color: rgb(214 211 209 / var(--tw-border-opacity));
 }
 
-.border-rose-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 205 211 / var(--tw-border-opacity));
-}
-
-.border-pink-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 207 232 / var(--tw-border-opacity));
-}
-
-.border-indigo-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(199 210 254 / var(--tw-border-opacity));
-}
-
-.border-sky-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(186 230 253 / var(--tw-border-opacity));
-}
-
-.border-red-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1466,31 +1519,6 @@ select {
   background-color: rgb(250 250 249 / var(--tw-bg-opacity));
 }
 
-.bg-pink-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
-}
-
-.bg-rose-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
-}
-
-.bg-sky-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
-}
-
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1524,6 +1552,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1548,10 +1581,6 @@ select {
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
-.text-\[2\.25rem\] {
-  font-size: 2.25rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1572,11 +1601,6 @@ select {
   line-height: 1rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-\[15px\] {
   font-size: 15px;
 }
@@ -1585,15 +1609,15 @@ select {
   font-size: 13px;
 }
 
+.text-\[2\.25rem\] {
+  font-size: 2.25rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
 
-.font-extrabold {
-  font-weight: 800;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -1635,11 +1659,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -1664,22 +1683,126 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.duration-300 {
-  transition-duration: 300ms;
-}
-
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.color.pink {
+    --tw-border-opacity: 1;
+    border-color: rgb(251 207 232 / var(--tw-border-opacity));
+  }
+
+.color.pink {
+    --tw-bg-opacity: 1;
+    background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+  }
+
+.color.pink:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 168 212 / var(--tw-border-opacity));
+  }
+
+.color.pink:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+  }
+
+.color.rose {
+    --tw-border-opacity: 1;
+    border-color: rgb(254 205 211 / var(--tw-border-opacity));
+  }
+
+.color.rose {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 228 230 / var(--tw-bg-opacity));
+  }
+
+.color.rose:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(253 164 175 / var(--tw-border-opacity));
+  }
+
+.color.rose:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 205 211 / var(--tw-bg-opacity));
+  }
+
+.color.sky {
+    --tw-border-opacity: 1;
+    border-color: rgb(186 230 253 / var(--tw-border-opacity));
+  }
+
+.color.sky {
+    --tw-bg-opacity: 1;
+    background-color: rgb(224 242 254 / var(--tw-bg-opacity));
+  }
+
+.color.sky:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(125 211 252 / var(--tw-border-opacity));
+  }
+
+.color.sky:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+  }
+
+.color.indigo {
+    --tw-border-opacity: 1;
+    border-color: rgb(199 210 254 / var(--tw-border-opacity));
+  }
+
+.color.indigo {
+    --tw-bg-opacity: 1;
+    background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+  }
+
+.color.indigo:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(165 180 252 / var(--tw-border-opacity));
+  }
+
+.color.indigo:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+  }
+
+.color.red {
+    --tw-border-opacity: 1;
+    border-color: rgb(254 202 202 / var(--tw-border-opacity));
+  }
+
+.color.red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  }
+
+.color.red:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(252 165 165 / var(--tw-border-opacity));
+  }
+
+.color.red:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  }
+
+h1 {
+  font-size: 2.25em;
+  font-weight: 500;
+}
+
+h2 {
+  text-align: center;
+  font-size: 1.5em;
+  font-weight: 300;
+}
+
+h4 {
+  text-align: center;
+  font-size: 1.25em;
+}
+
 #atu {
   transition: all 0.2s ease, visibility 0s;
   border-radius: 0px;
@@ -1689,95 +1812,40 @@ select {
   display: block;
 }
 
-.hover\:border-pink-300:hover {
+.prose-h2\:mb-2 :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  --tw-border-opacity: 1;
+  margin-bottom: 0.5rem;
-  border-color: rgb(249 168 212 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 164 175 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(125 211 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity));
-}
-
-.hover\:bg-pink-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 205 211 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
-
-.prose-h2\:text-center :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  text-align: center;
-}
-
-.prose-h2\:text-2xl :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  font-size: 1.5rem;
-  line-height: 2rem;
 }
 
 .prose-h2\:font-normal :is(:where(h2):not(:where([class~="not-prose"] *))) {
   font-weight: 400;
 }
 
-.prose-h2\:font-light :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  font-weight: 300;
-}
-
 .prose-h3\:font-normal :is(:where(h3):not(:where([class~="not-prose"] *))) {
   font-weight: 400;
 }
 
-.prose-h4\:text-center :is(:where(h4):not(:where([class~="not-prose"] *))) {
-  text-align: center;
-}
-
-.prose-h4\:text-xl :is(:where(h4):not(:where([class~="not-prose"] *))) {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .prose-h4\:font-normal :is(:where(h4):not(:where([class~="not-prose"] *))) {
   font-weight: 400;
 }
 
+.prose-p\:my-\[0\.3em\] :is(:where(p):not(:where([class~="not-prose"] *))) {
+  margin-top: 0.3em;
+  margin-bottom: 0.3em;
+}
+
 .prose-a\:text-center :is(:where(a):not(:where([class~="not-prose"] *))) {
   text-align: center;
 }
 
+.prose-img\:m-1 :is(:where(img):not(:where([class~="not-prose"] *))) {
+  margin: 0.25rem;
+}
+
 @media (min-width: 1024px) {
+  .lg\:w-screen {
+    width: 100vw;
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -1794,7 +1862,13 @@ select {
     align-items: flex-end;
   }
 
-  .lg\:text-right {
+  .lg\:self-end {
-    text-align: right;
+    align-self: flex-end;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:max-w-screen-xl {
+    max-width: 1280px;
   }
 }

static/django_tinymce/init_tinymce.js

@@ -36,7 +36,7 @@
       if (el.dataset.mceGzConf) {
         tinyMCE_GZ.init(JSON.parse(el.dataset.mceGzConf));
       }
-      if (!tinyMCE.editors[id]) {
+      if (!tinyMCE.get(id)) {
         tinyMCE.init(mce_conf);
       }
     }
@@ -53,18 +53,24 @@
     }
   }
 
+  function initializeTinyMCE(element, formsetName) {
+    Array.from(element.querySelectorAll('.tinymce')).forEach(area => initTinyMCE(area));
+  }
+
   ready(function() {
     // initialize the TinyMCE editors on load
-    document.querySelectorAll('.tinymce').forEach(function(el) {
+    initializeTinyMCE(document);
-      initTinyMCE(el);
-    });
 
     // initialize the TinyMCE editor after adding an inline in the django admin context.
     if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined') {
-      django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
+      django.jQuery(document).on('formset:added', (event, $row, formsetName) => {
-        $row.find('textarea.tinymce').each(function() {
+        if (event.detail && event.detail.formsetName) {
-          initTinyMCE(this);
+          // Django >= 4.1
-        });
+          initializeTinyMCE(event.target);
+        } else {
+          // Django < 4.1, use $row
+          initializeTinyMCE($row.get(0));
+        }
       });
     }
   });

theme/static/css/dist/styles.css

@@ -1081,89 +1081,155 @@ select {
   margin-bottom: 0;
 }
 
-.nav-item > a {
+.button {
   display: inline-block;
   border-radius: 0.375rem;
   border-width: 1px;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-weight: 600;
+}
+
+.nbutton {
+  display: inline-block;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 10px;
+  padding-top: 0.5rem;
+}
+
+.nbutton:hover {
+  border-bottom-width: 4px;
+  padding-bottom: 7px;
+}
+
+.nbutton.active {
+    border-bottom-width: 4px;
+  }
+
+.nbutton.active {
+    padding-bottom: 7px;
+  }
+
+.nbutton.home {
+    --tw-border-opacity: 1;
     border-color: rgb(187 247 208 / var(--tw-border-opacity));
+  }
+
+.nbutton.home {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity));
+  }
+
+.nbutton.home {
     --tw-bg-opacity: 1;
     background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-bottom: 10px;
-  padding-top: 0.5rem;
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-.nav-item > a:hover {
+.nbutton.home:hover {
-  border-bottom-width: 4px;
+    --tw-border-opacity: 1;
     border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  }
+
+.nbutton.home:hover {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(22 163 74 / var(--tw-border-opacity));
+  }
+
+.nbutton.home:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-  padding-bottom: 7px;
   }
 
-.active > a {
+.nbutton.home.active {
-  border-bottom-width: 4px;
+      --tw-border-opacity: 1;
       border-color: rgb(134 239 172 / var(--tw-border-opacity));
+    }
+
+.nbutton.home.active {
       --tw-border-opacity: 1;
       border-bottom-color: rgb(22 163 74 / var(--tw-border-opacity));
+    }
+
+.nbutton.home.active {
       --tw-bg-opacity: 1;
       background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-  padding-bottom: 7px;
     }
 
-.adm_nav-item > a {
+.nbutton.administration {
-  display: inline-block;
+    --tw-border-opacity: 1;
-  border-radius: 0.375rem;
-  border-width: 1px;
     border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(59 130 246 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration {
     --tw-bg-opacity: 1;
     background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-bottom: 10px;
-  padding-top: 0.5rem;
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-.adm_nav-item > a:hover {
+.nbutton.administration:hover {
-  border-bottom-width: 4px;
+    --tw-border-opacity: 1;
     border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration:hover {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(37 99 235 / var(--tw-border-opacity));
+  }
+
+.nbutton.administration:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  padding-bottom: 7px;
   }
 
-.adm_active > a {
+.nbutton.administration.active {
       border-bottom-width: 4px;
+    }
+
+.nbutton.administration.active {
+      --tw-border-opacity: 1;
       border-color: rgb(147 197 253 / var(--tw-border-opacity));
+    }
+
+.nbutton.administration.active {
       --tw-border-opacity: 1;
       border-bottom-color: rgb(37 99 235 / var(--tw-border-opacity));
+    }
+
+.nbutton.administration.active {
       --tw-bg-opacity: 1;
       background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+    }
+
+.nbutton.administration.active {
       padding-bottom: 7px;
     }
 
@@ -1218,14 +1284,18 @@ select {
   margin-bottom: 0.5rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .mb-0 {
   margin-bottom: 0px;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1242,10 +1312,6 @@ select {
   display: block;
 }
 
-.inline-block {
-  display: inline-block;
-}
-
 .inline {
   display: inline;
 }
@@ -1290,12 +1356,16 @@ select {
   max-height: 18rem;
 }
 
-.min-h-\[125px\] {
+.max-h-24 {
-  min-height: 125px;
+  max-height: 6rem;
 }
 
-.w-screen {
+.max-h-\[200px\] {
-  width: 100vw;
+  max-height: 200px;
+}
+
+.min-h-\[125px\] {
+  min-height: 125px;
 }
 
 .w-full {
@@ -1322,12 +1392,16 @@ select {
   max-width: 100%;
 }
 
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
 
-.max-w-screen-sm {
+.max-w-\[48px\] {
-  max-width: 640px;
+  max-width: 48px;
 }
 
 .basis-1\/2 {
@@ -1390,10 +1464,6 @@ select {
   gap: 2rem;
 }
 
-.self-end {
-  align-self: flex-end;
-}
-
 .self-center {
   align-self: center;
 }
@@ -1434,31 +1504,6 @@ select {
   border-color: rgb(214 211 209 / var(--tw-border-opacity));
 }
 
-.border-rose-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 205 211 / var(--tw-border-opacity));
-}
-
-.border-pink-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 207 232 / var(--tw-border-opacity));
-}
-
-.border-indigo-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(199 210 254 / var(--tw-border-opacity));
-}
-
-.border-sky-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(186 230 253 / var(--tw-border-opacity));
-}
-
-.border-red-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1474,31 +1519,6 @@ select {
   background-color: rgb(250 250 249 / var(--tw-bg-opacity));
 }
 
-.bg-pink-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
-}
-
-.bg-rose-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
-}
-
-.bg-sky-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
-}
-
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1532,6 +1552,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1556,10 +1581,6 @@ select {
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
-.text-\[2\.25rem\] {
-  font-size: 2.25rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1580,11 +1601,6 @@ select {
   line-height: 1rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-\[15px\] {
   font-size: 15px;
 }
@@ -1593,15 +1609,15 @@ select {
   font-size: 13px;
 }
 
+.text-\[2\.25rem\] {
+  font-size: 2.25rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
 
-.font-extrabold {
-  font-weight: 800;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -1643,11 +1659,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -1672,22 +1683,126 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.duration-300 {
-  transition-duration: 300ms;
-}
-
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.color.pink {
+    --tw-border-opacity: 1;
+    border-color: rgb(251 207 232 / var(--tw-border-opacity));
+  }
+
+.color.pink {
+    --tw-bg-opacity: 1;
+    background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+  }
+
+.color.pink:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 168 212 / var(--tw-border-opacity));
+  }
+
+.color.pink:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+  }
+
+.color.rose {
+    --tw-border-opacity: 1;
+    border-color: rgb(254 205 211 / var(--tw-border-opacity));
+  }
+
+.color.rose {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 228 230 / var(--tw-bg-opacity));
+  }
+
+.color.rose:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(253 164 175 / var(--tw-border-opacity));
+  }
+
+.color.rose:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 205 211 / var(--tw-bg-opacity));
+  }
+
+.color.sky {
+    --tw-border-opacity: 1;
+    border-color: rgb(186 230 253 / var(--tw-border-opacity));
+  }
+
+.color.sky {
+    --tw-bg-opacity: 1;
+    background-color: rgb(224 242 254 / var(--tw-bg-opacity));
+  }
+
+.color.sky:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(125 211 252 / var(--tw-border-opacity));
+  }
+
+.color.sky:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+  }
+
+.color.indigo {
+    --tw-border-opacity: 1;
+    border-color: rgb(199 210 254 / var(--tw-border-opacity));
+  }
+
+.color.indigo {
+    --tw-bg-opacity: 1;
+    background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+  }
+
+.color.indigo:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(165 180 252 / var(--tw-border-opacity));
+  }
+
+.color.indigo:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+  }
+
+.color.red {
+    --tw-border-opacity: 1;
+    border-color: rgb(254 202 202 / var(--tw-border-opacity));
+  }
+
+.color.red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  }
+
+.color.red:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(252 165 165 / var(--tw-border-opacity));
+  }
+
+.color.red:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  }
+
+h1 {
+  font-size: 2.25em;
+  font-weight: 500;
+}
+
+h2 {
+  text-align: center;
+  font-size: 1.5em;
+  font-weight: 300;
+}
+
+h4 {
+  text-align: center;
+  font-size: 1.25em;
+}
+
 #atu {
   transition: all 0.2s ease, visibility 0s;
   border-radius: 0px;
@@ -1697,95 +1812,40 @@ select {
   display: block;
 }
 
-.hover\:border-pink-300:hover {
+.prose-h2\:mb-2 :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  --tw-border-opacity: 1;
+  margin-bottom: 0.5rem;
-  border-color: rgb(249 168 212 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 164 175 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(125 211 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity));
-}
-
-.hover\:bg-pink-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 205 211 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
-
-.prose-h2\:text-center :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  text-align: center;
-}
-
-.prose-h2\:text-2xl :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  font-size: 1.5rem;
-  line-height: 2rem;
 }
 
 .prose-h2\:font-normal :is(:where(h2):not(:where([class~="not-prose"] *))) {
   font-weight: 400;
 }
 
-.prose-h2\:font-light :is(:where(h2):not(:where([class~="not-prose"] *))) {
-  font-weight: 300;
-}
-
 .prose-h3\:font-normal :is(:where(h3):not(:where([class~="not-prose"] *))) {
   font-weight: 400;
 }
 
-.prose-h4\:text-center :is(:where(h4):not(:where([class~="not-prose"] *))) {
-  text-align: center;
-}
-
-.prose-h4\:text-xl :is(:where(h4):not(:where([class~="not-prose"] *))) {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .prose-h4\:font-normal :is(:where(h4):not(:where([class~="not-prose"] *))) {
   font-weight: 400;
 }
 
+.prose-p\:my-\[0\.3em\] :is(:where(p):not(:where([class~="not-prose"] *))) {
+  margin-top: 0.3em;
+  margin-bottom: 0.3em;
+}
+
 .prose-a\:text-center :is(:where(a):not(:where([class~="not-prose"] *))) {
   text-align: center;
 }
 
+.prose-img\:m-1 :is(:where(img):not(:where([class~="not-prose"] *))) {
+  margin: 0.25rem;
+}
+
 @media (min-width: 1024px) {
+  .lg\:w-screen {
+    width: 100vw;
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -1802,7 +1862,13 @@ select {
     align-items: flex-end;
   }
 
-  .lg\:text-right {
+  .lg\:self-end {
-    text-align: right;
+    align-self: flex-end;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:max-w-screen-xl {
+    max-width: 1280px;
   }
 }

theme/static_src/src/styles.css

@@ -2,27 +2,77 @@
 @tailwind components;
 @tailwind utilities;
 
+h1 {
+  @apply text-[2.25em] font-medium;
+}
+
+h2 {
+  @apply text-[1.5em] text-center font-light;
+}
+
+h4 {
+  @apply text-[1.25em] text-center;
+}
+
 @layer components {
-  .nav-item > a {
+  .btn {
-    @apply rounded-md transition ease-in-out duration-300 inline-block px-2 pb-[10px] hover:pb-[7px] pt-2
+    @apply transition ease-in-out duration-300
-      bg-green-100 hover:bg-green-200 shadow-md
+      inline-block rounded-md shadow-md
-      border border-green-200 hover:border-green-300 border-b-green-500 hover:border-b-green-600 hover:border-b-4;
+      border no-underline;
   }
 
-  .active > a {
+  .button {
-    @apply bg-green-300 border-green-300 border-b-4 border-b-green-600 pb-[7px];
+    @apply btn font-semibold px-4 py-3;
   }
 
-  .adm_nav-item > a {
+  .nbutton {
-    @apply rounded-md transition ease-in-out duration-300 inline-block px-2 pb-[10px] hover:pb-[7px] pt-2
+    @apply btn px-2 pb-[10px] hover:pb-[7px] pt-2 hover:border-b-4;
-      bg-blue-100 hover:bg-blue-200 shadow-md
+
-      border border-blue-200 hover:border-blue-300 border-b-blue-500 hover:border-b-blue-600 hover:border-b-4;
+    &.active {
+      @apply border-b-4 pb-[7px];
     }
 
-  .adm_active > a {
+    &.home {
+      @apply bg-green-100 hover:bg-green-200 border-green-200 hover:border-green-300 border-b-green-500 hover:border-b-green-600;
+
+      &.active {
+        @apply bg-green-300 border-green-300  border-b-green-600;
+      }
+    }
+
+    &.administration {
+      @apply bg-blue-100 hover:bg-blue-200 border-blue-200 hover:border-blue-300 border-b-blue-500 hover:border-b-blue-600;
+
+      &.active {
         @apply bg-blue-300 border-blue-300 border-b-4 border-b-blue-600 pb-[7px];
       }
     }
+  }
+}
+
+@layer utilities {
+  .color {
+    &.pink {
+      @apply border-pink-200 bg-pink-100 hover:border-pink-300 hover:bg-pink-200;
+    }
+
+    &.rose {
+      @apply border-rose-200 bg-rose-100 hover:border-rose-300 hover:bg-rose-200;
+    }
+
+    &.sky {
+      @apply border-sky-200 bg-sky-100 hover:border-sky-300 hover:bg-sky-200;
+    }
+
+    &.indigo {
+      @apply border-indigo-200 bg-indigo-100 hover:border-indigo-300 hover:bg-indigo-200;
+    }
+
+    &.red {
+      @apply border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200;
+    }
+  }
+}
 
 #atu {
   transition: all 0.2s ease, visibility 0s;