From 651d0de0295e7c441bd0ce17bc8567f612e27e47 Mon Sep 17 00:00:00 2001
From: Calum Andrew Morrell <calum@drulum.com>
Date: Mon, 5 May 2025 19:44:42 +0100
Subject: [PATCH] Updated templates for articles app to include tailwind
 styling.

---
 .../templates/articles/article_detail.html    | 31 +++++-------
 articles/templates/articles/article_list.html | 48 ++++++++-----------
 .../templates/articles/category_list.html     | 12 ++---
 .../articles/includes/display_tags.html       |  3 ++
 articles/templates/articles/tag_list.html     |  8 ++--
 core/templates/core/homepage.html             |  2 +-
 6 files changed, 48 insertions(+), 56 deletions(-)
 create mode 100644 articles/templates/articles/includes/display_tags.html

diff --git a/articles/templates/articles/article_detail.html b/articles/templates/articles/article_detail.html
index a885c41..b08ac52 100644
--- a/articles/templates/articles/article_detail.html
+++ b/articles/templates/articles/article_detail.html
@@ -1,33 +1,28 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <article>
-        <h3>{{ article.title }}</h3>
+    <article class="max-w-5xl mx-auto my-4 px-8">
+        <h3 class="text-6xl font-extrabold">{{ article.title }}</h3>
         {% if article.subtitle %}
-            <h5>{{ article.subtitle }}</h5>
+            <h5 class="text-4xl italic font-medium">{{ article.subtitle }}</h5>
         {% endif %}
-        <p>Added on the {{ article.created|date:'jS \o\f F, Y' }}
+        <p class="text-sm">Added on the {{ article.created | date:'jS \o\f F, Y' }}
             {% if article.created.date != article.updated.date %}
-                and updated on the {{ article.updated|date:'jS \o\f F, Y' }}
+                and updated on the {{ article.updated | date:'jS \o\f F, Y' }}
             {% endif %}
         </p>
-        <hr>
+        <hr class="my-2">
         {% if article.introduction %}
-            <p>{{ article.introduction|linebreaksbr }}</p>
-            <hr>
+            <p class="text-justify italic">{{ article.introduction|linebreaksbr }}</p>
+            <hr class="my-2">
         {% endif %}
-        <div>
+        <div class="prose md:prose-lg lg:prose-xl max-w-none prose-img:rounded-2xl">
             {{ article.body_as_markdown|safe }}
         </div>
-        <hr>
-        <div>
-            <span>Posted in the <a
-                    href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }}</a> category</span>
-            <span>
-                {% for tag in article.tags.all %}
-                    <a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if tag != article.tags.last %},{% endif %}
-                {% endfor %}
-            </span>
+        <hr class="my-2">
+        <div class="flex justify-between text-neutral-400">
+            <span>Posted in the <a class="hover:text-red-400" href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }}</a> category</span>
+{#            <span>{% include 'articles/includes/display_tags.html' %}</span>#}
         </div>
     </article>
 {% endblock %}
\ No newline at end of file
diff --git a/articles/templates/articles/article_list.html b/articles/templates/articles/article_list.html
index 01727cb..aac3fc5 100644
--- a/articles/templates/articles/article_list.html
+++ b/articles/templates/articles/article_list.html
@@ -4,51 +4,45 @@
     <main>
         {% if object_list %}
             {% if category %}
-                <h3>{{ category }} Articles</h3>
+                <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">{{ category }} Articles</h3>
                 {% if category.introduction %}
-                    <div>
-                        <p>{{ category.introduction }}</p>
+                    <div class="flex justify-center mb-4">
+                        <p class="sm:w-1/2 lg:w-1/3 mx-8 text-justify">{{ category.introduction }}</p>
                     </div>
                 {% endif %}
             {% elif tag %}
-                <h3>Articles for tag: {{ tag }}</h3>
+                <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">Articles for tag: {{ tag }}</h3>
             {% else %}
-                <h3>Recent Articles</h3>
+                <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">Recent Articles</h3>
             {% endif %}
-            <hr>
-            <div>
+            <hr class="mx-8">
+            <div class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 m-8">
                 {% for article in object_list %}
-                    <div>
-                        <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
+                    <div class="pb-8 break-inside-avoid-column">
+                        <a class="text-3xl font-semibold hover:text-red-400" href="{{ article.get_absolute_url }}">{{ article.title }}</a>
                         {% if article.subtitle %}
-                            <h5>{{ article.subtitle }}</h5>
+                            <h5 class="text-xl italic font-medium">{{ article.subtitle }}</h5>
                         {% endif %}
                         {% if article.introduction %}
-                            <hr>
-                            <p>{{ article.introduction|linebreaksbr }}</p>
+                            <hr class="my-2">
+                            <p class="text-justify">{{ article.introduction|linebreaksbr }}</p>
                         {% endif %}
-                        <hr>
-                        <div>
+                        <hr class="my-2">
+                        <div class="flex justify-between text-neutral-400">
                             <span>
-                                <a href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a>
-                                &bull; {{ article.created|date:'jS \o\f F, Y' }}
-                            </span>
-                            <span>
-                                {% for tag in article.tags.all %}
-                                    <a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if tag != article.tags.last %},
-                                {% endif %}
-                                {% endfor %}
+                                <a class="hover:text-red-400" href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a>
+                                &bull; {{ article.created | date:'jS \o\f F, Y' }}
                             </span>
