Styling with TailwindCSS

Some final improvements and styles in base.html

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.
Join course for $15

Modified files

templates/base.html
--- 
+++ 
@@ -5,49 +5,58 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Djangocourse</title>
+  <title>Djangocourse {% block head_title %}{% endblock head_title %}</title>
   <link rel="stylesheet" href="{% static 'output.css'%}">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
   <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+
+  {% block extra_head %}
+  {% endblock extra_head %}
 </head>
 <body>
-  {% url 'create_article' as create_new_url %}
-  {% url 'home' as your_articles_url %}
-  {% url 'account_email' as change_email_url %}
-  <nav class="px-10 py-4 border-b border-gray-300 shadow-md">
-    <div class="flex justify-end items-center gap-6 max-w-7x mx-auto">
-        {% if user.is_authenticated %}
-          <a
-            class="button primary"
-            href="{% spaceless %}{% if request.path != create_new_url %} {{ create_new_url }} {% else %} # {% endif %}{% endspaceless %}">
-            Create new
-          </a>
-          <a
-            class="hover:shadow-underline hover:shadow-gray-300 {% if request.path == your_articles_url %} font-semibold {% endif %}"
-            href="{{ your_articles_url }}">
-            Your articles
-          </a>
-          <a
-            class="hover:shadow-underline hover:shadow-gray-300 {% if request.path == change_email_url %} font-semibold {% endif %}"
-            href="{{ change_email_url }}">
-            Change email
-          </a>
-          <form method="POST" action="{% url 'account_logout' %}">
-            {% csrf_token %}
-            <button class="hover:shadow-underline  hover:shadow-gray-300" type="submit">Log out</button>
-          </form>
-        {% else %}
-          <a class="button secondary text-sm" href="{% url 'account_login' %}">Log in</a>
-          <a class="button primary text-sm" href="{% url 'account_signup' %}">Sign up</a>
-        {% endif %}
+  {% block body %}
+    {% url 'create_article' as create_new_url %}
+    {% url 'home' as your_articles_url %}
+    {% url 'account_email' as change_email_url %}
+    <nav class="px-10 py-4 border-b border-gray-300 shadow-md">
+      <div class="flex justify-end items-center gap-6 max-w-7xl mx-auto">
+          {% if user.is_authenticated %}
+            <a
+              class="button primary"
+              href="{% spaceless %}{% if request.path != create_new_url %} {{ create_new_url }} {% else %} # {% endif %}{% endspaceless %}">
+              Create new
+            </a>
+            <a
+              class="hover:shadow-underline hover:shadow-gray-300 {% if request.path == your_articles_url %} font-semibold {% endif %}"
+              href="{{ your_articles_url }}">
+              Your articles
+            </a>
+            <a
+              class="hover:shadow-underline hover:shadow-gray-300 {% if request.path == change_email_url %} font-semibold {% endif %}"
+              href="{{ change_email_url }}">
+              Change email
+            </a>
+            <form method="POST" action="{% url 'account_logout' %}">
+              {% csrf_token %}
+              <button class="hover:shadow-underline hover:shadow-gray-300" type="submit">Log out</button>
+            </form>
+          {% else %}
+            <a class="button secondary text-sm" href="{% url 'account_login' %}">Log in</a>
+            <a class="button primary text-sm" href="{% url 'account_signup' %}">Sign up</a>
+          {% endif %}
+      </div>
+    </nav>
+    <div class="p-2 md:p-4 lg:p-6">
+      {% block base_content %}
+
+      {% endblock base_content %}
     </div>
-  </nav>
-  {% block base_content %}
+  {% endblock body %}
+  {% block extra_body %}
+  {% endblock extra_body %}

-  {% endblock base_content %}
-  <footer>Common footer for all templates</footer>
   {% block page_js %}
-
   {% endblock page_js %}
 </body>
 </html>
templates/app/home.html
--- 
+++ 
@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 {% load humanize %}
+
+{% block head_title %}
+- Your articles
+{% endblock %}

 {% block base_content %}
 <main class="max-w-7xl mx-auto mt-10 p-2 md:p-4 lg:p-10">
@@ -24,7 +28,7 @@
           class="text-2xl flex items-center"
           href="{% url 'update_article' article.id %}">
           {{ article.title }}
-          <span class="ml-2 px-4 py-0.5 text-xs rounded-sm uppercase bg-gray-200">{{ article.status }}</span>
+          <span class="ml-2 px-4 py-0.5 text-xs rounded-sm uppercase article-status-{{article.status}}">{{ article.status }}</span>
         </a>
         <p class="text-sm">{{ article.word_count }} word{{ article.word_count | pluralize }}</p>
       </li>
templates/app/article_update.html
--- 
+++ 
@@ -1,4 +1,8 @@
 {% extends "app/layouts/base_form.html" %}
+
+{% block head_title %}
+- Update article
+{% endblock head_title %}

 {% block article_stats %}
   <p class="text-center">{{ article.word_count }} word{{ article.word_count | pluralize }}</p>
@@ -10,4 +14,4 @@
     <a href="{% url 'delete_article' article.id %}" class="button danger">Delete article</a>
     <button type="submit" class="button primary">Save</button>
   </div>
-{% endblock buttons %}=+{% endblock buttons  %}
templates/app/article_create.html
--- 
+++ 
@@ -1,4 +1,8 @@
 {% extends "app/layouts/base_form.html" %}
+
+{% block head_title %}
+- Create article
+{% endblock head_title %}

 {% block buttons %}
   <div class="flex justify-end">
templates/app/article_delete.html
--- 
+++ 
@@ -1,4 +1,8 @@
 {% extends "base.html" %}
+
+{% block head_title %}
+- Delete article
+{% endblock head_title %}

 {% block base_content %}
 <main class="max-w-2xl mx-auto flex flex-col items-center mt-10">
templates/account/login.html
--- 
+++ 
@@ -2,6 +2,10 @@

 {% load widget_tweaks %}
 {% load allauth account %}
+
+{% block head_title %}
+- Sign in
+{% endblock head_title %}

 {% block base_content %}
 <main class="max-w-lg mx-auto mt-10">
@@ -16,7 +20,7 @@
         {% for field, errors in form.errors.items %}
           {% for error in errors %}
             <div class="error">
-            {{ error }} 
+            {{ error }}
             </div>
           {% endfor %}
         {% endfor %}
templates/account/signup.html
--- 
+++ 
@@ -1,8 +1,10 @@
 {% extends "base.html" %}
-
 {% load allauth %}
 {% load widget_tweaks %}

+{% block head_title %}
+- Sign Up
+{% endblock head_title %}

 {% block base_content %}
 <main class="max-w-7xl mx-auto mt-10 lg:mt-20">