diff --git a/css/index.css b/css/index.css
index ff35fb2..d408587 100644
--- a/css/index.css
+++ b/css/index.css
@@ -15,6 +15,7 @@
@import "comment-respond";
@import "avatar";
@import "link";
+@import "pagination";
:root {
--color-black: #000;
diff --git a/css/page.css b/css/page.css
index 41f2799..7995651 100644
--- a/css/page.css
+++ b/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;
}
diff --git a/css/pagination.css b/css/pagination.css
new file mode 100644
index 0000000..ce5d63d
--- /dev/null
+++ b/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);
+}
diff --git a/theme/icons.php b/theme/icons.php
index 7277f42..ae3364d 100644
--- a/theme/icons.php
+++ b/theme/icons.php
@@ -2,12 +2,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/theme/index.php b/theme/index.php
index bc42dc5..5a44bb0 100644
--- a/theme/index.php
+++ b/theme/index.php
@@ -28,6 +28,9 @@
+
diff --git a/theme/partials/pagination.php b/theme/partials/pagination.php
new file mode 100644
index 0000000..7af3e60
--- /dev/null
+++ b/theme/partials/pagination.php
@@ -0,0 +1,61 @@
+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 '';
+ }
+ $link = str_replace('page-numbers current', 'pagination__current', $link);
+ $link = str_replace('page-numbers', 'link', $link);
+ return $link;
+}
+
+?>
+