updated css. Recipes page is now responsive. temporary duplicate recipe links on recipes page to test css. They will be replaced soon.

3 files changed, 59 insertions, 12 deletions

diff --git a/content/main-pages/recipes.md b/content/main-pages/recipes.md
index c31044f..bb6bcad 100644
--- a/content/main-pages/recipes.md
+++ b/content/main-pages/recipes.md
@@ -13,16 +13,22 @@
 	var links = [];
 
 	//recipe names
-	names[0] = "<p>Vegan Banana Loaf / Muffins</p>";
-	names[1] = "<p>Vegan Maple Bread</p>";
+	names[0] = "<p>Banana Loaf / Muffins</p>";
+	names[1] = "<p>Maple Bread</p>";
+	names[2] = "<p>Maple Bread</p>";
+	names[3] = "<p>Maple Bread</p>";
 
 	//recipe image links
 	images[0] = '<img src="../images/recipe-images/banana-muffin.JPG">';
 	images[1] = '<img src="../images/recipe-images/bread-3.JPG">';
+	images[2] = '<img src="../images/recipe-images/bread-3.JPG">';
+	images[3] = '<img src="../images/recipe-images/bread-3.JPG">';
 
 	//recipe hrefs
 	links[0] = '<a href="banana-muffins.md.html"</a>';
 	links[1] = '<a href="maple-bread.md.html"</a>';
+	links[2] = '<a href="maple-bread.md.html"</a>';
+	links[3] = '<a href="maple-bread.md.html"</a>';
 
 	//show arrays in console
 	console.log(names, images, links);
diff --git a/output/recipes.html b/output/recipes.html
index 90f57f3..d6ba0a6 100644
--- a/output/recipes.html
+++ b/output/recipes.html
@@ -33,16 +33,22 @@
 	var links = [];
 
 	//recipe names
-	names[0] = "<p>Vegan Banana Loaf / Muffins</p>";
-	names[1] = "<p>Vegan Maple Bread</p>";
+	names[0] = "<p>Banana Loaf / Muffins</p>";
+	names[1] = "<p>Maple Bread</p>";
+	names[2] = "<p>Maple Bread</p>";
+	names[3] = "<p>Maple Bread</p>";
 
 	//recipe image links
 	images[0] = '<img src="../images/recipe-images/banana-muffin.JPG">';
 	images[1] = '<img src="../images/recipe-images/bread-3.JPG">';
+	images[2] = '<img src="../images/recipe-images/bread-3.JPG">';
+	images[3] = '<img src="../images/recipe-images/bread-3.JPG">';
 
 	//recipe hrefs
 	links[0] = '<a href="banana-muffins.md.html"</a>';
 	links[1] = '<a href="maple-bread.md.html"</a>';
+	links[2] = '<a href="maple-bread.md.html"</a>';
+	links[3] = '<a href="maple-bread.md.html"</a>';
 
 	//show arrays in console
 	console.log(names, images, links);
diff --git a/style/style.css b/style/style.css
index 76e3ed2..942ecb1 100644
--- a/style/style.css
+++ b/style/style.css
@@ -51,6 +51,11 @@ nav a:hover {
 	border-radius: 20px;
 }
 
+.footnotes {
+	font-weight: normal;
+
+}
+
 
 footer {
 	padding-top: 20px;
@@ -247,15 +252,12 @@ ol li::before {
 }
 
 #recipe {
-	display: flex;
 	text-align: center;
 	justify-content: space-around;
 	padding-bottom: 20px;
 }
 
 #recipe-search {
-	display: flex;
-	justify-content: space-between;
 	padding: 20px;
 }
 
@@ -269,15 +271,17 @@ ol li::before {
 }
 
 .boxes {
+	display: inline-block;
 	padding: 4px;
 	text-align: center;
-	width: 33%;
+	width: 85%;
 	background-color: #F1F1F1;
 	color: #758B7A;
 	border-radius: 20px;
 	transition-duration: 0.5s;
-	font-size: 24px;
+	font-size: 18px;
 	font-weight: bold;
+	margin: 10px;
 }
 
 .boxes:hover {
@@ -287,11 +291,11 @@ ol li::before {
 #searchInput {
 	border-radius: 20px;
 	border: none;
-	height: 40px;
-	width: 200px;
+	height: 25px;
+	width: 150px;
 	font-weight: bold;
 	color: #758B7A;
-	font-size: 1.25rem;
+	font-size: 1rem;
 }
 
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
@@ -337,6 +341,11 @@ ol li::before {
 		height: 15px;
 		width: 15px;
 	}
+
+	#recipe-search {
+		display: flex;
+		justify-content: space-between;
+	}
 }
 
 @media only screen and (min-width: 500px) {
@@ -388,6 +397,12 @@ ol li::before {
 		font-size: 18px;
 	}
 
+	#searchInput {
+		height: 30px;
+		width: 175px;
+		font-size: 1.1rem;
+	}
+
 }
 
 @media only screen and (min-width: 800px) {
@@ -426,6 +441,16 @@ ol li::before {
 		padding: 20px;
 	}
 
+	.boxes {
+		width: 30%;
+		font-size: 20px;
+	}
+
+	#searchInput {
+		height: 40px;
+		width: 200px;
+		font-size: 1.25rem;
+	}
 }
 
 
@@ -515,6 +540,16 @@ ol li::before {
 		height: 48%;
 		padding-bottom: 10px;
 	}
+
+	.boxes {
+		font-size: 24px;
+	}
+
+	#searchInput {
+		height: 40px;
+		width: 250px;
+		font-size: 1.25rem;
+	}
 }
 
 @media only screen and (min-width: 1500px) {