From 9de361d8d774b073ad34d8e5700e76cd7681a3f8 Mon Sep 17 00:00:00 2001
From: yuzu-eva <stevenhu@web.de>
Date: Tue, 21 Mar 2023 12:24:44 +0100
Subject: added more images, restyled home page

---
 static/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 51 insertions(+), 11 deletions(-)

(limited to 'static/style.css')

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;
+}
-- 
cgit v1.2.3