Update ingredients and steps so that they can be removed

src/lib/global.css

@@ -113,26 +113,8 @@ body{
     margin-bottom: 0.5rem;
 }
 
-.standardForm button{
-    border: none;
-    outline: none;
-    cursor: pointer;
-    background: var(--color-primary);
-    color: var(--color-text-on-primary);
-    border-radius: 6px;
-    padding: 0.6rem 1.2rem;
-    font-weight: 600;
-    font-size: 1rem;
-    line-height: 1.2;
-    transition: background 0.15s ease, transform 0.05s ease;
-}
-
-.standardForm button:hover{
-    background: var(--color-primary-hover);
-}
-
-.standardForm button:active{
-    transform: translateY(1px);
+.standardForm .button{
+    margin: 0;
 }
 
 .standardForm .error{

src/routes/login/+page.svelte

@@ -20,7 +20,7 @@
             <input name="password" type="password" required>
         </label>
 
-        <button>Submit</button>
+        <button class="button">Submit</button>
     </form>
 </div>
 

src/routes/recipe/EditableRecipe.svelte

@@ -88,8 +88,11 @@
         <h2>Ingredients</h2>
 
         <ul>
-            {#each ingredients as i}
-                <li>{i.name}, {i.quantity} {i.unit}</li>
+            {#each ingredients as i, idx}
+                <li><button
+                    onclick={()=>ingredients.splice(idx, 1)}
+                    type="button"
+                >{i.name}, {i.quantity} {i.unit}</button></li>
             {/each}
         </ul>
 
@@ -112,8 +115,11 @@
         <h2>Steps</h2>
 
         <ol>
-            {#each steps as s}
-                <li>{s}</li>
+            {#each steps as s, idx}
+                <li><button
+                    onclick={()=>{steps.splice(idx, 1)}}
+                    type="button"
+                >{s}</button></li>
             {/each}
         </ol>
 
@@ -148,7 +154,7 @@
         </div>
     </fieldset>
 
-    <button>
+    <button class="button">
         {#if route === "/recipe/new"}
             Create Recipe
         {:else}
@@ -231,6 +237,37 @@
         max-width: 100%;
     }
 
+    ul li{
+        padding: 0;
+    }
+
+    li button{
+        display: block;
+        width: 100%;
+        margin: 0;
+        padding: 0.55rem 0.7rem;
+        border: none;
+        outline: none;
+        background: none;
+        color: inherit;
+        font: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        text-align: left;
+        cursor: pointer;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
+
+    ol li button{
+        padding: 0;
+    }
+
+    ul li:hover,
+    ol li:hover{
+        border-color: var(--color-primary);
+    }
+
     ol{
         counter-reset: step;
     }
@@ -456,7 +493,6 @@
 
     @media (pointer: coarse){
         .button,
-        .standardForm button,
         .visibilityOptions span{
             min-height: 44px;
         }

src/routes/recipe/[recipeId]/+page.svelte

@@ -32,6 +32,8 @@
     <div class="buttonBox">
         <a class="button" href="/recipe/{data.recipe.id}/edit">Edit</a>
         <button>Printable PDF</button>
+        <button>Delete</button>
+        <button>Link</button>
     </div>
 </div>
 

src/routes/register/+page.svelte

@@ -35,7 +35,7 @@
             <input name="confirmPassword" type="password" required>
         </label>
 
-        <button>Submit</button>
+        <button class="button">Submit</button>
     </form>
 </div>