From f935f680494f391d843e622da61d0146b1aabe6c Mon Sep 17 00:00:00 2001
From: yuzu-eva <stevenhu@web.de>
Date: Mon, 20 Mar 2023 18:32:54 +0100
Subject: restructured html and changed styling a bit

---
 index.html                   |  7 +++++--
 static/about.html            |  7 +++++--
 static/recipes/omurice.html  |  8 ++++++--
 static/recipes/overview.html | 29 +++++++++++++++++------------
 static/recipes/oyakodon.html |  8 ++++++--
 static/recipes/pizza.html    |  8 ++++++--
 static/style.css             | 38 ++++++++++++++++++++++++++++----------
 7 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 58d5a85..1fc2f9b 100644
--- a/index.html
+++ b/index.html
@@ -26,12 +26,15 @@
             </ul>
         </nav>
 
+    </header>
+
+    <div id="headerwrapper">
         <h1>Hello, World!</h1>
         <p>... and everyone in it.</p>
         <a href="https://wiby.me/surprise">Link to a random website</a>
-    </header>
+    </div>
 
-    <main>
+    <main id="wrapper-center">
         <div id="lists">
             <h3>favourite foods:</h3>
             <ul>
diff --git a/static/about.html b/static/about.html
index c5750c7..5608c25 100644
--- a/static/about.html
+++ b/static/about.html
@@ -24,14 +24,17 @@
                 </li>
             </ul>
         </nav>
+    </header>
+
+    <div id="headerwrapper">
         <h1>About this Website</h1>
+    </div>
 
+    <main id="wrapper-center">
         <p>
             This website will contain all projects related to The
             Odin Project online course.
         </p>
-        </header>
-    <main>
     </main>
 </body>
 <script src=""></script>
diff --git a/static/recipes/omurice.html b/static/recipes/omurice.html
index 73d983c..35eace2 100644
--- a/static/recipes/omurice.html
+++ b/static/recipes/omurice.html
@@ -25,9 +25,13 @@
             </ul>
         </nav>
 
-        <h1>My Omurice Recipe</h1>
     </header>
-    <main>
+
+    <div id="headerwrapper">
+        <h1>My Omurice Recipe</h1>
+    </div>
+
+    <main id="wrapper-center">
         <div id="lists">
             <h2>Description</h2> 
             <p>
diff --git a/static/recipes/overview.html b/static/recipes/overview.html
index d28bf84..33b0fb2 100644
--- a/static/recipes/overview.html
+++ b/static/recipes/overview.html
@@ -25,21 +25,26 @@
             </ul>
         </nav>
 
-        <h1>My Top Recipes!</h1>
     </header>
 
+    <div id="headerwrapper">
+        <h1>My Top Recipes!</h1>
+    </div>
+
     <main>
-        <ul id="recipe-list">
-            <li id="recipe-item">
-                <a href="./pizza.html">Pizza</a>
-            </li>
-            <li id="recipe-item">
-                <a href="./oyakodon.html">Oyakodon</a>
-            </li>
-            <li id="recipe-item">
-                <a href="./omurice.html">Omurice</a>
-            </li>
-        </ul>
+        <div>
+            <ul id="recipe-list">
+                <li id="recipe-item">
+                    <a href="./pizza.html">Pizza</a>
+                </li>
+                <li id="recipe-item">
+                    <a href="./oyakodon.html">Oyakodon</a>
+                </li>
+                <li id="recipe-item">
+                    <a href="./omurice.html">Omurice</a>
+                </li>
+            </ul>
+        </div>
     </main>
 </body>
 <script src=""></script>
diff --git a/static/recipes/oyakodon.html b/static/recipes/oyakodon.html
index f041473..08d0a61 100644
--- a/static/recipes/oyakodon.html
+++ b/static/recipes/oyakodon.html
@@ -25,9 +25,13 @@
             </ul>
         </nav>
 
-        <h1>My Oyakodon Recipe</h1>
     </header>
-    <main>
+
+    <div id="headerwrapper">
+        <h1>My Oyakodon Recipe</h1>
+    </div>
+    
+    <main id="wrapper-center">
         <div id="lists">
             <h2>Description</h2> 
             <p>
diff --git a/static/recipes/pizza.html b/static/recipes/pizza.html
index 3141a6f..b64afca 100644
--- a/static/recipes/pizza.html
+++ b/static/recipes/pizza.html
@@ -25,9 +25,13 @@
             </ul>
         </nav>
 
-        <h1>My Pizza Recipe</h1>
     </header>
-    <main>
+
+    <div id="headerwrapper">
+        <h1>My Pizza Recipe</h1>
+    </div>
+
+    <main id="wrapper-center">
         <div id="lists">
             <h2>Description</h2> 
             <p>
diff --git a/static/style.css b/static/style.css
index f0c3d2a..a20a529 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,23 +1,39 @@
 html {
     background: black;
     font-family: 'Open Sans', sans-serif;
+    height: 100%;
 }
 
 body {
-    color: white;
+    margin-left: 10%;
+    max-width: 80%;
+    min-width: 70%;
+    height: 100%;
 }
 
 header {
     text-align: center;
+    color: white;
 }
 
 main {
-    padding-top: 2%;
+    min-height: 100%;
 }
 
-nav ul li a {
-    color: #f1f3f3;
-    font-size: smaller;
+#wrapper-center {
+    display: flex;
+    justify-content: center;
+}
+
+main, #headerwrapper {
+    background-color: #fafafa;
+    color: black;
+}
+
+#headerwrapper {
+    text-align: center;
+    padding-top: 0.1%;
+    padding-bottom: 2%;
 }
 
 nav ul {
@@ -34,19 +50,20 @@ nav a {
     text-decoration: none;
     display: block;
     padding: 5px 6px 5px 6px;
-    color: black;
+    color: white;
 }
 
 #lists {
     float: left;
-    padding-left: 5%;
+    margin-right: 5%;
     max-width: 45%;
 }
 
 #img-wrapper {
     float: right;
-    padding-right: 5%;
-    max-width: 40%;
+    padding-top: 2%;
+    margin-left: 8%;
+    max-width: 30%;
 }
 
 img {
@@ -55,7 +72,8 @@ img {
 }
 
 #recipe-list {
-    padding-left: 30%;
+    float: left;
+    padding-left: 38%;
     list-style-type: none;
 
 }
-- 
cgit v1.2.3