Introduce posts pagination

assets/scss/main.scss

@@ -32,6 +32,7 @@
 @forward "styles/04-objects/grid";
 @forward "styles/04-objects/input-group";
 @forward "styles/04-objects/media";
+@forward "styles/04-objects/pagination";
 @forward "styles/04-objects/post-feed";
 @forward "styles/04-objects/post-row";
 @forward "styles/04-objects/section";
@@ -90,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";

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;

assets/scss/styles/04-objects/_pagination.scss

@@ -0,0 +1,11 @@
+// 1. Mirror the section padding bottom to the pagination top margin.
+
+@use "../../settings/navigation";
+
+.pagination {
+    display: flex;
+    gap: navigation.$item-padding-big;
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--section-padding-bottom, 0); // 1.
+}

assets/scss/styles/04-objects/_section.scss

@@ -2,40 +2,43 @@
 @use "../../tools/spacing";
 
 .section {
-    padding-top: spacing.of(1);
-    padding-bottom: spacing.of(1);
+    --section-padding-top: #{spacing.of(1)};
+    --section-padding-bottom: #{spacing.of(1)};
+
+    padding-top: var(--section-padding-top);
+    padding-bottom: var(--section-padding-bottom);
 
     @include breakpoint.up(lg) {
-        padding-top: spacing.of(1.5);
-        padding-bottom: spacing.of(1.5);
+        --section-padding-top: #{spacing.of(1.5)};
+        --section-padding-bottom: #{spacing.of(1.5)};
     }
 
     @include breakpoint.up(xl) {
-        padding-top: spacing.of(2);
-        padding-bottom: spacing.of(2);
+        --section-padding-top: #{spacing.of(2)};
+        --section-padding-bottom: #{spacing.of(2)};
     }
 }
 
 .section--dense-top {
-    padding-top: spacing.of(0.5);
+    --section-padding-top: #{spacing.of(0.5)};
 
     @include breakpoint.up(md) {
-        padding-top: spacing.of(0.75);
+        --section-padding-top: #{spacing.of(0.75)};
     }
 
     @include breakpoint.up(lg) {
-        padding-top: spacing.of(1);
+        --section-padding-top: #{spacing.of(1)};
     }
 }
 
 .section--only-top:not(:last-child) {
-    padding-bottom: 0;
+    --section-padding-bottom: 0;
 }
 
 .section--roomy-bottom {
-    padding-bottom: spacing.of(1.5);
+    --section-padding-bottom: #{spacing.of(1.5)};
 
     @include breakpoint.up(xl) {
-        padding-bottom: spacing.of(2);
+        --section-padding-bottom: #{spacing.of(2)};
     }
 }

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;

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;
+    }
+}

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;

index.hbs

@@ -22,6 +22,8 @@
                 {{/foreach}}
             </div>
 
+            {{pagination}}
+
         </div>
     </section>
 </main>

partials/pagination.hbs

@@ -0,0 +1,31 @@
+{{#match pages ">" 1}}
+    <nav class="pagination">
+
+        {{#if prev}}
+            <a href="{{page_url prev}}" class="button button--secondary button--small">
+                <span aria-hidden="true">&larr;</span>
+                <span>
+                    Novější
+                    <span class="hidden-sm">články</span>
+                </span>
+            </a>
+        {{/if}}
+
+        {{^is "home"}}
+            <span class="text-nowrap">
+                {{page}} / {{pages}}
+            </span>
+        {{/is}}
+
+        {{#if next}}
+            <a href="{{page_url next}}" class="button button--secondary button--small">
+                <span>
+                    Starší
+                    <span class="hidden-sm">články</span>
+                </span>
+                <span aria-hidden="true">&rarr;</span>
+            </a>
+        {{/if}}
+
+    </nav>
+{{/match}}