From 00b49aa15b8a381b0688a44bd67db5969e049ff7 Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Mon, 21 Apr 2025 14:29:18 +0200
Subject: [PATCH] Squashed commit of the following:

commit 9b8fcecae7a2cb28a6e3061369c1a39e8e74791e
Author: TheThomaas <thethomaas@protonmail.ch>
Date:   Mon Apr 21 14:28:24 2025 +0200

    Add checkboxes to the ingredients list
---
 src/_includes/layouts/recipe.njk | 4 ++--
 src/scss/components/_recipe.scss | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/_includes/layouts/recipe.njk b/src/_includes/layouts/recipe.njk
index 6e68d21..6fb03d5 100644
--- a/src/_includes/layouts/recipe.njk
+++ b/src/_includes/layouts/recipe.njk
@@ -40,7 +40,7 @@
                     <template x-if="currentServings">
                         <ul class="c-recipe__ingredients-list">
                             <template x-for="(ingredient, index) in ingredients" :key="index">
-                                <li x-text="adaptQuantity(ingredient, {{servings}}, currentServings)"></li>
+                                <li><label><input type="checkbox"><span x-text="adaptQuantity(ingredient, {{servings}}, currentServings)"></span></label></li>
                             </template>
                         </ul>
                     </template>
@@ -48,7 +48,7 @@
                     <template x-if="!currentServings">
                         <ul class="c-recipe__ingredients-list">
                             {% for ingredient in ingredients %}
-                                <li>{{ ingredient }}</li>
+                                <li><label><input type="checkbox"><span>{{ ingredient }}</span></label></li>
                             {% endfor %}
                         </ul>
                     </template>
diff --git a/src/scss/components/_recipe.scss b/src/scss/components/_recipe.scss
index 3a24c3c..3add6ef 100644
--- a/src/scss/components/_recipe.scss
+++ b/src/scss/components/_recipe.scss
@@ -14,11 +14,11 @@
 .c-recipe__ingredients-list {
     li {
         margin-bottom: 12px;
+    }
     
-        &::before {
-            content: "-";
-            margin-right: 6px;
-        }
+    input[type="checkbox"] {
+        margin: 0;
+        margin-inline-end: 6px;
     }
 }