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

Improved styling on navbar and product containers

Browse Source
This commit is contained in:
Luke Else 2023-12-15 21:23:28 +00:00
parent 086e2c7b45
commit bc63f5138c
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
static/css/style.css
View File

@ -9,9 +9,8 @@
--input: #4e5560; --input: #4e5560;
--fg: #ABB2BF; --fg: #ABB2BF;
--header: #E06C75; --header: #E06C75;
--link: #98C379; --link: #FFF;
--hover: #56B6C2; --hover: #888;
--glow: #C678DD;
--green: #98C379; --green: #98C379;
--red: #E06C75; --red: #E06C75;
@ -20,7 +19,7 @@
html { html {
background-color: var(--bg); background-color: var(--bg);
color: var(--fg); color: var(--fg);
padding:2%; padding: 2%;
font-size: 160%; font-size: 160%;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
} }
@ -45,7 +44,7 @@ form {
} }
#logo { #logo {
width: 15%; width: 12%;
height: auto; height: auto;
} }
@ -62,7 +61,7 @@ form {
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px; box-shadow: inset 0 0 0 10px;
} }
@media (max-width:600px) { @media (max-width:600px) {
@ -76,25 +75,27 @@ a {
position: relative; position: relative;
color: var(--link); color: var(--link);
white-space: nowrap; white-space: nowrap;
transition: 0.4s;
align-content: center;
} }
a:after { a:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 15%;
width: 0%; width: 0%;
border-bottom: 2px solid var(--fg); border-bottom: 2px solid var(--fg);
transition: 0.4s; transition: 0.4s;
} }
a:hover:after { a:hover:after {
width: 100%; width: 70%;
color: var(--glow); color: var(--hover);
} }
a:hover { a:hover {
color: var(--glow); color: var(--hover);
} }
a:active { a:active {
@ -131,6 +132,7 @@ fieldset {
border-radius: 1rem; border-radius: 1rem;
font-family: consolas; font-family: consolas;
} }
input, label, button { input, label, button {
font-size: inherit; font-size: inherit;
padding: .125rem .5rem; padding: .125rem .5rem;
@ -141,7 +143,6 @@ input, label, button {
} }
.textbox { .textbox {
width: 70%;
font-size: inherit; font-size: inherit;
background-color: var(--fg); background-color: var(--fg);
} }
@ -177,7 +178,7 @@ input, label, button {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
flex: 4 0 1rem; flex: 4 0 1rem;
padding: .5rem 2.5rem 2rem; padding: .5rem 1rem 2rem 2rem;
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: .5rem; border-radius: .5rem;
transition: all 0.2s; transition: all 0.2s;
@ -194,4 +195,8 @@ input, label, button {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1rem 1rem; gap: 1rem 1rem;
}
.product-description {
font-size: 70%;
} }

8
static/index.html
View File

@ -12,7 +12,7 @@
<nav class="navbar"> <nav class="navbar">
<img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo"> <img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo">
<form action="test.html" method="get"> <form action="test.html" method="get">
<input type="text" name="search" class="textbox"> <input type="text" name="search" placeholder="Find your favourite products" class="textbox">
<input type="submit" class="button"> <input type="submit" class="button">
</form> </form>
<a href="login.html">Login/Signup</a> <a href="login.html">Login/Signup</a>
@ -31,7 +31,11 @@
</div> </div>
<div class="filter-pane"> <div class="filter-pane">
<div class="number-plate-filter"></div> <div class="number-plate-filter">
<div class="number-plate">
<div class="number-plate-identifier"></div>
</div>
</div>
<div class="product-ordering not-required"></div> <div class="product-ordering not-required"></div>
</div> </div>
</div> </div>