cosmetic + custom pages

core/admin.py

@@ -1,6 +1,5 @@
-from django.apps import apps as _apps
 from django.contrib import admin
-from django.contrib.admin.sites import AlreadyRegistered
+from django.utils.safestring import mark_safe
 
 from .models import *
 from admin_ordering.admin import OrderableAdmin
@@ -8,47 +7,44 @@ from admin_ordering.admin import OrderableAdmin
 # Register your models here.
 
 
-@admin.register(Button)
+@admin.register(Button, UpperButton)
 class ButtonModelAdmin(OrderableAdmin, admin.ModelAdmin):
-    list_display = ['__str__', 'published', 'ordering']
-    list_editable = ['ordering']
+    list_display = ["__str__", "published", "ordering"]
+    list_editable = ["ordering"]
     ordering_field_hide_input = True
-    exclude = ['ordering']
+    exclude = ["ordering"]
 
-
-@admin.register(UpperButton)
-class UpperButtonModelAdmin(OrderableAdmin, admin.ModelAdmin):
-    list_display = ['__str__', 'published', 'ordering']
-    list_editable = ['ordering']
+@admin.register(AdditionalPagePost)
+class AdditionalPagePostModelAdmin(OrderableAdmin, admin.ModelAdmin):
+    list_display = ["__str__", "published", "ordering"]
+    list_editable = ["ordering"]
     ordering_field_hide_input = True
-    exclude = ['ordering']
+    exclude = ["ordering"]
 
 
-apps = [
-    'main',
-    'administration',
-    'league',
-    'calendar',
-    'gpb',
-    'tournaments',
-    'membership',
-    'youth',
-    'atu',
-    'mbkb',
-    'core'
-]
-
-for app in [app for name, app in _apps.app_configs.items() if name in apps]:
-    app_models = app.get_models()
-    for model in app_models:
-        try:
-            admin.site.register(model)
-        except AlreadyRegistered:
-            pass
+# @admin.register(AdditionalPagePost)
+class AdditionalPagePostInline(OrderableAdmin, admin.TabularInline):
+    model = AdditionalPagePost
+    list_editable = ["ordering"]
+    ordering_field_hide_input = True
+    fields = ["title", "ordering"]
+    show_change_link = True
+    extra = 0
 
 
-admin.site.site_header = 'labs'
-admin.site.site_title = 'labs'
-admin.site.index_title = 'Panel administracyjny'
-admin.site.site_url = '/'
-admin.site.enable_nav_sidebar = False
+@admin.register(AdditionalPage)
+class AdditionalPageModelAdmin(OrderableAdmin, admin.ModelAdmin):
+    list_display = ["__str__", "published"]
+    readonly_fields = ["posts"]
+    inlines = [AdditionalPagePostInline]
+
+    @admin.display(description="Opublikowane posty")
+    def posts(self, obj):
+        return mark_safe(''.join([f'<a href="/post/{p.id}" target="_blank">{p.title}</a><br>' for p in obj.posts.filter(published=True)]))
+
+
+admin.site.site_header = "ŁABS"
+admin.site.site_title = "ŁABS"
+admin.site.index_title = "Panel administracyjny"
+admin.site.site_url = "/"
+admin.site.enable_nav_sidebar = True

core/context_processors.py

@@ -1,7 +1,6 @@
 
 from .models import *
 from db.main.models import *
-from db.youth.models import *
 
 
 def load_config(request):
@@ -12,5 +11,4 @@ def load_config(request):
         'middle_posts': MiddlePost.Published(),
         'right_posts': RightPost.Published(),
         'banner': Banner.Get(),
-        'youth': Youth.Published(),
     }

core/migrations/0002_additionalpage_additionalpagepost.py

@@ -1,19 +1,31 @@
-# Generated by Django 5.0 on 2023-12-26 02:49
+# Generated by Django 5.0 on 2023-12-30 02:33
 
