feat: add paginator to blog list

assets/scss/common/_dark.scss

@@ -480,3 +480,36 @@ $navbar-dark-active-color:          $link-color-dark;
 [data-dark-mode] body .email-form .form-control:focus {
   border: 1px solid $link-color-dark;
 }
+
+[data-dark-mode] .page-link {
+  color: $link-color-dark;
+  background-color: transparent;
+  border: $pagination-border-width solid $border-dark;
+
+  &:hover {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+    border-color: $body-color-dark;
+  }
+
+  &:focus {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+  }
+}
+
+[data-dark-mode] .page-item {
+  &.active .page-link {
+    color: $body-bg-dark;
+
+    @include gradient-bg($link-color-dark);
+
+    border-color: $link-color-dark;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    background-color: $body-overlay-dark;
+    border-color: $border-dark;
+  }
+}

assets/scss/layouts/_pages.scss

@@ -43,3 +43,7 @@ p.meta {
   margin-top: 2.25rem;
   font-size: $font-size-base;
 }
+
+.page-link:hover {
+  text-decoration: none;
+}

layouts/blog/list.html

@@ -5,7 +5,8 @@
       <h1 class="text-center">{{ .Title }}</h1>
       <div class="text-center">{{ .Content }}</div>
 			<div class="card-list">
-				{{ range .Data.Pages -}}
+				{{ $paginator := .Paginate (.Data.Pages) -}}
+				{{ range $paginator.Pages -}}
 					<div class="card">
 						<div class="card-body">
 							<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
@@ -14,6 +15,8 @@
 						</div>
 					</div>
 				{{ end -}}
+				{{ $.Scratch.Set "paginator" true }}
+				{{ template "_internal/pagination.html" . }}
 			</div>
     </article>
   </div>