added bread image, completed bread test recipe, css fixes, md fixes so images display normally

9 files changed, 71 insertions, 21 deletions

diff --git a/content/main-pages/about.md b/content/main-pages/about.md
index 3d69070..fd048f8 100644
--- a/content/main-pages/about.md
+++ b/content/main-pages/about.md
@@ -1,7 +1,7 @@
 <div class="content">
 	<h1>About</h1>
 	<div class="image-and-text">
-		<p><img src="../images/placeholder/home3.jpg" class="image"></p>
+		<img src="../images/placeholder/home3.jpg" class="image">
 		<div class="text">
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
 				elit, sed do eiusmod tempor incididunt ut labore et 
diff --git a/content/main-pages/index.md b/content/main-pages/index.md
index 4387bec..1b6d0a0 100644
--- a/content/main-pages/index.md
+++ b/content/main-pages/index.md
@@ -3,7 +3,7 @@
 	<div class="slideshow-container">
 		<!-- Full-width images with rounded edges -->
 		<div class="slides">
-			<img src="../images/placeholder/home1.jpg" style="width:100%; border-radius:20px;">
+			<img src="../images/recipe-images/bread-3.JPG" style="width:100%; border-radius:20px;">
 		</div>
 		<div class="slides">
 			<img src="../images/placeholder/home2.jpg" style="width:100%; border-radius:20px;">
diff --git a/content/posts/banana-muffins-loaf.md b/content/posts/banana-muffins-loaf.md
index 1b1f35a..e09b03a 100644
--- a/content/posts/banana-muffins-loaf.md
+++ b/content/posts/banana-muffins-loaf.md
@@ -2,7 +2,9 @@
 
 <div markdown=1 class="image-and-text">
 
+{::nomarkdown} 
 <img src="../images/placeholder/home3.jpg" class="image">
+{:/}
 
 <div markdown=1 class="text">
 
diff --git a/content/posts/yeasted-bread-loaf.md b/content/posts/yeasted-bread-loaf.md
index 6d21dec..82833ba 100644
--- a/content/posts/yeasted-bread-loaf.md
+++ b/content/posts/yeasted-bread-loaf.md
@@ -1,13 +1,18 @@
-# Yeasted Whole Wheat Bread {#recipe-title}
+# Quick Vegan Yeasted Whole Wheat Bread {#recipe-title}
 
 <div markdown=1 class="image-and-text">
 
-<img src="../images/placeholder/home2.jpg" class="image">
+{::nomarkdown} 
+<img src="../images/recipe-images/bread-3.jpg" class="image">
+{:/}
 
 <div markdown=1 class="text">
 
+##Description
+This recipe is for a single loaf of whole wheat bread. This recipe is quick and easy! We will use the oven to do our dough rise which will save both time and effort.
+
 ## Ingredients (1 loaf)
-- 1/2 Tablespoon Active Dry Yeast
+- 1/2 Tablespoon Active Dry Yeast or Traditional Yeast
 - 1/3 cup Maple Syrup or Sugar (any form of sugar will work)
 - 1 and 1/2 Cups or 425ml Warm Water
 - 50ml (approx 1/6 cup) of Olive Oil
@@ -17,15 +22,16 @@
 - Extra Olive Oil and Salt to spread on top of bread
 
 ##Instructions
