Add pagination links

README.md

@@ -3,7 +3,6 @@
 Simple blog management system.
 
 ## Todo
-2. Add pagination links
 4. Find a nice way to display metadata (author, dates, etc)
 5. Allow adding pages (pinned articles ?)
 6. Add syntax coloration to code blocks

articles/static/style.css

@@ -43,6 +43,11 @@ article.article-list h2 a {
     text-decoration: none;
 }
 
+.pagination {
+    display: flex;
+    justify-content: space-between;
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --accent: #226997;
@@ -57,6 +62,7 @@ article.article-list h2 a {
         opacity: .75;
         transition: opacity .5s ease-in-out;
     }
+
     img:hover {
         opacity: 1;
     }

articles/templates/articles/article_list.html

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