added more images, restyled home page

1 files changed, 51 insertions, 11 deletions

diff --git a/static/style.css b/static/style.css
index 9824d4c..2b3aef9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,18 +13,42 @@ body {
 
 header {
     text-align: center;
-    color: white;
 }
 
 main {
     min-height: 100%;
 }
 
-#wrapper-center {
+.top-gap {
+    padding-top: 3%;
+}
+
+.bottom-gap {
+    padding-bottom: 3%;
+}
+
+.wrapper-space,
+.wrapper-centered,
+.flex-stack {
     display: flex;
+}
+
+.wrapper-space {
+    justify-content: space-between;
+}
+
+.wrapper-centered {
     justify-content: center;
 }
 
+.align-center {
+    align-items: center;
+}
+
+.flex-stack {
+    flex-direction: column; 
+}
+
 main, #headerwrapper {
     background-color: #fafafa;
     color: black;
@@ -36,6 +60,10 @@ main, #headerwrapper {
     padding-bottom: 2%;
 }
 
+.text-centered {
+    text-align: center;
+}
+
 nav ul {
     margin: 0;
     padding: 0;
@@ -53,31 +81,43 @@ nav a {
     color: white;
 }
 
-#lists {
+footer p {
+    display: block;
+    color: white;
+    margin: 7px;
+}
+
+.lists {
     margin-left: 2%;
     flex: 1;
 }
 
-#img-wrapper {
-    text-align: right;
+img {
+    max-width: 100%;
+}
+
+.img-wrapper {
     margin-right: 2%;
     margin-left: 2%;
-    flex: 1;
+    flex: 0.5;
 }
 
-img {
-    max-height: 400px;
-    max-width: 400px;
+.img-right {
+    text-align: right;
 }
 
-#recipe-list {
+.recipe-list {
     float: left;
     padding-left: 38%;
     list-style-type: none;
 
 }
 
-#recipe-item {
+.recipe-item {
     padding: 5px;
     font-size: 26px;
 }
+
+div.flex-stack.top-gap {
+    background-color: #a0a0a0;
+}