Stylize pagination buttons

2 files changed, 52 insertions, 2 deletions

diff --git a/jakob/utils/pagination.scm b/jakob/utils/pagination.scm
index 9e6ff13..18ecfc3 100644
--- a/jakob/utils/pagination.scm
+++ b/jakob/utils/pagination.scm
@@ -71,9 +71,13 @@ PREVIOUS-PAGE and NEXT-PAGE."
      (nav
       (@ (id "pagination"))
       ,(when previous-page
-         (hyperlink previous-page "← Previous Page"))
+         `(a (@ (href ,previous-page)
+                (rel "prev"))
+             "← Previous Page"))
       ,(when next-page
-         (hyperlink next-page "Next Page →")))
+         `(a (@ (href ,next-page)
+                (rel "next"))
+             "Next Page →")))
      ,@(if enable-search
            `((link (@ (rel "stylesheet")
                       (href "/_pagefind/pagefind-ui.css")))
diff --git a/static/css/style.css b/static/css/style.css
index 49b1f88..0b50f03 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -698,3 +698,49 @@ figure:not(.code-container) figcaption .figure-number {
     text-transform: uppercase;
     color: #333
 }
+
+#pagination {
+    display: flex;
+    justify-content: space-between;
+    margin: 30px 0;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc
+}
+
+#pagination a {
+    text-transform: uppercase;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    padding: 6px 12px;
+    color: #fff;
+    background: linear-gradient(to bottom,#333 0,#222 40%,#111 50%,#222 60%,#333 100%);
+    border: 1px solid #000;
+    border-left: 4px solid #2e8b57;
+    text-decoration: none;
+    box-shadow: 2px 2px 0#ccc
+}
+
+#pagination a:hover {
+    background: #2e8b57;
+    border-color: #000;
+    color: #fff
+}
+
+#pagination a:only-child {
+    margin-left: auto
+}
+
+#pagination a[rel=prev]:only-child {
+    margin-right: auto;
+    margin-left: 0
+}
+
+#pagination a[rel=next]:only-child {
+    margin-left: auto
+}
+
+#pagination:empty {
+    display: none;
+}