+                            <span>{% include 'articles/includes/display_tags.html' %}</span>
                         </div>
                     </div>
                 {% endfor %}
             </div>
         {% else %}
-            <div>
-                <h3>Oops!</h3>
-                <h5>It looks like there are no articles for that {% if category %}category{% elif tag %} tag{% endif %}
-                    yet.</h5>
-                <p>(sorry not sorry)</p>
+            <div class="text-center m-8">
+                <h3 class="text-4xl mb-4">Oops!</h3>
+                <h5 class="text-lg">It looks like there are no articles for that {% if category %}category{% elif tag %}tag{% endif %} yet.</h5>
+                <p class="text-neutral-400">(sorry not sorry)</p>
             </div>
         {% endif %}
         {% if page_obj.has_previous or page_obj.has_next %}
diff --git a/articles/templates/articles/category_list.html b/articles/templates/articles/category_list.html
index 5df0b7e..b657696 100644
--- a/articles/templates/articles/category_list.html
+++ b/articles/templates/articles/category_list.html
@@ -3,15 +3,15 @@
 {% block content %}
     <main>
         {% if object_list %}
-            <h3>Category List</h3>
-            <hr>
-            <ul>
+            <h3 class="text-6xl my-4 text-center">Category List</h3>
+            <hr class="mx-8">
+            <ul class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 m-8">
                 {% for category in object_list %}
                     <li>
-                        <a href="{{ category.get_absolute_url }}">{{ category.title }}</a>
+                        <a class="text-2xl font-semibold hover:text-red-400" href="{{ category.get_absolute_url }}">{{ category.title }}</a>
                         {% if category.introduction %}
-                            <hr>
-                            <p>{{ category.introduction }}</p>
+                            <hr class="my-2">
+                            <p class="text-justify">{{ category.introduction }}</p>
                         {% endif %}
                     </li>
                 {% endfor %}
diff --git a/articles/templates/articles/includes/display_tags.html b/articles/templates/articles/includes/display_tags.html
new file mode 100644
index 0000000..c7246d3
--- /dev/null
+++ b/articles/templates/articles/includes/display_tags.html
@@ -0,0 +1,3 @@
+{% for tag in article.tags.all %}
+    <a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if tag != article.tags.last %},{% endif %}
+{% endfor %}
\ No newline at end of file
diff --git a/articles/templates/articles/tag_list.html b/articles/templates/articles/tag_list.html
index 8f75d8a..ca23c3e 100644
--- a/articles/templates/articles/tag_list.html
+++ b/articles/templates/articles/tag_list.html
@@ -3,12 +3,12 @@
 {% block content %}
     <main>
         {% if object_list %}
-            <h3>List of Tags</h3>
-            <hr>
-            <ul>
+            <h3 class="text-6xl my-4 text-center">List of Tags</h3>
+            <hr class="mx-8">
+            <ul class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 m-8">
                 {% for tag in object_list %}
                     <li>
-                        <a href="{{ tag.get_absolute_url }}">{{ tag }}</a>
+                        <a class="text-2xl font-semibold hover:text-red-400" href="{{ tag.get_absolute_url }}">{{ tag }}</a>
                     </li>
                 {% endfor %}
             </ul>
diff --git a/core/templates/core/homepage.html b/core/templates/core/homepage.html
index 4774505..650c9a9 100644
--- a/core/templates/core/homepage.html
+++ b/core/templates/core/homepage.html
@@ -36,7 +36,7 @@
                                    href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a>
                                 &bull; {{ article.created | date:'jS \o\f F, Y' }}
                             </span>
-{#                            <span>{% include 'articles/includes/display_tags.html' %}</span>#}
+                            <span>{% include 'articles/includes/display_tags.html' %}</span>
                         </div>
                     </div>
                 {% endfor %}