feat: Implement numbered pagination for blog

This commit introduces a numbered pagination system for the blog, displaying 10 posts per page.

- Implements a numbered pagination partial with corresponding styles.
- Modifies the blog list template to use the new pagination partial.
- Updates `config.toml` to use the correct `pagerSize` key for pagination.
- Refactors pagination styles into a separate `_pagination.scss` partial for better organization and scopes them to a `.blog-pagination` class.

Author: google-labs-jules[bot]

assets/scss/components/_pagination.scss

@@ -0,0 +1,16 @@
+.blog-pagination .pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+  .page-item {
+    margin: 0 0.25rem;
+    &.active .page-link {
+      background-color: $primary;
+      color: $white;
+      border-color: $primary;
+    }
+    .page-link {
+      border-radius: 0.25rem;
+    }
+  }
+}

assets/scss/style.scss

@@ -57,6 +57,7 @@ $sub-footer-text-color: $white;
 @import 'components/social';
 @import 'components/blog-carousel';
 @import 'components/testimonials';
+@import 'components/pagination';
 
 // Pages
 @import 'pages/home';
@@ -72,20 +73,3 @@ body {
     line-height: 1.3;
   }
 }
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  margin-top: 2rem;
-  .page-item {
-    margin: 0 0.25rem;
-    &.active .page-link {
-      background-color: $primary;
-      color: $white;
-      border-color: $primary;
-    }
-    .page-link {
-      border-radius: 0.25rem;
-    }
-  }
-}

layouts/blog/list.html

@@ -18,6 +18,8 @@
     </div>
     {{ end }}
   </div>
-  {{ partial "pagination.html" . }}
+  <div class="blog-pagination">
+    {{ partial "pagination.html" . }}
+  </div>
 </div>
 {{ end }}