+import django.db.models.deletion
 import tinymce.models
 from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
 
-    initial = True
-
     dependencies = [
+        ('core', '0001_initial'),
     ]
 
     operations = [
         migrations.CreateModel(
-            name='Youth',
+            name='AdditionalPage',
+            fields=[
+                ('published', models.BooleanField(default=False, verbose_name='Wpis opublikowany')),
+                ('slug', models.SlugField(max_length=255, primary_key=True, serialize=False, unique=True)),
+                ('title', models.CharField(max_length=255)),
+            ],
+            options={
+                'verbose_name': 'Dodatkowa zakładka',
+                'verbose_name_plural': 'Dodatkowe zakładki',
+            },
+        ),
+        migrations.CreateModel(
+            name='AdditionalPagePost',
             fields=[
                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                 ('ordering', models.IntegerField(default=0, verbose_name='Kolejność')),
@@ -23,10 +35,11 @@ class Migration(migrations.Migration):
                 ('content', tinymce.models.HTMLField(blank=True, default='', verbose_name='Treść')),
                 ('buttons', models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski')),
                 ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('page', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.additionalpage')),
             ],
             options={
-                'verbose_name': 'Post młodzieżowy',
-                'verbose_name_plural': 'Posty młodzieżowe',
+                'verbose_name': 'Post na stronie',
+                'verbose_name_plural': 'Posty na stronie',
                 'ordering': ['ordering'],
                 'abstract': False,
             },

core/models.py

@@ -1,38 +1,77 @@
 from django.db import models
+from django.db.models import signals
 from admin_ordering.models import OrderableModel
 from filebrowser.fields import FileBrowseField
+from .utils import PostableModel, PublishableModel
 
 # Create your models here.
 
-class Button(OrderableModel):
-    published = models.BooleanField('Przycisk opublikowany', default=True)
-    title = models.CharField('Tekst na przycisku', max_length=50)
-    href = models.CharField('Link', max_length=50)
-    blank = models.BooleanField('Otwórz w nowej karcie')
+
+class AdditionalPage(PublishableModel):
+    published = models.BooleanField('Strona opublikowana', default=False)
+    slug = models.SlugField('Link', max_length=255, unique=True, primary_key=True)
+    title = models.CharField('Nazwa', max_length=255)
 
     def __str__(self):
-        return self.title or '-'
+        return self.title
+
+    class Meta:
+        verbose_name = "Dodatkowa zakładka"
+        verbose_name_plural = "Dodatkowe zakładki"
+
+
+class AdditionalPagePost(PostableModel):
+    page = models.ForeignKey(AdditionalPage, on_delete=models.CASCADE, related_name='posts', verbose_name='Strona')
+    reverse_href = "post-reverse"
+
+    class Meta(OrderableModel.Meta):
+        verbose_name = "Post na stronie"
+        verbose_name_plural = "Posty na stronie"
+
+
+class Button(OrderableModel):
+    published = models.BooleanField("Przycisk opublikowany", default=True)
+    title = models.CharField("Tekst na przycisku", max_length=50)
+    href = models.CharField("Link", max_length=50)
+    blank = models.BooleanField("Otwórz w nowej karcie")
+
+    def __str__(self):
+        return self.title or "-"
 
     @property
     def link(self):
         return self.href
 
     class Meta(OrderableModel.Meta):
-        verbose_name = 'Przycisk nawigacji (zielony)'
-        verbose_name_plural = 'Przyciski nawigacji (zielone)'
+        verbose_name = "Przycisk nawigacji (zielony)"
+        verbose_name_plural = "Przyciski nawigacji (zielone)"
 
 
 class UpperButton(OrderableModel):
-    published = models.BooleanField('Przycisk opublikowany', default=True)
-    title = models.CharField('Tytuł przycisku', max_length=50)
+    published = models.BooleanField("Przycisk opublikowany", default=True)
+    title = models.CharField("Tytuł przycisku", max_length=50)
     photo = FileBrowseField(
-        'Ikona', directory='gorneprzyciski/', max_length=200, blank=True)
-    href = models.CharField('Link', max_length=50)
-    blank = models.BooleanField('Otwórz w nowej karcie')
+        "Ikona", directory="gorneprzyciski/", max_length=200, blank=True
+    )
+    href = models.CharField("Link", max_length=50)
+    blank = models.BooleanField("Otwórz w nowej karcie")
 
     def __str__(self):
-        return self.title or '-'
+        return self.title or "-"
 
     class Meta(OrderableModel.Meta):
-        verbose_name = 'Przycisk górny (łabs, atu, itd...)'
-        verbose_name_plural = 'Przyciski górne (łabs, atu, itd...)'
+        verbose_name = "Przycisk górny (łabs, atu, itd...)"
+        verbose_name_plural = "Przyciski górne (łabs, atu, itd...)"
+
+
+def create_page_button(sender, instance, created, **kwargs):
+    if created:
+        Button.objects.create(href=instance.slug, title=instance.title, published=False, blank=False)
+
+
+signals.post_save.connect(
+    create_page_button,
+    sender=AdditionalPage,
+    weak=False,
+    dispatch_uid="models.create_page_button",
+)

core/templates/base.html

@@ -2,7 +2,7 @@
 
 {% load static wysiwyg tailwind_tags %}
 
-<html lang="pl" dir="ltr">
+<html lang="pl" dir="ltr" class="h-full">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -32,8 +32,8 @@
     {% tailwind_css %}
   </head>
 
-  <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">
+  <body class="antialiased flex flex-col gap-4 bg-base h-full">
+    <header class="w-full bg-header shadow-lg border-b border-slate-400 pb-1">
       <nav
         class="m-4 container flex flex-col lg:flex-row items-center lg:items-start justify-center mx-auto"
       >
@@ -82,9 +82,12 @@
         {% endif %}
       </nav>
     </header>
-    <article>
+    <article class="bg-white shadow-lg">
       <ul class="lg:m-0 prose max-w-full w-full">
         {% content banner %}
+        <div class="flex flex-wrap gap-4 justify-center items-center mb-4">
+          {% buttons banner.buttons %}
+        </div>
       </ul>
     </article>
     <main
@@ -92,8 +95,20 @@
     >
       {% block content %}{% endblock %}
     </main>
-    <footer class="footer text-center font-light italic">
-      <h6 class="mb-4">&copy; {% now "Y" %} Nikola Kubiczek</h6>
+    <footer class="footer flex flex-col items-center gap-8 text-center shadow-lg border-t border-slate-400 bg-footer h-full">
+      <h6 class="mt-4 font-medium text-xl">Nasi Partnerzy:</h6>
+      <div class="flex gap-8">
+        <div class="self-center">
+          <img class="max-h-[90px]" src="{% static 'msit.png' %}" alt="" />
+        </div>
+        <div class="self-center">
+          <img class="max-h-[90px]" src="{% static 'lomza.jpg' %}" alt="" />
+        </div>
+        <div class="self-center">
+          <img class="max-h-[90px]" src="{% static 'podlaskie.jpg' %}" alt="" />
+        </div>
+      </div>
+      <h6 class="mb-4 font-light italic">&copy; {% now "Y" %} Nikola Kubiczek</h6>
     </footer>
   </body>
 </html>

core/templates/home.html

@@ -4,7 +4,7 @@
   <div class="flex flex-col gap-4 items-center basis-1/3">
     {% for post in left_posts %}
     <article
-      class="p-4 py-4 w-full max-w-sm bg-white rounded-md shadow-md prose"
+      class="p-4 py-4 w-full max-w-sm bg-white rounded-md shadow-lg prose"
     >
       {% if post.show_title %}
       <h2 class="font-medium">{{ post.title }}</h2>
@@ -21,14 +21,14 @@
 
   <div class="flex flex-col gap-4 items-center basis-1/3">
     <h1
-      class="text-[2.25rem] font-medium w-full text-center bg-white shadow-md rounded-md px-4 py-2"
+      class="text-[2.25rem] font-medium w-full text-center bg-article text-white shadow-lg rounded-md px-4 py-2"
     >
       Aktualności
     </h1>
     <hr class="w-36 border-b border-dashed border-stone-300" />
     {% for post in middle_posts %}
     <article
-      class="p-4 py-4 w-full max-w-full bg-white rounded-md shadow-md prose"
+      class="p-4 py-4 w-full max-w-full bg-white rounded-md shadow-lg prose"
     >
       {% if post.show_title %}
       <h2 class="font-medium">{{ post.title }}</h2>
@@ -46,7 +46,7 @@
   <div class="flex flex-col gap-4 items-center basis-1/3">
     {% for post in right_posts %}
     <article
-      class="p-4 py-4 w-full max-w-sm bg-white rounded-md shadow-md prose"
+      class="p-4 py-4 w-full max-w-sm bg-white rounded-md shadow-lg prose"
     >
       {% if post.show_title %}
       <h2 class="font-medium">{{ post.title }}</h2>

core/templates/page.html

@@ -0,0 +1,22 @@
+{% extends 'base.html' %} {% block title %}Strona główna | labs{% endblock %}
+{% load static tailwind_tags wysiwyg %} {% block content %}
+<div class="flex flex-col gap-8 justify-center lg:flex-row">
+  <div class="flex flex-col gap-4 items-center basis-1/3">
+    {% for post in posts %}
+    <article
+      class="p-4 py-4 w-full max-w-sm bg-white rounded-md shadow-lg prose"
+    >
+      {% if post.show_title %}
+      <h2 class="font-medium">{{ post.title }}</h2>
+      {% endif %}
+      <div>{% content post %}</div>
+      <div class="flex flex-wrap gap-4 justify-center items-center">
+        {% buttons post.buttons %}
+      </div>
+    </article>
+    {% if not forloop.last %}
+    <hr class="w-36 border-b border-stone-200" />
+    {% endif %} {% endfor %}
+  </div>
+</div>
+{% endblock %}

core/templates/post-reverse.html

@@ -4,7 +4,7 @@
 <!---->
 {% load static tailwind_tags wysiwyg %} {% block content %}
 <div class="flex flex-col lg:flex-row justify-center gap-8">
-  <article class="prose bg-white shadow-md rounded-md p-8">
+  <article class="prose bg-white shadow-lg rounded-md p-8">
     {% if focus.show_title %}
     <h1 class="font-medium text-center">{{ focus.title }}</h1>
     {% endif %}

core/templatetags/wysiwyg.py

@@ -26,7 +26,7 @@ def readmore(context, value: str):
 
     current_view = resolve(context.request.path).url_name
 
-    if "reverse" not in current_view:
+    if current_view is not None and "reverse" not in current_view:
         reverse_view_url = reverse_lazy(value.reverse_href, args=(value.id,))
 
         res = value.content.split("<!-- pagebreak -->")
@@ -61,7 +61,7 @@ def buttons(value: str):
 
             stripped = text.strip()
             return (
-                f'<a href={url} {target} class="inline px-14 py-2 button red color">{stripped}</a>'
+                f'<a href={url} {target} class="inline px-14 py-2 button indigo color">{stripped}</a>'
                 if stripped
                 else ""
             )

core/urls.py

@@ -1,8 +1,8 @@
 from django.urls import path
-from .views import rtpath, tpath
+from .views import rtpath, tpath, wildcard_additional_page
 
+from core.models import AdditionalPagePost
 from db.main.models import *
-from db.youth.models import Youth
 
 urlpatterns = [
     tpath('', 'home', {'home': 'active'}),
@@ -12,6 +12,6 @@ urlpatterns = [
     rtpath('postp/<int:id>', 'postr', RightPost, {'home': 'active'}),
     rtpath('baner/<int:id>', 'banner', Banner, {'home': 'active'}),
 
-    tpath('mlodziez', 'youth'),
-    rtpath('mlodziez/<int:id>', 'youth', Youth),
+    rtpath('post/<int:id>', 'post', AdditionalPagePost, {'post': 'active'}),
+    path('<str:wildcard>', wildcard_additional_page),
 ]

core/views.py

@@ -1,26 +1,49 @@
 from django.shortcuts import render
 from django.urls import path
 
+from .models import AdditionalPage
 
 # Create your views here.
 
+
 def template(filename, ec={}):
     def closure(request):
-        return render(request, filename+'.html', ec)
+        return render(request, filename + ".html", ec)
 
     return closure
 
 
 def reverse_template(filename, model, ec={}):
     def closure(request, id):
-        return render(request, filename+'-reverse.html', {**ec, 'focus': model.objects.get(pk=id)})
+        return render(
+            request,
+            filename + "-reverse.html",
+            {**ec, "focus": model.objects.get(pk=id)},
+        )
 
     return closure
 
 
 def tpath(p: str, filename: str, ec={}):
-    return path(p, template(filename, ec), name=filename.replace('/', '_'))
+    return path(p, template(filename, ec), name=filename.replace("/", "_"))
 
 
 def rtpath(p: str, filename: str, model, ec={}):
-    return path(p, reverse_template(filename, model, ec), name=filename.replace('/', '_')+'-reverse')
+    return path(
+        p,
+        reverse_template(filename, model, ec),
+        name=filename.replace("/", "_") + "-reverse",
+    )
+
+
+def wildcard_additional_page(request, wildcard):
+    return render(
+        request,
+        "page.html",
+        context={
+            "page": wildcard,
+            "posts": posts.filter(
+                published=True
+            ) if (posts := AdditionalPage.objects.get(slug=wildcard).posts) is not None else None,
+        },
+    )

db/youth/admin.py

@@ -1,13 +0,0 @@
-from django.contrib import admin
-from admin_ordering.admin import OrderableAdmin
-from .models import *
-
-# Register your models here.
-
-
-@admin.register(Youth)
-class YouthModelAdmin(OrderableAdmin, admin.ModelAdmin):
-    list_display = ['__str__', 'link', 'published', 'ordering']
-    list_editable = ['ordering']
-    ordering_field_hide_input = True
-    exclude = ['ordering']

db/youth/apps.py

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

db/youth/models.py

@@ -1,12 +0,0 @@
-from core.utils import PostableModel
-from admin_ordering.models import OrderableModel
-
-# Create your models here.
-
-
-class Youth(PostableModel):
-    reverse_href = "youth-reverse"
-
-    class Meta(OrderableModel.Meta):
-        verbose_name = "Post młodzieżowy"
-        verbose_name_plural = "Posty młodzieżowe"

labs/settings.py

@@ -45,7 +45,6 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles'
 ] + [
     'db.main',
-    'db.youth',
     'theme',
     'core',
     'tournamentpages'

labs/urls.py

@@ -20,12 +20,12 @@ from django.conf.urls.static import static
 from filebrowser.sites import site
 
 urlpatterns = [
-    path('', include('core.urls')),
     path('turnieje/', include('tournamentpages.urls')),
     path('admin/filebrowser/', site.urls),
     path('admin/', admin.site.urls),
     path('tinymce/', include('tinymce.urls')),
     path('__reload__/', include('django_browser_reload.urls')),
+    path('', include('core.urls')),
 ]
 
 urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

theme/static/css/dist/styles.css

@@ -1295,38 +1295,27 @@ select {
   margin: 1rem;
 }
 
-.m-0 {
-  margin: 0px;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+.mt-2 {
+  margin-top: 0.5rem;
 }
 
 .mb-2 {
@@ -1341,16 +1330,8 @@ select {
   margin-top: 1.5rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.ml-2 {
-  margin-left: 0.5rem;
+.mt-4 {
+  margin-top: 1rem;
 }
 
 .block {
@@ -1377,8 +1358,8 @@ select {
   display: none;
 }
 
-.h-auto {
-  height: auto;
+.h-full {
+  height: 100%;
 }
 
 .h-screen {
@@ -1393,10 +1374,38 @@ select {
   max-height: 3rem;
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .max-h-72 {
   max-height: 18rem;
 }
 
+.max-h-\[100px\] {
+  max-height: 100px;
+}
+
+.max-h-\[150px\] {
+  max-height: 150px;
+}
+
+.max-h-\[50px\] {
+  max-height: 50px;
+}
+
+.max-h-\[750px\] {
+  max-height: 750px;
+}
+
+.max-h-\[75px\] {
+  max-height: 75px;
+}
+
+.max-h-\[90px\] {
+  max-height: 90px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1405,18 +1414,26 @@ select {
   width: 9rem;
 }
 
-.max-w-screen-lg {
-  max-width: 1024px;
-}
-
 .max-w-full {
   max-width: 100%;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
 
+.basis-1\/3 {
+  flex-basis: 33.333333%;
+}
+
 .basis-1\/2 {
   flex-basis: 50%;
 }
@@ -1445,6 +1462,10 @@ select {
   place-items: center;
 }
 
+.content-start {
+  align-content: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1461,22 +1482,22 @@ select {
   justify-content: space-around;
 }
 
-.gap-6 {
-  gap: 1.5rem;
+.gap-4 {
+  gap: 1rem;
 }
 
 .gap-3 {
   gap: 0.75rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-8 {
   gap: 2rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .self-center {
   align-self: center;
 }
@@ -1493,35 +1514,64 @@ select {
   border-bottom-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
 
-.border-blue-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 234 254 / var(--tw-border-opacity));
-}
-
-.border-stone-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
 .border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-stone-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+}
+
 .border-stone-300 {
   --tw-border-opacity: 1;
   border-color: rgb(214 211 209 / var(--tw-border-opacity));
 }
 
+.border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity));
+}
+
+.bg-base {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 255 235 / var(--tw-bg-opacity));
+}
+
+.bg-header {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 252 252 / var(--tw-bg-opacity));
+}
+
+.bg-footer {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 252 252 / var(--tw-bg-opacity));
+}
+
+.bg-article {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 111 222 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1532,48 +1582,43 @@ select {
   background-color: rgb(250 250 249 / var(--tw-bg-opacity));
 }
 
-.bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-}
-
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1594,6 +1639,19 @@ select {
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
+.text-\[15px\] {
+  font-size: 15px;
+}
+
+.text-\[2\.25rem\] {
+  font-size: 2.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1609,19 +1667,6 @@ select {
   line-height: 1rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.text-\[15px\] {
-  font-size: 15px;
-}
-
-.text-\[2\.25rem\] {
-  font-size: 2.25rem;
-}
-
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -1631,14 +1676,14 @@ select {
   font-weight: 300;
 }
 
-.font-normal {
-  font-weight: 400;
-}
-
 .font-medium {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -1663,6 +1708,11 @@ select {
   letter-spacing: 0em;
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -1674,6 +1724,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .filter {
   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);
 }
@@ -1872,14 +1928,14 @@ h4 {
     margin: 0px;
   }
 
-  .lg\:w-screen {
-    width: 100vw;
-  }
-
   .lg\:w-40 {
     width: 10rem;
   }
 
+  .lg\:w-screen {
+    width: 100vw;
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }

theme/static_src/tailwind.config.js

@@ -22,7 +22,14 @@ module.exports = {
     "../../../core/templatetags/*.py",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        header: '#e0fcfc',
+        footer: '#e0fcfc',
+        base: '#ebffeb',
+        article: '#006fde'
+      }
+    },
   },
   plugins: [
     /**