feat: add spacing util classes

src/_data/spacing.js

@@ -0,0 +1,15 @@
+const BASE_SPACING = 16;
+
+const spacing = {
+  0: 0,
+  0.25: BASE_SPACING / 4,
+  0.5: BASE_SPACING / 2,
+  1: BASE_SPACING,
+  1.5: BASE_SPACING * 1.5,
+  2: BASE_SPACING * 2,
+  3: BASE_SPACING * 3,
+  4: BASE_SPACING * 4,
+  5: BASE_SPACING * 5,
+};
+
+module.exports = spacing;

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>

src/_layouts/base.html

@@ -17,6 +17,7 @@
             {% include "css/fontFace.njk" %}
             {% include "css/fontVariables.njk" %}
             {% include "css/colorVariables.njk" %}
+            {% include "css/spacing.njk" %}
         {% endset %}
         <style>{{ css | minifyCss | safe }}</style>
     </head>

src/assets/css/blocks/site-footer.css

@@ -1,16 +1,5 @@
 .footer {
   background-color: var(--color-bg-soft);
-  margin-block-start: 1.5rem;
-  padding-block: 1.5rem;
-}
-
-.footer-links {
-  margin: 0;
-  padding: 0;
-}
-
-.footer-gap {
-  gap: 0.5rem;
 }
 
 .footer-grid {
@@ -21,16 +10,12 @@
   grid-column: 1 / -1;
 }
 
-.footer-pages .footer-links {
-  flex-direction: column;
-}
-
 @media (min-width: 32rem) {
   .footer-grid {
     grid-template-columns: 1fr 1fr;
   }
 
-  .footer-pages .footer-links {
+  .footer-pages ul {
     flex-direction: row;
     gap: 1rem;
     justify-content: flex-end;