-1. Heat oven to 200 degrees fahrenheit. Warm cast iron loaf pan or non stick loaf pan in oven. Add Olive oil and cornmeal to the bottom of the pan.
+1. Heat oven to 200 degrees fahrenheit. Warm a standard sized loaf pan (approx 8-1/2 x 4-1/2 x 2-1/2 inches – cast iron or non stick) in oven. Add Olive oil and cornmeal to the bottom of the pan.
 2. Add yeast and sweetener of choice (sugar or maple syrup) to mixing bowl. Poor in warm water and give the mixture a few stirs. Let the yeast proof for about 5 minutes. (It should look foamy when it's done).
 3. Add the Olive Oil to the wet mixture.
 4. Add the flour and salt to a large mixing bowl or stand mixer if you have one. 
 5. Add the wet ingredients to the dry.
-6. If using a stand mixer, knead the dough for about 10 minutes. If you are kneading by hand it should take around 100 to 200 turns.
+6. If using a stand mixer, knead the dough for about 5 minutes. If you are kneading by hand it should take around 100 to 200 turns.
 7. Place a little oil on your hands and shape dough into a loaf. Add 3 diagonal score marks to the top of the loaf. Cover load with Olive Oil and salt and place the pan in the warm oven to rise. After 20 minutes it should be doubled in size.
-8. After the 20 minutes, turn oven to 350 degrees fahrenheit. Leave bread in oven and set your timer for 30 minutes.
-9. Once the bread is golden brown it is done. Remove the loaf from the oven, brush top with Olive Oil, remove from pan, and cool on cooling rack.
+8. After the 20 minutes, turn oven to 350 degrees fahrenheit. Leave bread in oven and set your timer for 35 minutes.
+9. Once the bread is golden brown it is done. Remove the loaf from the oven, brush top with Olive Oil, remove from pan and cool on a cooling rack.
+10. Enjoy :)
 
 </div>
 
diff --git a/images/recipe-images/bread-3.JPG b/images/recipe-images/bread-3.JPG
new file mode 100755
index 0000000..7eea2f7
--- /dev/null
+++ b/images/recipe-images/bread-3.JPG
diff --git a/output/about.html b/output/about.html
index d885bcf..6dc92f2 100644
--- a/output/about.html
+++ b/output/about.html
@@ -18,7 +18,7 @@
     <div class="content">
 	<h1>About</h1>
 	<div class="image-and-text">
-		<p><img src="../images/placeholder/home3.jpg" class="image" /></p>
+		<img src="../images/placeholder/home3.jpg" class="image" />
 		<div class="text">
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
 				elit, sed do eiusmod tempor incididunt ut labore et 
diff --git a/output/index.html b/output/index.html
index be03e24..9b0d41a 100644
--- a/output/index.html
+++ b/output/index.html
@@ -20,7 +20,7 @@
 	<div class="slideshow-container">
 		<!-- Full-width images with rounded edges -->
 		<div class="slides">
-			<img src="../images/placeholder/home1.jpg" style="width:100%; border-radius:20px;" />
+			<img src="../images/recipe-images/bread-3.JPG" style="width:100%; border-radius:20px;" />
 		</div>
 		<div class="slides">
 			<img src="../images/placeholder/home2.jpg" style="width:100%; border-radius:20px;" />
diff --git a/output/recipes.html b/output/recipes.html
index 3386eb2..0d30457 100644
--- a/output/recipes.html
+++ b/output/recipes.html
@@ -20,7 +20,7 @@
 
 <div class="image-and-text">
 
-  <p><img src="../images/placeholder/home3.jpg" class="image" /></p>
+<img src="../images/placeholder/home3.jpg" class="image">
 
   <div class="text">
 
@@ -48,17 +48,20 @@
   </div>
 
 </div>
-<h1 id="recipe-title">Yeasted Whole Wheat Bread</h1>
+<h1 id="recipe-title">Quick Vegan Yeasted Whole Wheat Bread</h1>
 
 <div class="image-and-text">
 
-  <p><img src="../images/placeholder/home2.jpg" class="image" /></p>
+<img src="../images/recipe-images/bread-3.jpg" class="image">
 
   <div class="text">
 
+    <h2 id="description">Description</h2>
+    <p>This recipe is for a single loaf of whole wheat bread. This recipe is quick and easy! We will use the oven to do our dough rise which will save both time and effort.</p>
+
     <h2 id="ingredients-1-loaf">Ingredients (1 loaf)</h2>
     <ul>
-      <li>1/2 Tablespoon Active Dry Yeast</li>
+      <li>1/2 Tablespoon Active Dry Yeast or Traditional Yeast</li>
       <li>1/3 cup Maple Syrup or Sugar (any form of sugar will work)</li>
       <li>1 and 1/2 Cups or 425ml Warm Water</li>
       <li>50ml (approx 1/6 cup) of Olive Oil</li>
@@ -70,15 +73,16 @@
 
     <h2 id="instructions">Instructions</h2>
     <ol>
