✨feature: Style pagination

index.php

@@ -16,6 +16,14 @@ if ( hasSidebar() ) {
 	$classes = 'container my-section lg:my-0 mx-auto';
 }
 
+ob_start();
+get_template_part( 'views/icons/prev' );
+$pagination_prev_icon = ob_get_clean();
+
+ob_start();
+get_template_part( 'views/icons/next' );
+$pagination_next_icon = ob_get_clean();
+
 get_header();
 ?>
 
@@ -64,8 +72,8 @@ get_header();
 					the_posts_pagination(
 						array(
 							'mid_size'  => 2,
-							'prev_text' => '« Previous',
+							'prev_text' => $pagination_prev_icon . '<span class="sr-only">' . esc_html__( 'Previous', 'cwc' ) . '</span>',
-							'next_text' => 'Next &raquo;',
+							'next_text' => $pagination_next_icon . '<span class="sr-only">' . esc_html__( 'Next', 'cwc' ) . '</span>',
 						)
 					);
 					?>

styles/components/pagination.css

@@ -1,35 +1,29 @@
 /* Post index pagination styles */
 
 .pagination {
-  .nav-links {
+    .nav-links {
-    @apply hidden md:flex items-center justify-center mt-12;
+        @apply hidden md:flex items-center justify-center mt-12;
 
-    .page-numbers {
+        .page-numbers {
-      @apply hidden md:flex items-center justify-center h-10 p-4 text-base font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
+            @apply hidden md:flex items-center justify-center h-16 w-16 text-32px font-quincy font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
+        }
+
+        .page-numbers.current { @apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info; }
+
+        .prev, .next { @apply flex gap-4 w-fit; }
     }
 
-    .page-numbers.current {
+    & a, & span {
-      @apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info;
+        border-radius: 4px;
+        color: var(--color-cwc-blue-01) !important;
+        margin: 0 5px;
+        padding: .25rem .5rem;
+        text-decoration: none;
     }
 
-    .prev, .next {
+    & .current, & a:hover {
-      @apply flex gap-4;
+        background: color-mix(in oklch, var(--color-cwc-blue-03), white 50%) !important;
+        color: var(--color-cwc-blue-01) !important;
+        padding: .25rem .5rem;
     }
-  }
-
-  & a, & span {
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    color: #3857BC !important;
-    margin: 0 5px;
-    padding: .25rem .5rem;
-    text-decoration: none;
-  }
-
-  & .current, & a:hover {
-    background: #3857BC !important;
-    border-color: #3857BC !important;
-    color: #fff !important;
-    padding: .25rem .5rem;
-  }
 }

views/icons/next.php

@@ -0,0 +1,4 @@
+<svg width="11" height="19" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Next</title>
+    <path d="M1.5 17.5L9.5 9.5L1.5 1.5" stroke="#F26B53" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

views/icons/prev.php

@@ -0,0 +1,4 @@
+<svg width="11" height="19" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Previous</title>
+    <path d="M9.5 1.5L1.5 9.5L9.5 17.5" stroke="#F26B53" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>