Add pagination

layouts/index.html

@@ -1,7 +1,13 @@
 {{ define "main" -}}
   <div class="posts">
-  {{ range .Site.RegularPages -}}
+    {{- $regularPages := where .Site.RegularPages "Type" "in" .Site.Params.MainSections -}}
-    {{ if and (or (eq .Type "post") (eq .Type "article")) (or (not (isset .Params "Hidden")) (eq .Params.Hidden false)) -}}
+    {{- $pagesNotHidden := where $regularPages ".Params.hidden" "==" false -}}
+    {{- $pagesHiddenUnset := where $regularPages ".Params.hidden" "==" nil -}}
+
+    {{- $pages := $pagesNotHidden | union $pagesHiddenUnset -}}
+    {{- $paginator := .Paginate $pages -}}
+
+    {{ range $paginator.Pages }}
       <article class="post">
         <h1 class="post-title">
           <a href="{{ .Permalink }}">{{ .Title }}</a>
@@ -24,6 +30,7 @@
         {{ end }}
       </article>
     {{- end }}
-  {{- end }}
   </div>
+
+  {{ template "_internal/pagination.html" . }}
 {{- end }}

static/css/hyde.css

@@ -67,6 +67,10 @@ html {
     bottom: 0;
     width: 18rem;
   }
+
+  footer {
+    padding-left: 18rem;
+  }
 }
 
 /* Sidebar links */
@@ -206,3 +210,66 @@ ul.posts {
 .social-icons a:focus {
   text-decoration: none !important;
 }
+
+.pagination {
+  justify-content: center;
+  display: flex;
+  margin: 1em 0;
+  padding: 0;
+}
+
+.pagination ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.pagination li {
+  display: block;
+  float: left;
+  margin-left: -1px;
+}
+
+.pagination li a {
+  display: block;
+  margin-bottom: 0.25em;
+  padding: 0.5em 1em;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  color: #49757a;
+  border: 1px solid #49757a;
+  border-radius: 0;
+}
+
+.pagination li a:hover {
+  color: #fff;
+  background: rgba(67, 118, 122, 0.75);
+}
+
+.pagination li.active a {
+  color: #fff;
+  background: #49757a;
+}
+
+.pagination li.disabled a {
+  color: rgba(67, 118, 122, 0.5);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.pagination li:first-child {
+  margin-left: 0;
+}
+
+.pagination li:first-child a {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.pagination li:last-child a {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}