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);
backdrop-filter: blur(200px);
width: 35%;
margin: 30px auto;
text-align: center;
padding: 1em 0 0 0;
border-radius: 4px;

25
static/css/style.css
View File

@ -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;
}

47
templates/header.html
View File

@ -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>
</div>

2
templates/index.html
View File

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