luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved styling on the main page

Browse Source
This commit is contained in:
Luke Else 2024-01-05 21:16:02 +00:00
parent 868876b98e
commit 2cf3fc9fbf
4 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/css/loginform.css
View File

@ -6,7 +6,6 @@ h2 {
background-color: rgba(255, 255, 255, .15); background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(200px); backdrop-filter: blur(200px);
width: 35%; width: 35%;
margin: 30px auto;
text-align: center; text-align: center;
padding: 1em 0 0 0; padding: 1em 0 0 0;
border-radius: 4px; border-radius: 4px;

25
static/css/style.css
View File

@ -19,19 +19,28 @@
html { html {
background-color: var(--bg); background-color: var(--bg);
color: var(--fg); color: var(--fg);
padding: 2%;
font-size: 160%; font-size: 160%;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
overflow-y: hidden; height: 100%;
} }
body { body {
display: flex; 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; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
/* Navbar styling*/
nav { nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -153,6 +162,7 @@ a:active {
} }
.container { .container {
flex: 1 1 auto;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -160,7 +170,7 @@ a:active {
gap: 1rem; gap: 1rem;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
height: 90%; height: 1%;
} }
.filter-pane { .filter-pane {
@ -242,14 +252,13 @@ a:active {
.product-container { .product-container {
width: 95%; width: 95%;
margin: .5rem 0rem;
background-color: var(--bg-grad-3); background-color: var(--bg-grad-3);
border-radius: 1rem; border-radius: 1rem 1rem 0rem 0rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
gap: 2rem 1.5rem; gap: 2rem 1.5rem;
padding: 2rem 1rem 3rem; padding: 1rem;
transition: all 0.2s; transition: all 0.2s;
overflow-y: scroll; overflow-y: scroll;
} }
@ -262,7 +271,7 @@ a:active {
flex: 4 0 1rem; flex: 4 0 1rem;
padding: .5rem 1rem 2rem 2rem; padding: .5rem 1rem 2rem 2rem;
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: .5rem; border-radius: .5rem .5rem;
transition: all 0.2s; transition: all 0.2s;
} }

13
templates/header.html
View File

@ -1,5 +1,6 @@
<nav class="navbar"> <div class="navbar">
<img src="{{url_for('static', filename='assets/img/wmgzon.png')}}" id="logo" class="not-required" alt="WMGZON Logo"> <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"> <form action="test.html" method="get">
<input type="text" name="search" placeholder="Find your favourite products" class="search-bar"> <input type="text" name="search" placeholder="Find your favourite products" class="search-bar">
<input type="submit" class="search-button"> <input type="submit" class="search-button">
@ -9,9 +10,9 @@
{% else %} {% else %}
<a href="/login">Login/Signup</a> <a href="/login">Login/Signup</a>
{% endif %} {% endif %}
</nav> </nav>
<centre> <centre>
<div class="categories"> <div class="categories">
<a href="CarParts" class="category">Car Parts</a> <a href="CarParts" class="category">Car Parts</a>
<a href="Animals" class="category">Animals</a> <a href="Animals" class="category">Animals</a>
@ -20,4 +21,6 @@
<a href="Phones" class="category">Phones</a> <a href="Phones" class="category">Phones</a>
<a href="Music" class="category">Music</a> <a href="Music" class="category">Music</a>
</div> </div>
</centre> </centre>
</div>

2
templates/index.html
View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
{% include 'header.html' %} {% include 'header.html' %}
<div class="container"> <div class="container container-fixed">
{% include content %} {% include content %}
</div> </div>
</body> </body>