feat: add spacing util classes

src/_includes/css/spacing.njk

@@ -0,0 +1,79 @@
+{% set spacingValues = spacing | entries %}
+
+{% for spaceValue in spacingValues %}
+    {% set key = spaceValue | first | replace(".", "\\\.") | safe %}
+    {% set value = spaceValue | last %}
+    .gap-{{ key }} {
+        gap: {{ value }}px;
+    }
+
+    .p-{{ key }} {
+        padding: {{ value }}px;
+    }
+
+    .px-{{ key }} {
+        padding-inline: {{ value }}px;
+    }
+
+    .py-{{ key }} {
+        padding-block: {{ value }}px;
+    }
+
+    .pl-{{ key }} {
+        padding-inline-start: {{ value }}px;
+    }
+
+    .pr-{{ key }} {
+        padding-inline-end: {{ value }}px;
+    }
+
+    .pt-{{ key }} {
+        padding-block-start: {{ value }}px;
+    }
+
+    .pb-{{ key }} {
+        padding-block-end: {{ value }}px;
+    }
+
+    .m-{{ key }} {
+        margin: {{ value }}px;
+    }
+
+    .mx-{{ key }} {
+        margin-inline: {{ value }}px;
+    }
+
+    .my-{{ key }} {
+        margin-block: {{ value }}px;
+    }
+
+    .ml-{{ key }} {
+        margin-inline-start: {{ value }}px;
+    }
+
+    .mr-{{ key }} {
+        margin-inline-end: {{ value }}px;
+    }
+
+    .mt-{{ key }} {
+        margin-block-start: {{ value }}px;
+    }
+
+    .mb-{{ key }} {
+        margin-block-end: {{ value }}px;
+    }
+
+    .w-{{ key }} {
+        width: {{ value }}px;
+    }
+
+    .h-{{ key }} {
+        height: {{ value }}px;
+    }
+
+    .size-{{ key }} {
+        width: {{ value }}px;
+        height: {{ value }}px;
+    }
+{% endfor %}
+

src/_includes/partials/footer.html

@@ -1,9 +1,9 @@
 {% set socialLinks = meta.social | entries %}
-<footer class="[ footer ]">
-    <div class="[ footer-grid footer-gap wrapper ]">
+<footer class="[ footer ][ mt-1.5 py-1.5 ]">
+    <div class="[ footer-grid wrapper ][ gap-0.5 ]">
         <p>&copy; {{ meta.author }} 2018-2024.</p>
         <nav class="[ footer-pages ]">
-            <ul class="[ footer-links ] [ flex list-none ]">
+            <ul class="[ flex-col list-none p-0 m-0 gap-0.5 ]">
                 {% for link in navigation.bottom %}
                     <li>
                         <a href="{{ link.url }}">{{ link.text }}</a>
@@ -12,7 +12,7 @@
             </ul>
         </nav>
         <nav class="[ footer-socials ]">
-            <ul class="[ footer-links footer-gap ] [ flex list-none items-center ]">
+            <ul class="[ flex list-none gap-0.5 m-0 p-0 ]">
                 <li>
                     <span class="visually-hidden">RSS</span>
                     <a href="#" target="_blank">{% include "svgs/rss.svg" %}</a>