feat: spacing polish

src/includes/css/compositions/cluster.css

@@ -6,10 +6,10 @@ spacing, regardless of their size
 */
 
 .cluster {
-  --gap: var(--spacing-2);
+  --gap: var(--spacing-4);
   display: flex;
   flex-wrap: wrap;
-  gap: var(--gap, --spacing-2);
+  gap: var(--gap, --spacing-4);
   justify-content: flex-start;
   align-items: center;
 }

src/includes/css/global/global-styles.css

@@ -52,14 +52,14 @@ h2 {
 
 h3 {
   font-size: 1.5rem;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-normal);
   letter-spacing: -0.05rem;
   line-height: 1.5rem;
 }
 
 h4 {
   font-size: 1.125rem;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-normal);
   letter-spacing: -0.05rem;
   line-height: 1.125rem;
   text-transform: uppercase;

src/includes/layouts/book.html

@@ -5,11 +5,13 @@ layout: "layouts/base"
 {% from "macros/date.njk" import format %}
 {% from "macros/utils.njk" import stars, spoilerWarning %}
 {% from "macros/tags.njk" import tagList %}
-<article class="flow flow-space-8">
+<article class="flow">
-    <header class="flow flow-space-4">
+    <header class="flow">
+        <div class="flow flow-space-1">
+            <h1>{{ title }}</h1>
+            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
+        </div>
         {{ format(page.date) }}
-        <h1>{{ title }}</h1>
-        {% if pullquote %}<p class="text-fadeText flow-space-1">{{ pullquote }}</p>{% endif %}
     </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}

src/includes/layouts/game.html

@@ -5,11 +5,13 @@ layout: "layouts/base"
 {% from "macros/date.njk" import format %}
 {% from "macros/utils.njk" import stars, spoilerWarning %}
 {% from "macros/tags.njk" import tagList %}
-<article class="flow flow-space-8">
+<article class="flow">
-    <header class="flow flow-space-4">
+    <header class="flow">
+        <div class="flow flow-space-1">
+            <h1>{{ title }}</h1>
+            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
+        </div>
         {{ format(page.date) }}
-        <h1>{{ title }}</h1>
-        {% if pullquote %}<p class="text-fadeText flow-space-1">{{ pullquote }}</p>{% endif %}
     </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}

src/includes/layouts/movie.html

@@ -5,11 +5,13 @@ layout: "layouts/base"
 {% from "macros/date.njk" import format %}
 {% from "macros/utils.njk" import stars, spoilerWarning %}
 {% from "macros/tags.njk" import tagList %}
-<article class="flow flow-space-8">
+<article class="flow">
-    <header class="flow flow-space-4">
+    <header class="flow">
+        <div class="flow flow-space-1">
+            <h1>{{ title }}</h1>
+            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
+        </div>
         {{ format(page.date) }}
-        <h1>{{ title }}</h1>
-        <p class="text-fadeText flow-space-1">{{ pullquote }}</p>
     </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}

src/includes/layouts/post.html

@@ -3,20 +3,17 @@ layout: "layouts/base"
 ---
 
 {% from "macros/date.njk" import format %}
+{% from "macros/tags.njk" import tagList %}
 <article class="flow">
-    <header class="flow flow-space-4 mb-2">
+    <header class="flow">
+        <div class="flow flow-space-1">
+            <h1>{{ title }}</h1>
+            <h3 class="text-fadeText">{{ excerpt }}</h3>
+        </div>
         {{ format(page.date) }}
-        <h1>{{ title }}</h1>
-        <p class="text-fadeText flow-space-1">{{ excerpt }}</p>
-        <ul class="categories cluster list-none p-0 flow-space-8 line-height-m">
-            {% for tag in tags | filter(["post"]) %}
-                <li>
-                    <a class="button" href="/tags/{{ tag | slugify }}">
-                        {% include "svgs/frame.svg" %}
-                    {{ tag }}</a>
-                </li>
-            {% endfor %}
-        </ul>
     </header>
-    {{ content | safe }}
+    <section class="flow flow-space-default">
+        {{ content | safe }}
+    </section>
+    {{ tagList(tags | filter("post") , "/posts") }}
 </article>

src/includes/layouts/show.html

@@ -5,11 +5,13 @@ layout: "layouts/base"
 {% from "macros/date.njk" import format %}
 {% from "macros/utils.njk" import stars, spoilerWarning %}
 {% from "macros/tags.njk" import tagList %}
-<article class="flow flow-space-8">
+<article class="flow">
-    <header class="flow flow-space-4">
+    <header class="flow">
+        <div class="flow flow-space-1">
+            <h1>{{ title }}</h1>
+            {% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
+        </div>
         {{ format(page.date) }}
-        <h1>{{ title }}</h1>
-        <p class="text-fadeText flow-space-1">{{ pullquote }}</p>
     </header>
     {% if hasSpoilers %}
         {{ spoilerWarning() }}

src/includes/macros/tags.njk

@@ -1,5 +1,5 @@
 {% macro tagList(tags, urlPrefix) %}
-<ul class="categories cluster list-none p-0 line-height-m">
+<ul class="categories cluster list-none p-0 line-height-m flow-space-default">
     {% for tag in tags %}
         <li>
             <a class="button" href="{{ urlPrefix }}/tag/{{ tag | slugify }}">

src/includes/macros/utils.njk

@@ -13,7 +13,7 @@
 {% endmacro %}
 
 {% macro spoilerWarning() %}
-    <section class="bg-surface radius-1 p-4">
+    <section class="bg-surface radius-1 p-4 flow-space-default">
         <span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
         <strong>Warning!</strong>
         The following may contain spoilers!