css and format improvements. New template for building what will be the recipe pages

8 files changed, 102 insertions, 38 deletions

diff --git a/build_blog.rb b/build_blog.rb
index 1ff5ea9..d0cc293 100644
--- a/build_blog.rb
+++ b/build_blog.rb
@@ -15,5 +15,5 @@ def content
   return output
 end
 
-template = ERB.new(File.read('template.html.erb'))
+template = ERB.new(File.read('recipe-template.html.erb'))
 puts template.result(binding)
diff --git a/content/main-pages/about.md b/content/main-pages/about.md
index fd048f8..3d69070 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">
-		<img src="../images/placeholder/home3.jpg" class="image">
+		<p><img src="../images/placeholder/home3.jpg" class="image"></p>
 		<div class="text">
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
 				elit, sed do eiusmod tempor incididunt ut labore et 
diff --git a/content/posts/my-new-recipe.md b/content/posts/my-new-recipe.md
index 9c854aa..8a36716 100644
--- a/content/posts/my-new-recipe.md
+++ b/content/posts/my-new-recipe.md
@@ -1,10 +1,29 @@
-# Big Header Boi
+# Vegan Banana Loaf / Muffins {#recipe-title}
 
-This is a *bold* recipe
+<div markdown=1 class="image-and-text">
 
-List it out!
-- first thing
-- second thing
+<img src="../images/placeholder/home3.jpg" class="image">
 
-1. hello
-2. hello
+<div markdown=1 class="text">
+
+## Ingredients
+- 1/4 cup Oil (Coconut or other)
+- 1 cup Sugar
+- 3 or 4 bananas (depending on size: 3 large or 4 small) Approx: 1 cup
+- 1/2 cup white flour
+- 1 cup whole wheat flour
+- 1/4 tsp salt
+- 1 tsp baking soda
+- Vegan (Dairy Free) chocolate chips (optional)
+
+##Instructions
+1. Heat oven to 350 degrees. If using cast iron pan heat it in oven.
+2. Cream oil and sugar.
+3. Add mashed banana and baking soda.
+4. Add flour and salt and mix until combined (Do not over mix) 
+5. Add chocolate chips if desired.
+
+
+</div>
+
+</div>
\ No newline at end of file
diff --git a/content/posts/my-newer-recipe.md b/content/posts/my-newer-recipe.md
index 28d583e..b28b04f 100644
--- a/content/posts/my-newer-recipe.md
+++ b/content/posts/my-newer-recipe.md
@@ -1,3 +1,3 @@
-### Sick
 
