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

1 files changed, 40 insertions, 2 deletions

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;
 	}
 }