Update look & feel

articles/static/style.css

@@ -35,6 +35,14 @@ a:hover, a:focus {
     text-decoration: none;
 }
 
+article.article-list {
+    margin-top: 2em;
+}
+
+article.article-list h2 a {
+    text-decoration: none;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --accent: #226997;

articles/templates/articles/admin_link_snippet.html

@@ -0,0 +1,3 @@
+{% if user.is_authenticated %}
+    | <a class="admin-link" href="{{ article.get_admin_url }}">Admin</a>
+{% endif %}

articles/templates/articles/article_list.html

@@ -3,11 +3,11 @@
 {% block content %}
     <h1>{{ title }} list</h1>
     {% for article in articles %}
-        <article>
+        <article class="article-list">
             <h2><a href="{% url 'article-detail' slug=article.slug %}">{{ article.title }}</a></h2>
             {% include "articles/metadata_snippet.html" %}
             <p>{{ article.get_abstract|safe }}</p>
-            <p><a href="{% url 'article-detail' slug=article.slug %}">Read more</a></p>
+            <p class="read-more"><a href="{% url 'article-detail' slug=article.slug %}">Read more...</a></p>
         </article>
     {% empty %}
         <p>No article here. Come back later 🙂</p>

articles/templates/articles/metadata_snippet.html

@@ -1,12 +1,9 @@
-{% if user.is_authenticated %}
-    <p>
-        <a href="{{ article.get_admin_url }}">Admin</a>
-    </p>
-{% endif %}
 <p class="date">
     {% if article.published_at %}
         {{ article.published_at|date }}
+        {% include "articles/admin_link_snippet.html" %}
     {% else %}
         {{ article.updated_at|date }}
+        {% include "articles/admin_link_snippet.html" %}
     {% endif %}
 </p>