-![apple](https://i5.walmartimages.ca/images/Large/094/514/6000200094514.jpg "apple")
+
+
diff --git a/output/about.html b/output/about.html
index 6dc92f2..d885bcf 100644
--- a/output/about.html
+++ b/output/about.html
@@ -18,7 +18,7 @@
     <div class="content">
 	<h1>About</h1>
 	<div class="image-and-text">
-		<img src="../images/placeholder/home3.jpg" class="image" />
+		<p><img src="../images/placeholder/home3.jpg" class="image" /></p>
 		<div class="text">
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
 				elit, sed do eiusmod tempor incididunt ut labore et 
diff --git a/output/recipes.html b/output/recipes.html
index b3551f6..9de7b1a 100644
--- a/output/recipes.html
+++ b/output/recipes.html
@@ -15,22 +15,42 @@
 	</nav>
 </header>
 
-    <h1 id="big-header-boi">Big Header Boi</h1>
+    <div class="content">
+      <h1 id="recipe-title">Vegan Banana Loaf / Muffins</h1>
 
-<p>This is a <em>bold</em> recipe</p>
+<div class="image-and-text">
 
-<p>List it out!
-- first thing
-- second thing</p>
+  <p><img src="../images/placeholder/home3.jpg" class="image" /></p>
 
-<ol>
-  <li>hello</li>
-  <li>hello</li>
-</ol>
-<h3 id="sick">Sick</h3>
+  <div class="text">
 
-<p><img src="https://i5.walmartimages.ca/images/Large/094/514/6000200094514.jpg" alt="apple" title="apple" /></p>
+    <h2 id="ingredients">Ingredients</h2>
+    <ul>
+      <li>1/4 cup Oil (Coconut or other)</li>
+      <li>1 cup Sugar</li>
+      <li>3 or 4 bananas (depending on size: 3 large or 4 small) Approx: 1 cup</li>
+      <li>1/2 cup white flour</li>
+      <li>1 cup whole wheat flour</li>
+      <li>1/4 tsp salt</li>
+      <li>1 tsp baking soda</li>
+      <li>Vegan (Dairy Free) chocolate chips (optional)</li>
+    </ul>
 
+    <h2 id="instructions">Instructions</h2>
+    <ol>
+      <li>Heat oven to 350 degrees. If using cast iron pan heat it in oven.</li>
+      <li>Cream oil and sugar.</li>
+      <li>Add mashed banana and baking soda.</li>
+      <li>Add flour and salt and mix until combined (Do not over mix)</li>
+      <li>Add chocolate chips if desired.</li>
+    </ol>
+
+  </div>
+
+</div>
+
+
+    </div>
     <footer>
 		<a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="../images/mail.svg" class="mail-2"></a>
 		<p>© 2021 Pantry of Plants</p>
diff --git a/recipe-template.html.erb b/recipe-template.html.erb
new file mode 100644
index 0000000..55d0c7c
--- /dev/null
+++ b/recipe-template.html.erb
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <title>Pantry of Plants</title>
+    <link rel="stylesheet" href="../style/style.css">
+    <script src="../scripts/image-slide.js" defer></script>
+  </head>
+  <body>
+    <%= render "header.html.erb" %>
+    <div class="content">
+      <%= content %>
+    </div>
+    <%= render "footer.html.erb" %>
+  </body>
+</html>
diff --git a/style/style.css b/style/style.css
index 9c94afd..fd5a769 100644
--- a/style/style.css
+++ b/style/style.css
@@ -45,7 +45,7 @@ nav a:hover {
 	width: 300px;
 }
 
-.content {
+.content, .recipe-content {
 	background-color: #B8C5BB;
 	color: #F1F1F1;
 	border-radius: 20px;
@@ -164,7 +164,7 @@ footer p {
 
 /* styling for home page */
 /* -------------------------------------------------------------------------- */
-#active {
+.active {
 	color: #B8C5BB;
 }
 
@@ -192,10 +192,20 @@ h1 {
 }
 
 .image-and-text {
+	margin-top: -30px;
 	padding: 10px;
-	align-items: center;
 }
 
+.recipe-content {
+	padding: 10px;
+}
+
+#recipe-image {
+	width: 100%;
+	text-align: center;
+}
+
+
 @media only screen and (min-width: 355px) {
 	.logo {
 		width: 330px;
@@ -303,21 +313,23 @@ h1 {
 	}
 
 	.text {
-		width: 50%;
+		width: 100%;
 		padding: 6px;
 	}
 
 	.image {
-		width: 50%;
 		padding-bottom: 10px;
-		padding-right: 20px;
 	}
 
 	.image-and-text {
-		margin-top: -20px;
-		display: flex;
+		margin-top: -50px;
+		padding: 20px;
+	}
+
+	.recipe-content {
 		padding: 20px;
 	}
+
 }
 
 
@@ -381,10 +393,15 @@ h1 {
 	}
 
 	.image-and-text {
-		padding: 40px;
 		display: flex;
+		padding: 40px;
+	}
+
+	.recipe-content {
+		padding: 40px;
 	}
 
+
 	h1 {
 		font-size: 48px;
 		padding-top: 40px;
@@ -399,12 +416,6 @@ h1 {
 		padding-bottom: 10px;
 		padding-right: 40px;
 	}
-
-	.image-and-text {
-		margin-top: -20px;
-		display: flex;
-		padding: 40px;
-	}
 }
 
 @media only screen and (min-width: 1500px) {