diary

cms.js

@@ -37,30 +37,30 @@ function addDiary(diary) {
 	let card = document.createElement("div");
 	card.classList.add("diary");
 
-	let info = document.createElement("div");
-	info.classList.add("info");
-	card.appendChild(info);
-
-	let date = document.createElement("div");
-	date.classList.add("date");
-	date.innerHTML = diary.date;
-	info.appendChild(date);
-
-	let chef = document.createElement("div");
-	chef.classList.add("chef");
-	chef.innerHTML = diary.chef;
-	info.appendChild(chef);
-
 	let title = document.createElement("h2");
 	title.classList.add("title");
 	title.innerHTML = diary.title;
 	card.appendChild(title);
 
+	// let info = document.createElement("div");
+	// info.classList.add("info");
+	// card.appendChild(info);
+
+	let date = document.createElement("div");
+	date.classList.add("date");
+	date.innerHTML = diary.date;
+	card.appendChild(date);
+
 	let text = document.createElement("div");
 	text.classList.add("text");
 	text.innerHTML = diary.text;
 	card.appendChild(text);
 
+	let chef = document.createElement("span");
+	chef.classList.add("chef");
+	chef.innerHTML = diary.chef;
+	text.appendChild(chef);
+
 	cookbook.appendChild(card);
 }
 

cms.json

@@ -199,6 +199,80 @@
             "title": "diario",
             "chef": "grr",
             "text": "oggi sto imparando a fare il diario con pitone"
+        },
+        {
+            "type": "recipe",
+            "title": "burzum soup",
+            "description": "juicy metal",
+            "chef": "666",
+            "ingredients": [
+                "hell's flames",
+                "black citrus",
+                "\ud83d\udc79",
+                "\u2620",
+                "salt",
+                "jalape\u00f1o peppers",
+                "\ud83c\udf36",
+                "minotaur horns"
+            ],
+            "instructions": [
+                "travel with Charon to hell",
+                "collect some fresh flames and \ud83d\udc80 sprouts",
+                "go back home",
+                "draw a pentacle with salt",
+                "evoke \ud83d\udc79 with your guitar",
+                "chop the jalape\u00f1os and \ud83c\udf36x9",
+                "throw them into the minotaur horns together with flames and skullsprouts",
+                "enjoy your meal with satan"
+            ]
+        },
+        {
+            "type": "diary",
+            "date": "October the 20th, 2021",
+            "title": "how to add a diary page",
+            "chef": "grr",
+            "text": "helo, if you want to add a diary page just follow the same steps for teh recipes but open the \"add_diary.ipynb\" instead. ciao ciao have fun!"
+        },
+        {
+            "title": "Paris Soup",
+            "description": "A soup you usually sip in Pariss",
+            "chef": "Piziano Tastor",
+            "ingredients": [
+                "Paris",
+                "Mushrooms",
+                "Water",
+                "Salt",
+                "Fire"
+            ],
+            "instructions": [
+                "Go to Paris with a pot full on fire",
+                "Search for some mushrooms",
+                "When you find them pour on them some water",
+                "Paris delenda est",
+                "Add salt on what's left",
+                "Return to Rome"
+            ]
+        },
+        {
+            "type": "recipe",
+            "title": "Paris Soup",
+            "description": "A soup you usually sip in Pariss",
+            "chef": "Piziano Tastor",
+            "ingredients": [
+                "Paris",
+                "Mushrooms",
+                "Water",
+                "Salt",
+                "Fire"
+            ],
+            "instructions": [
+                "Go to Paris with a pot full on fire",
+                "Search for some mushrooms",
+                "When you find them pour on them some water",
+                "Paris delenda est",
+                "Add salt on what's left",
+                "Return to Rome"
+            ]
         }
     ]
 }

font/font.css

@@ -0,0 +1,11 @@
+@font-face {
+	font-family: "Ortica";
+	font-weight: bold;
+	src: url("./Ortica-Bold.woff2") format("woff2"), url("./Ortica-Bold.woff") format("woff");
+}
+
+@font-face {
+	font-family: "Ortica";
+	font-weight: normal;
+	src: url("./Ortica-Light.woff2") format("woff2"), url("./Ortica-Light.woff") format("woff");
+}

style.css

@@ -1,7 +1,10 @@
+@import url("./font/font.css");
+
 body {
 	margin: 0;
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 1.25rem;
+	line-height: 1.4;
 }
 
 .intro {
@@ -100,7 +103,8 @@ button.tag {
 }
 
 .recipe,
-.recipe-info , .diary{
+.recipe-info,
+.diary {
 	display: none;
 	background-color: #ffffff;
 	flex-grow: 1;
@@ -112,25 +116,6 @@ button.tag {
 .recipe.active {
 	display: inline-block;
 }
-.diary{
-	display: inline-block;
-	background-color: rgb(233, 224, 248);
-	color: #2d2c5f;
-}
-.diary .info{
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: baseline;
-	color: rgb(104, 104, 104);
-	font-size: 0.8em;
-}
-.diary .title{
-	font-size: 1em;
-}
-.diary .text{
-	margin: 1ch 0 1ch 0;
-}
 
 .recipe-info {
 	display: block;
@@ -180,13 +165,47 @@ button.tag {
 
 .done {
 	text-decoration: line-through;
-	opacity: 0.75;
+	opacity: 0.6;
 }
 
 #ingredients-container {
 	margin: 24px 0;
 }
 
+/* DIARY */
+
+.diary {
+	margin: 16px 0;
+	font-family: "Ortica";
+	display: inline-block;
+	background-color: transparent;
+	border-left: 2px dotted currentColor;
+	border-radius: 0;
+	align-self: flex-start;
+}
+.diary .info {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+
+.diary .title {
+	margin-bottom: 8px;
+}
+
+.diary .text {
+	margin-top: 1.4em;
+}
+
+.diary .chef {
+	display: inline-block;
+	margin-left: 1ch;
+}
+
+.diary .chef::before {
+	content: "💬 ";
+}
+
 @media (max-width: 991.98px) {
 	.intro {
 		margin: 16px;