💄 Add styles for pagination links

config/_default/params.toml

@@ -18,6 +18,9 @@
   showPagination = true
   showReadingTime = true
 
+[list]
+  groupByYear = true
+
 [taxonomy]
   showTermCount = true
 

layouts/partials/article-pagination.html

@@ -6,7 +6,7 @@
         <span>
           {{ if .NextInSection }}
             <a class="flex" href="{{ .NextInSection.Permalink }}">
-              <span class="mr-3">←</span>
+              <span class="mr-3">&larr;</span>
               <span class="flex flex-col">
                 <span class="button__text">{{ .NextInSection.Title }}</span>
                 {{ if .Site.Params.article.showDate | default true }}
@@ -35,7 +35,7 @@
                   </time>
                 {{ end }}
               </span>
-              <span class="ml-3">→</span>
+              <span class="ml-3">&rarr;</span>
             </a>
           {{ end }}
         </span>

layouts/partials/pagination.html

@@ -1,41 +1,34 @@
-<!-- See: https://glennmccomb.com/articles/how-to-build-custom-hugo-pagination/ -->
-<!-- Assign .Paginator object to a $paginator variable -->
 {{ $paginator := .Paginator }}
-<!-- If there's more than one page. -->
 {{ if gt $paginator.TotalPages 1 }}
-  <ul class="Pagination">
+  <ul class="flex flex-row mt-8">
-    <!-- Previous page. -->
     {{ if $paginator.HasPrev }}
-      <li class="Pagination-item Pagination-item--previous">
+      <li>
         <a
           href="{{ $paginator.Prev.URL }}"
-          class="Pagination-itemLink Pagination-itemLink--previous"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
           rel="prev"
         >
           &larr;
         </a>
       </li>
     {{ end }}
-
-
-    <!-- Page numbers. -->
     {{ range $paginator.Pagers }}
-      <li
+      <li>
-        class="Pagination-item{{ if eq . $paginator }}
+        <a
-          Pagination-item--current
+          href="{{ .URL }}"
-        {{ end }}"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded {{ if eq . $paginator }}
-      >
+            bg-primary-200 dark:bg-primary-400 dark:text-gray-800
-        <a href="{{ .URL }}" class="Pagination-itemLink"> {{ .PageNumber }} </a>
+          {{ end }}"
+        >
+          {{ .PageNumber }}
+        </a>
       </li>
     {{ end }}
-
-
-    <!-- Next page. -->
     {{ if $paginator.HasNext }}
-      <li class="Pagination-item Pagination-item--next">
+      <li>
         <a
           href="{{ $paginator.Next.URL }}"
-          class="Pagination-itemLink Pagination-itemLink--next"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
           rel="next"
         >
           &rarr;

layouts/partials/section-heading.html

@@ -1,4 +1,4 @@
-<section class="prose">
+<section class="prose dark:prose-light">
   <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
   <section>{{ .Content }}</section>
 </section>