From 1362ac88f64472fdea1b44f638aca9073ce5d69b Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Fri, 12 Apr 2024 13:13:28 -0300
Subject: [PATCH] feat: style pagination

---
 src/_includes/layouts/page.njk                | 10 +------
 .../partials/components/pagination.njk        | 22 ++++++---------
 src/_includes/svg/next.svg                    |  1 +
 src/_includes/svg/previous.svg                |  1 +
 src/assets/styles/app.css                     | 28 +++++++++++++++++--
 5 files changed, 38 insertions(+), 24 deletions(-)
 create mode 100644 src/_includes/svg/next.svg
 create mode 100644 src/_includes/svg/previous.svg

diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
index ed7fe0e..f119ad8 100644
--- a/src/_includes/layouts/page.njk
+++ b/src/_includes/layouts/page.njk
@@ -26,15 +26,7 @@
         {% endif %}
         {% endfor %}
     </div>
-    <nav data-pagination-navigation>
-        <ul role="list">
-            <li><a href="#" rel="prev">Previous</a></li>
-            <li><a href="#" rel="next">Next</a></li>
-            <template data-pagination-link>
-                <li><a href="#" data-page></a></li>
-            </template>
-        </ul>
-    </nav>
+    {% include "partials/components/pagination.njk" %}
 </filter-container>
 {% endblock %}
 
diff --git a/src/_includes/partials/components/pagination.njk b/src/_includes/partials/components/pagination.njk
index 627048c..71abb95 100644
--- a/src/_includes/partials/components/pagination.njk
+++ b/src/_includes/partials/components/pagination.njk
@@ -1,13 +1,9 @@
-        <nav class="pagination" aria-label="{% _ locale, "posts navigation" %}">
-            <ul>
-            {%- if pagination.href.previous %}
-                <li><a href="{{ pagination.href.previous }}"><span aria-hidden="true">&larr;</span><span class="visually-hidden">{% _ locale, "previous" %}</span></a></li>
-            {%- endif %}
-            {%- for pageEntry in pagination.pages %}
-                <li><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %} aria-label="{% _ locale, "page %s of %s", loop.index, pagination.pages.length %}">{{ loop.index }}</a></li>
-            {%- endfor %}
-            {%- if pagination.href.next %}
-                <li><a href="{{ pagination.href.next }}"><span class="visually-hidden">{% _ locale, "next" %}</span><span aria-hidden="true">&rarr;</span></a></li>
-            {%- endif %}
-            </ul>
-        </nav>
+    <nav data-pagination-navigation aria-label="{{ 'pagination.label' | i18n }}">
+        <ul role="list">
+            <li><a href="#" rel="prev">{% include "svg/previous.svg" %}<span class="visually-hidden">{{ 'pagination.previous' | i18n }}</span></a></li>
+            <li><a href="#" rel="next">{% include "svg/next.svg" %}<span class="visually-hidden">{{ 'pagination.next' | i18n }}</span></a></li>
+            <template data-pagination-link>
+                <li><a href="#" data-page></a></li>
+            </template>
+        </ul>
+    </nav>
diff --git a/src/_includes/svg/next.svg b/src/_includes/svg/next.svg
new file mode 100644
index 0000000..342ac58
--- /dev/null
+++ b/src/_includes/svg/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 12"><path fill="currentColor" d="M.59 10.59 5.17 6 .59 1.41 2 0l6 6-6 6-1.41-1.41Z"/></svg>
diff --git a/src/_includes/svg/previous.svg b/src/_includes/svg/previous.svg
new file mode 100644
index 0000000..9592cc9
--- /dev/null
+++ b/src/_includes/svg/previous.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 12"><path fill="currentColor" d="M7.41 10.59 2.83 6l4.58-4.59L6 0 0 6l6 6 1.41-1.41Z"/></svg>
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
index 6dc1e4b..ab31c9d 100644
--- a/src/assets/styles/app.css
+++ b/src/assets/styles/app.css
@@ -110,12 +110,16 @@ h2,
     padding-block-end: 1.7rem;
 }
 
+.submissions article + article {
+    margin-block-start: 4rem;
+}
+
 .flow > * + * {
     margin-block-start: var(--flow-space, 1em);
 }
 
 .filters {
-    --flow-space: 3.25rem;
+    --flow-space: 2.5rem;
 }
 
 .filters > h2 {
@@ -195,7 +199,7 @@ legend {
     line-height: 1.219;
     margin-block: 0;
     padding-block-end: 0;
-    padding-block-start: 3.25rem;
+    padding-block-start: 2.5rem;
 }
 
 .submissions .presenters {
@@ -284,6 +288,26 @@ a {
     text-decoration: none;
 }
 
+[data-pagination-navigation] ul {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-block-start: 8.25rem;
+}
+
+[data-pagination-navigation] a {
+    align-items: center;
+    block-size: 2.5rem;
+    display: flex;
+    inline-size: 2.5rem;
+    justify-content: center;
+}
+
+[data-pagination-navigation] svg {
+    block-size: 0.75rem;
+    inline-size: auto;
+}
+
 filter-container {
     margin-block-start: 5.3125rem;
 }