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,26 +43,32 @@ article.article-list h2 a {
     text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
+.pagination {
-  :root {
+    display: flex;
-    --accent: #226997;
+    justify-content: space-between;
-    --main: #eeeeee;
+}
-    /*--main2: #cecece;*/
+
-    /*--main3: #b1b1b1;*/
+@media (prefers-color-scheme: dark) {
-    --background: #111111;
+    :root {
-    /*--background2: #575656;*/
+        --accent: #226997;
-  }
+        --main: #eeeeee;
-
+        /*--main2: #cecece;*/
-  img {
+        /*--main3: #b1b1b1;*/
-    opacity: .75;
+        --background: #111111;
-    transition: opacity .5s ease-in-out;
+        /*--background2: #575656;*/
-  }
+    }
-  img:hover {
+
-    opacity: 1;
+    img {
-  }
+        opacity: .75;
-
+        transition: opacity .5s ease-in-out;
-  #manage ul ul li img {
+    }
-    opacity: 1;
+
-    filter: invert(1);
+    img:hover {
-  }
+        opacity: 1;
+    }
+
+    #manage ul ul li img {
+        opacity: 1;
+        filter: invert(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 %}