Design tweaks

src/_includes/layouts/home.njk

@@ -23,7 +23,7 @@ bodyClass: c-home
     {% if collections["Favourite ⭐"] %}
         <section class="u-bgc-grey-100">
             <div class="l-container">
-                <h2>{{ favouriteRecipes }}</h2>
+                <h2 class="u-mb-large">{{ favouriteRecipes }}</h2>
                 <div class="c-card__wrapper">
                     {% set favouriteRecipes = collections["Favourite ⭐"] | limit(4) %}
                     {% for recipe in favouriteRecipes %}

src/_includes/layouts/recipe.njk

@@ -54,7 +54,7 @@
                     </template>
                 </div>
 
-                <div class="c-recipe__instructions-wrapper">
+                <div class="c-recipe__instructions-wrapper u-free-text">
                     {% if sourceLabel and sourceURL %}
                         <p>Source : <a href="{{ sourceURL }}">{{ sourceLabel }}</a></p>
                     {% endif %}

src/_includes/layouts/recipes-list.njk

@@ -6,7 +6,9 @@
             <div class="l-container">
                 <h1>{{ selectedTag }}{{ " " if selectedTag }}{{title}}</h1>
 
-                {% include 'components/taglist.njk' %}
+                {% if not selectedTag %}
+                    {% include 'components/taglist.njk' %}
+                {% endif %}
             </div>
         </section>
         <section class="u-bgc-grey-100">
@@ -38,5 +40,12 @@
                 </div>
             </div>
         </section>
+        {% if selectedTag %}
+            <section>
+                <div class="l-container">
+                    {% include 'components/taglist.njk' %}
+                </div>
+            </section>  
+        {% endif %}
     </main>
 {% endblock %}

src/about.md

@@ -1,7 +1,7 @@
 ---
 layout: layouts/base.njk
 title: About
-bodyClass: about
+bodyClass: u-free-text
 ---
 ![A picture of a black pug wearing a pilot jacket](/img/about.jpg)
 \

src/scss/_global.scss

@@ -40,21 +40,22 @@ section {
     }
 }
 
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
 h1 {
     text-align: center;
     font-size: clamp(3rem,calc(1rem + 3vw),4rem);
-    margin-bottom: 18px;
 }
 
 h2 {
     text-align: center;
     font-size: clamp(2rem,calc(1rem + 2vw),3.4rem);
-    margin-bottom: 42px;
 }
 
 h3 {
     font-size: clamp(1.6rem,calc(1rem + 1vw),2.6rem);
-    margin-bottom: 18px;
 }
 
 a {

src/scss/_utility.scss

@@ -33,3 +33,13 @@
 .u-highlight {
     background-color: rgba(250, 243, 145, 0.5);
 }
+
+.u-free-text {
+    p, h2, h3, h4, h5, h6 {
+        margin-bottom: 18px;
+    }
+}
+
+.u-mb-large {
+    margin-bottom: 30px;
+}

src/scss/components/_card.scss

@@ -81,5 +81,4 @@
 
 .c-card__title {
     font-size: 1.4rem;
-    margin: 0;
 }

src/scss/components/_recipe.scss

@@ -87,8 +87,4 @@
     @include mq(medium) {
         grid-area: instructions;
     }
-
-    p {
-        margin-bottom: 18px;
-    }
 }