Pagination

css/index.css

@@ -15,6 +15,7 @@
 @import "comment-respond";
 @import "avatar";
 @import "link";
+@import "pagination";
 
 :root {
   --color-black: #000;

css/page.css

@@ -19,6 +19,11 @@
   position: relative;
 }
 
+.page__pagination {
+  display: flex;
+  justify-content: center;
+}
+
 @media (--viewport-lg) {
   .page {
     grid-template-columns: 224px 1fr;
@@ -51,6 +56,7 @@
     grid-row: span 1;
   }
 
+  .page__pagination,
   .page__footer {
     grid-column: 1 / -1;
   }

css/pagination.css

@@ -0,0 +1,50 @@
+.pagination {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.pagination__list {
+  display: flex;
+}
+
+.pagination__item {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 var(--space-xs);
+}
+
+.pagination__dots {
+  display: flex;
+  color: var(--color-light-blue);
+}
+
+.pagination__current {
+  font-weight: 700;
+  position: relative;
+}
+
+.pagination__current:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  position: absolute;
+  right: 0;
+}
+
+.pagination__link,
+.pagination__link:hover,
+.pagination__link:focus,
+.pagination__link:visited {
+  display: block;
+  position: relative;
+  color: var(--color-light-blue);
+  transition: transform var(--transition-md) ease-out;
+}
+
+.pagination__link:focus,
+.pagination__link:hover {
+  transform: scale(1.3);
+}

theme/icons.php

@@ -2,12 +2,21 @@
   <symbol id="icon-calendar" viewBox="0 0 448 512">
     <path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path>
   </symbol>
+  <symbol id="icon-chevron-left" viewBox="0 0 256 512">
+    <path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"></path>
+  </symbol>
+  <symbol id="icon-chevron-right" viewBox="0 0 256 512">
+    <path fill="currentColor" d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"></path>
+  </symbol>
   <symbol id="icon-comments" viewBox="0 0 576 512">
     <path fill="currentColor" d="M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.4 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.1 2.1 18.4 3.7 28 4.8 31.5 57.5 105.5 98 191.8 98 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.5-.4-22.6-24.2-37.9-54.9zM142.2 311l-11.4 7.4c-20.1 13.1-50.5 28.2-87.7 32.5 8.8-11.3 20.2-27.6 29.5-46.4L83 283.7l-16.5-16.3C50.7 251.9 32 226.2 32 192c0-70.6 79-128 176-128s176 57.4 176 128-79 128-176 128c-17.7 0-35.4-2-52.6-6l-13.2-3zm303 103.4l-11.4-7.4-13.2 3.1c-17.2 4-34.9 6-52.6 6-65.1 0-122-25.9-152.4-64.3C326.9 348.6 416 278.4 416 192c0-9.5-1.3-18.7-3.3-27.7C488.1 178.8 544 228.7 544 288c0 34.2-18.7 59.9-34.5 75.4L493 379.7l10.3 20.7c9.4 18.9 20.8 35.2 29.5 46.4-37.1-4.2-67.5-19.4-87.6-32.4zm-37.8-267.7c.1.2.1.4.2.6-.1-.2-.1-.4-.2-.6z"></path>
   </symbol>
   <symbol id="icon-edit" viewBox="0 0 576 512">
     <path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path>
   </symbol>
+  <symbol id="icon-ellipsis" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M256 184c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 112c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm176-112c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 112c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM80 184c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 112c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z"></path>
+  </symbol>
   <symbol id="icon-facebook" viewBox="0 0 512 512">
     <path fill="currentColor" d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path>
   </symbol>

theme/index.php

@@ -28,6 +28,9 @@
     <?php get_template_part('partials/metadata') ?>
   </section>
   <?php endwhile; ?>
+  <section class="page__pagination">
+    <?php get_template_part('partials/pagination') ?>
+  </section>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>
   </section>

theme/partials/pagination.php

@@ -0,0 +1,61 @@
+<?php
+$base_url = get_site_url().'/page/';
+$current = get_query_var('paged');
+$total = $wp_query->max_num_pages;
+$links = paginate_links(array(
+  type => 'array',
+  prev_next => false,
+  current => $current,
+  end_size => 2,
+));
+
+function get_previous_url($base_url, $page) {
+  return $base_url . ($page - 1);
+}
+
+function get_next_url($base_url, $page) {
+  if ($page === 0) {
+    return $base_url . '2';
+  }
+  return $base_url . ($page + 1);
+}
+function format_link($link) {
+  if (strpos($link, 'page-numbers dots')) {
+    return '<span class="pagination__dots"><svg class="icon icon--extra-small"><use href="#icon-ellipsis"></use></svg></span>';
+  }
+  $link = str_replace('page-numbers current', 'pagination__current', $link);
+  $link = str_replace('page-numbers', 'link', $link);
+  return $link;
+}
+
+?>
+<div class="pagination">
+  <?php if ($current > 1) : ?>
+    <div class="pagination__previous">
+      <a class="pagination__link" href="<?php echo get_previous_url($base_url, $current) ?>" aria-label="Previous page">
+        <svg class="icon icon--small">
+          <use href="#icon-chevron-left"></use>
+        </svg>
+      </a>
+    </div>
+  <?php endif; ?>
+  <nav class="pagination__content" aria-label="Pagination navigation">
+    <ul class="pagination__list" role="navigation">
+      <?php foreach($links as $link) { ?>
+        <li class="pagination__item">
+          <?php echo $key ?>
+          <?php echo format_link($link) ?>
+        </li>
+      <?php } ?>
+    </ul>
+  </nav>
+  <?php if ($current < $total) : ?>
+    <div class="pagination__next">
+      <a class="pagination__link" href="<?php echo get_next_url($base_url, $current) ?> aria-label="Next page">
+        <svg class="icon icon--small">
+          <use href="#icon-chevron-right"></use>
+        </svg>
+      </a>
+    </div>
+  <?php endif; ?>
+</div>