🐛 Fix: component paginator style error (#188)

CHANGELOG.md

@@ -35,6 +35,7 @@ All notable changes to this project will be documented in this file.
 - :bug: Fix: typeit shortcode invalid config `duration = -1` and fix style
 - :bug: Fix: typeit shortcode prints consecutive spaces and newline errors
 - :art: Style: change the default icons of some social links
+- :bug: Fix: component `paginator` style error ([#188](https://github.com/hugo-fixit/FixIt/issues/188))
 - :lipstick: Style: fix language and theme switch cursor style ([#193](https://github.com/hugo-fixit/FixIt/issues/193))
 - :globe_with_meridians: Docs(i18n): update pt-br, de in i18n
 - :mag: Perf(SEO): enhance SEO performance

assets/css/_core/_media.scss

@@ -123,6 +123,10 @@
       font-size: 0.618rem;
     }
   }
+  
+  .pagination .page-item {
+    margin: 0 5px;
+  }
 }
 
 @media only print {

assets/css/_partials/_pagination.scss

@@ -2,10 +2,11 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  flex-wrap: wrap;
   list-style: none;
   white-space: nowrap;
   width: 100%;
-  padding: 1rem 0 0;
+  padding: 1rem 0;
 
   a {
     font-size: 0.8rem;
@@ -22,8 +23,8 @@
   }
 
   li {
-    padding-bottom: 3px;
-    margin: 0 20px;
+    padding: 5px;
+    margin: 0 10px;
     box-sizing: border-box;
     position: relative;
     display: inline;
@@ -40,8 +41,8 @@
       color: $pagination-link-hover-color-dark;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
       content: '';
       width: 0;
@@ -51,27 +52,22 @@
       bottom: 0px;
     }
 
-    [data-theme='dark'] &:before,
-    [data-theme='dark'] &:after {
+    [data-theme='dark'] &::before,
+    [data-theme='dark'] &::after {
       background: $pagination-link-hover-color-dark;
     }
 
-    &:before .active,
-    &:after .active {
-      width: 100%;
-    }
-
-    &:before {
+    &::before {
       left: 50%;
     }
 
-    &:after {
+    &::after {
       right: 50%;
     }
 
     &:hover {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         width: 50%;
       }
     }
@@ -85,9 +81,9 @@
         color: $pagination-link-hover-color-dark;
       }
 
-      &:before,
-      &:after {
-        width: 60%;
+      &::before,
+      &::after {
+        width: 50%;
       }
     }
   }

layouts/partials/paginator.html

@@ -13,15 +13,13 @@
         {{- $.Scratch.Set "paginator.ellipsed" true -}}
       {{- end -}}
       {{- if $showNumber -}}
-        <li class="page-item {{ if eq . $.Paginator }}active{{ end }}">
+        <li class="page-item{{ if eq . $.Paginator }} active{{ end }}">
           <span class="page-link">
-            <a href="{{ .URL }}">
-              {{- .PageNumber -}}
-            </a>
+            <a href="{{ .URL }}">{{ .PageNumber }}</a>
           </span>
         </li>
       {{- else if ($.Scratch.Get "paginator.shouldEllipse") -}}
-        <li class="page-item ">
+        <li class="page-item">
           <span class="page-link" aria-hidden="true">&hellip;</span>
         </li>
       {{- end -}}