From 2cf3fc9fbfe1b21db7338e977f927ef0efa7cf4d Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Fri, 5 Jan 2024 21:16:02 +0000
Subject: [PATCH] Improved styling on the main page

---
 static/css/loginform.css |  1 -
 static/css/style.css     | 25 ++++++++++++++-------
 templates/header.html    | 47 +++++++++++++++++++++-------------------
 templates/index.html     |  2 +-
 4 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/static/css/loginform.css b/static/css/loginform.css
index 466a177..c9487e5 100644
--- a/static/css/loginform.css
+++ b/static/css/loginform.css
@@ -6,7 +6,6 @@ h2 {
     background-color: rgba(255, 255, 255, .15);  
     backdrop-filter: blur(200px);
     width: 35%;
-    margin: 30px auto;
     text-align: center;
     padding: 1em 0 0 0;
     border-radius: 4px;
diff --git a/static/css/style.css b/static/css/style.css
index f0bd6c6..358e5e4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -19,19 +19,28 @@
 html {
     background-color: var(--bg);
     color: var(--fg);
-    padding: 2%;
     font-size: 160%;
     font-family: 'Courier New', Courier, monospace;
-    overflow-y: hidden;
+    height: 100%;
 }
 
 body {
     display: flex;
-    height: 100vh;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 0;
+    height: 100%;
+}
+
+.navbar {
+    flex: 0 1 auto;
+    padding: 30px;
+    display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
+/* Navbar styling*/
 nav {
     display: flex;
     justify-content: space-between;
@@ -153,6 +162,7 @@ a:active {
 }
 
 .container {
+    flex: 1 1 auto;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -160,7 +170,7 @@ a:active {
     gap: 1rem;
     flex-direction: column;
     flex-grow: 1;
-    height: 90%;
+    height: 1%;
 }
 
 .filter-pane {
@@ -242,14 +252,13 @@ a:active {
 
 .product-container {
     width: 95%;
-    margin: .5rem 0rem;
     background-color: var(--bg-grad-3);
-    border-radius: 1rem;
+    border-radius: 1rem 1rem 0rem 0rem;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     gap: 2rem 1.5rem;
-    padding: 2rem 1rem 3rem;
+    padding: 1rem;
     transition: all 0.2s;
     overflow-y: scroll;
 }
@@ -262,7 +271,7 @@ a:active {
     flex: 4 0 1rem;
     padding: .5rem 1rem 2rem 2rem;
     background: var(--bg-secondary);
-    border-radius: .5rem;
+    border-radius: .5rem .5rem;
     transition: all 0.2s;
 }
 
diff --git a/templates/header.html b/templates/header.html
index 624d63f..f46f743 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,23 +1,26 @@
-<nav class="navbar">
-    <img src="{{url_for('static', filename='assets/img/wmgzon.png')}}" id="logo" class="not-required" alt="WMGZON Logo">
-    <form action="test.html" method="get">
-        <input type="text" name="search" placeholder="Find your favourite products" class="search-bar">
-        <input type="submit" class="search-button">
-    </form>
-    {% if user != None: %}
-        <a href="/logout">Welcome, {{ user }}</a>
-    {% else %}
-        <a href="/login">Login/Signup</a>
-	{% endif %}
-</nav>
+<div class="navbar">
+    <nav>
+        <a href="/"><img src="{{url_for('static', filename='assets/img/wmgzon.png')}}" id="logo" class="not-required" alt="WMGZON Logo"></a>
+        <form action="test.html" method="get">
+            <input type="text" name="search" placeholder="Find your favourite products" class="search-bar">
+            <input type="submit" class="search-button">
+        </form>
+        {% if user != None: %}
+            <a href="/logout">Welcome, {{ user }}</a>
+        {% else %}
+            <a href="/login">Login/Signup</a>
+        {% endif %}
+    </nav>
+        
+    <centre>
+        <div class="categories">
+            <a href="CarParts" class="category">Car Parts</a>
+            <a href="Animals" class="category">Animals</a>
+            <a href="Sports" class="category">Sports</a>
+            <a href="Books" class="category">Books</a>
+            <a href="Phones" class="category">Phones</a>
+            <a href="Music" class="category">Music</a>
+        </div>
+    </centre>
 
-<centre>
-    <div class="categories">
-        <a href="CarParts" class="category">Car Parts</a>
-        <a href="Animals" class="category">Animals</a>
-        <a href="Sports" class="category">Sports</a>
-        <a href="Books" class="category">Books</a>
-        <a href="Phones" class="category">Phones</a>
-        <a href="Music" class="category">Music</a>
-    </div>
-</centre>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 81f990e..3bd24bd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,7 +11,7 @@
 </head>
 <body>
     {% include 'header.html' %}
-    <div class="container">
+    <div class="container container-fixed">
         {% include content %}
     </div>
 </body>