fixup! Introduce posts pagination

frontend-garden · Apr 16, 2024 · f563191 · f563191
1 parent 7d8c67d
commit f563191
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 3 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -91,6 +91,7 @@
 // Single-purpose overrides.
 @forward "styles/10-utilities/background";
 @forward "styles/10-utilities/color";
+@forward "styles/10-utilities/hidden";
 @forward "styles/10-utilities/print";
 @forward "styles/10-utilities/spacing";
 @forward "styles/10-utilities/text";
diff --git a/assets/scss/settings/_button.scss b/assets/scss/settings/_button.scss
@@ -11,8 +11,10 @@ $line-height: spacing.of(1);
 $padding-block: spacing.of(0.5);
 $padding-inline: 1.5em;
 $height: calc(#{2 * $border-width} + #{$line-height} + 2 * #{$padding-block});
+$column-gap: 1em;
 
 $line-height-small: 1.25em;
 $padding-block-small: 0.5em;
 $padding-inline-small: 1em;
 $height-small: calc(#{2 * $border-width} + #{$line-height-small} + 2 * #{$padding-block-small});
+$column-gap-small: 0.5em;
diff --git a/assets/scss/styles/06-components/_button.scss b/assets/scss/styles/06-components/_button.scss
@@ -45,6 +45,7 @@
 }
 
 .button--small {
+    column-gap: button-settings.$column-gap-small;
     height: button-settings.$height-small;
     padding: button-settings.$padding-block-small button-settings.$padding-inline-small;
     line-height: button-settings.$line-height-small;

diff --git a/assets/scss/styles/10-utilities/_hidden.scss b/assets/scss/styles/10-utilities/_hidden.scss
@@ -0,0 +1,11 @@
+@use "../../tools/breakpoint";
+
+// stylelint-disable declaration-no-important -- Only allow `!important` for utility classes.
+
+.hidden-sm {
+    display: none !important;
+
+    @include breakpoint.up(md) {
+        display: initial !important;
+    }
+}
diff --git a/assets/scss/tools/_button.scss b/assets/scss/tools/_button.scss
@@ -12,6 +12,7 @@
     position: relative;
     appearance: none;
     display: inline-flex;
+    column-gap: button.$column-gap;
     align-items: center;
     justify-content: center;
     height: button.$height;

diff --git a/partials/pagination.hbs b/partials/pagination.hbs
@@ -3,8 +3,11 @@
 
         {{#if prev}}
             <a href="{{page_url prev}}" class="button button--secondary button--small">
-                <span class="spacing-right-1" aria-hidden="true">&larr;</span>
-                Novější články
+                <span aria-hidden="true">&larr;</span>
+                <span>
+                    Novější
+                    <span class="hidden-sm">články</span>
+                </span>
             </a>
         {{/if}}
 
@@ -16,7 +19,10 @@
 
         {{#if next}}
             <a href="{{page_url next}}" class="button button--secondary button--small">
-                <span class="spacing-right-1">Starší články</span>
+                <span>
+                    Starší
+                    <span class="hidden-sm">články</span>
+                </span>
                 <span aria-hidden="true">&rarr;</span>
             </a>
         {{/if}}