CSS and styling for pagination

main/pagination.py

@@ -37,7 +37,6 @@ class SeasonPage(Page):
         )
 
 
-
 # Need to loop over all thoughts? and yield a new Page for each season
 # Assume that if you're using this generator, you have at least 1 thought each
 #   season between the first and last
@@ -79,9 +78,10 @@ def season_pages():
     yield SeasonPage(current_season, current_year)
 
 
-
 def get_all_pages():
-    return list(season_pages())
+    pages = list(season_pages())
+    pages.reverse()
+    return pages
     # Where a Page has:
     #     .slug
     #     .formatted_name

main/static/main/main.css

@@ -194,3 +194,31 @@ a {
     font-weight: inherit;
     display: inline;
 }
+
+.history-nav ul {
+    margin: 0;
+    list-style: none;
+}
+
+.history-nav li {
+    display: inline;
+}
+.history-nav li:not(:first-child)::before {
+    content: "•";
+}
+.history-nav li:not(:first-child) > * {
+    margin-left: 10px;
+}
+.history-nav li:not(:last-child) > * {
+    margin-right: 5px;
+}
+.history-nav .current-page {
+    font-weight: bold;
+}
+
+.history-nav a, .history-nav a:visited {
+    color: var(--accent-color);
+}
+.history-nav a:hover {
+    text-decoration: underline;
+}

main/templates/whispermaphone/index.html

@@ -56,10 +56,16 @@
 {% endblock %}
 
 {% block footer %}
-<nav id="page-nav">
+<nav id="page-nav" class="history-nav" aria-label="History Navigation">
+    <ul>
     {% for page in pages %}
-    <a href="?page={{ page.slug }}">{{ page.formatted_name }}</a>
+        {% if page.slug == current_page %}
+            <li><span class="current-page">{{ page.formatted_name }}</span></li>
+        {% else %}
+            <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
+        {% endif %}
     {% endfor %}
+    </ul>
 </nav>
 {% endblock %}
 

main/views.py

@@ -32,7 +32,8 @@ def index(request):
 
     pages = get_all_pages()
 
-    requested_page = pages[-1]
+    # First item in pages should be listed first
+    requested_page = pages[0]
     requested_slug = request.GET.get("page", default=requested_page.slug)
     if requested_page.slug != requested_slug:
         for p in pages:
@@ -45,7 +46,8 @@ def index(request):
         "thoughts": thoughts,
         "highlighted": highlighted_uuid,
         "authenticated": authenticated,
-        "pages": pages
+        "pages": pages,
+        "current_page": requested_slug
     })