add pagination

2 files changed, 34 insertions, 1 deletions

diff --git a/assets/css/media-queries.css b/assets/css/media-queries.css
index 11fe039..556d688 100644
--- a/assets/css/media-queries.css
+++ b/assets/css/media-queries.css
@@ -12,6 +12,10 @@
         margin: 0 20%;
     }
 
+    .pagination {
+        width: 40%;
+    }
+
     .footer__contact {
         flex-direction: column;
         padding: 1.75rem;
@@ -43,6 +47,10 @@
         max-width: 70%;
     }
 
+    .pagination {
+        width: 50%;
+    }
+
     .footer__social {
         padding: 1rem 0;
     }
@@ -88,6 +96,10 @@
     .post__body {
         margin: 0 10%;
     }
+
+    .pagination {
+        width: 70%;
+    }
 }
 
 @media only screen and (max-width: 576px) {
diff --git a/assets/css/style.css b/assets/css/style.css
index 28aa7fb..0e7be99 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -488,4 +488,25 @@
     opacity: 0.7;
     transform: scale(0, 0);
     transition: 0s;
-}
\ No newline at end of file
+}
+
+/* PAGINATION */
+.pagination {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 1.75rem;
+    width: 20%;
+}
+
+.page-item.disabled > .page-link {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.page-item.active > .page-link {
+    color: var(--primary-dark);
+}
+
+.page-link {
+    color: var(--primary-text);
+}