Add delete button to recipe page

Author: cheesits456

page/functions/page-functions.js

@@ -142,7 +142,7 @@ function showRecipePage(recipePath) {
 	let mainHtml = `
 		<div class="container">
 			<div class="row">
-				<div class="col-md-8">
+				<div class="col-md-7">
 					<h1 id="recipe-title">${recipe.title}</h1>
 				</div>
 				<div id="rename-button" class="col-md-2">
@@ -151,6 +151,9 @@ function showRecipePage(recipePath) {
 				<div id="edit-button" class="col-md-2">
 					<div class="edit-button hover-pointer" onclick="editRecipe('${recipe.title.replace(/'/g, "\\'")}')">Edit</div>
 				</div>
+				<div id="delete-button" class="col-md-1">
+					<div class="edit-button delete-button bold hover-pointer" onclick="showDeleteDialog()">⊖</div>
+				</div>
 			</div><hr>
 			<div class="row">
 				<div class="col-md-4">

page/style.css

@@ -43,7 +43,7 @@ ul {
 }
 
 .bold {
-	font-weight: bold;
+	font-weight: bold !important;
 }
 
 main {
@@ -363,6 +363,18 @@ input:checked+.slider:before {
 	background-color: var(--secondary);
 }
 
+.delete-button {
+	background-color: #d81515;
+}
+
+.delete-button:hover {
+	background-color: red;
+}
+
+.delete-button:active {
+	background-color: #d81515;
+}
+
 .form {
 	border: 1px solid #ccc;
 	height: 100%;