-      <li>Heat oven to 200 degrees fahrenheit. Warm cast iron loaf pan or non stick loaf pan in oven. Add Olive oil and cornmeal to the bottom of the pan.</li>
+      <li>Heat oven to 200 degrees fahrenheit. Warm a standard sized loaf pan (approx 8-1/2 x 4-1/2 x 2-1/2 inches – cast iron or non stick) in oven. Add Olive oil and cornmeal to the bottom of the pan.</li>
       <li>Add yeast and sweetener of choice (sugar or maple syrup) to mixing bowl. Poor in warm water and give the mixture a few stirs. Let the yeast proof for about 5 minutes. (It should look foamy when it’s done).</li>
       <li>Add the Olive Oil to the wet mixture.</li>
       <li>Add the flour and salt to a large mixing bowl or stand mixer if you have one.</li>
       <li>Add the wet ingredients to the dry.</li>
-      <li>If using a stand mixer, knead the dough for about 10 minutes. If you are kneading by hand it should take around 100 to 200 turns.</li>
+      <li>If using a stand mixer, knead the dough for about 5 minutes. If you are kneading by hand it should take around 100 to 200 turns.</li>
       <li>Place a little oil on your hands and shape dough into a loaf. Add 3 diagonal score marks to the top of the loaf. Cover load with Olive Oil and salt and place the pan in the warm oven to rise. After 20 minutes it should be doubled in size.</li>
-      <li>After the 20 minutes, turn oven to 350 degrees fahrenheit. Leave bread in oven and set your timer for 30 minutes.</li>
-      <li>Once the bread is golden brown it is done. Remove the loaf from the oven, brush top with Olive Oil, remove from pan, and cool on cooling rack.</li>
+      <li>After the 20 minutes, turn oven to 350 degrees fahrenheit. Leave bread in oven and set your timer for 35 minutes.</li>
+      <li>Once the bread is golden brown it is done. Remove the loaf from the oven, brush top with Olive Oil, remove from pan and cool on a cooling rack.</li>
+      <li>Enjoy :)</li>
     </ol>
 
   </div>
diff --git a/style/style.css b/style/style.css
index a656ec2..658778b 100644
--- a/style/style.css
+++ b/style/style.css
@@ -181,7 +181,8 @@ footer p {
 .image {
 	border-radius: 20px;
 	width: 100%;
-	padding-bottom: 10px;
+	margin-bottom: 10px;
+	margin-top: 10px;
 }
 
 h1 {
@@ -191,6 +192,10 @@ h1 {
 	padding-left: 10px;
 }
 
+h2 {
+	color: #758B7A;
+}
+
 .image-and-text {
 	margin-top: -30px;
 	padding: 10px;
@@ -210,6 +215,36 @@ li {
 	padding-bottom: 20px;
 }
 
+ul, ol {
+  list-style: none; /* Remove default bullets */
+}
+
+ol {
+	counter-reset: li;
+}
+
+ul li::before {
+  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+  color: #758B7A; /* Change the color */
+  font-weight: bold; /* If you want it to be bold */
+  display: inline-block; /* Needed to add space between the bullet and the text */
+  width: 1em; /* Also needed for space (tweak if needed) */
+  margin-left: -1em; /* Also needed for space (tweak if needed) */
+}
+
+ol li::before {
+	content: counter(li);
+	counter-increment: li;
+	color: #758B7A; /* Change the color */
+	font-weight: bold; /* If you want it to be bold */
+	display: inline-block; /* Needed to add space between the bullet and the text */
+	width: 1em; /* Also needed for space (tweak if needed) */
+	margin-left: -1.5em; /* Also needed for space (tweak if needed) */
+	/* This css makes the formatting still work with double digit numbers, ie 10 */
+	margin-right: 0.5em;
+	text-align: right;
+	direction: rtl;
+}
 
 @media only screen and (min-width: 355px) {
 	.logo {
@@ -400,6 +435,7 @@ li {
 	.image-and-text {
 		display: flex;
 		padding: 40px;
+		justify-content: space-around;
 	}
 
 	.recipe-content {
@@ -415,11 +451,13 @@ li {
 
 	.text {
 		padding: 10px;
+		width: 48%;
 	}
 
 	.image {
+		width: 48%;
+		height: 48%;
 		padding-bottom: 10px;
-		padding-right: 40px;
 	}
 }