Improve some styling

README.md

@@ -3,5 +3,4 @@
 Simple blog management system.
 
 ## Todo
-2. Rework HTML structure to be more logical and not tied to styling.
 3. Find a nice way to display metadata (author, dates, etc)

articles/static/style.css

@@ -10,7 +10,8 @@
 html {
     font-size: 110%;
     max-width: calc(640px + 2em);
-    margin: 8px auto 6em;
+    padding: 8px 0 3em;
+    margin: 0 auto;
 }
 
 body {
@@ -24,6 +25,10 @@ p {
     line-height: 1.7;
 }
 
+li {
+    line-height: 1.4;
+}
+
 body img {
     max-width: 100%;
 }
@@ -31,7 +36,7 @@ body img {
 a {
     color: var(--main);
     text-decoration: none;
-    border-bottom: 2.5px solid var(--accent);
+    border-bottom: .3ex solid var(--accent);
 }
 
 a:hover, a:focus {

articles/templates/articles/article_list.html

@@ -15,7 +15,7 @@
     {% empty %}
         <p>No article here. Come back later 🙂</p>
     {% endfor %}
-    <div class="pagination">
+    <nav class="pagination">
         <div class="older">
             {% if page_obj.has_next %}
                 <a href="?page={{ page_obj.next_page_number }}">⇠ Older</a>
@@ -26,5 +26,5 @@
                 <a href="?page={{ page_obj.previous_page_number }}">Newer ⇢</a>
             {% endif %}
         </div>
-    </div>
+    </nav>
 {% endblock %}

articles/templates/articles/metadata_snippet.html

@@ -1,9 +1,9 @@
+{% load i18n %}
 <p class="date">
     {% if article.published_at %}
-        {{ article.published_at|date }}
-        {% include "articles/admin_link_snippet.html" %}
+        <time datetime="{{ article.published_at|date:'c' }}">{{ article.published_at|date }}</time>
     {% else %}
-        {{ article.updated_at|date }}
-        {% include "articles/admin_link_snippet.html" %}
+        <time datetime="{{ article.updated_at|date:'c' }}">{{ article.updated_at|date }}</time>
     {% endif %}
+    {% include "articles/admin_link_snippet.html" %}
 </p>