feat: First draft of navbar + changes to sizing

This commit is contained in:
overflowerror 2024-08-03 22:52:04 +02:00
parent 8c56dd8ec1
commit d9cc3bf85e
3 changed files with 82 additions and 9 deletions

View file

@ -1,5 +1,6 @@
* {
font-family: 'Minecraft', sans-serif;
box-sizing: border-box;
}
body {
@ -8,15 +9,70 @@ body {
}
nav {
background-color: red;
background-color: black;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
margin: 0;
display: block;
}
nav ul {
list-style-type: none;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 13px;
}
nav li {
font-size: 20px;
display: inline-block;
}
nav .left {
left: 20px;
}
nav .left li {
padding-right: 30px;
}
nav .right {
right: 20px;
}
nav .right li {
padding-left: 30px;
}
nav a {
text-decoration: none;
color: white;
box-shadow: inset 0 0 0 0 white;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
padding-left: 10px;
padding-right: 10px;
}
nav a:active {
color: white;
}
nav a:visited {
color: white;
}
nav a:hover {
box-shadow: inset 130px 0 0 0 white;
color: black;
}
h1 {
text-align: center;
font-size: 40px;
margin: 60px;
}
.choice {
@ -48,9 +104,9 @@ h1 {
.middle .or, .middle .spinner {
color: white;
font-size: 5vw;
font-size: 30px;
position: absolute;
top: 50%;
top: 60%;
width: 100%;
text-align: center;
transform: translate(0%, -50%);
@ -58,6 +114,10 @@ h1 {
transition: opacity 0.2s;
}
.middle .spinner img {
width: 7vw;
}
.loading .or {
opacity: 0;
}
@ -80,8 +140,8 @@ h1 {
}
.mob {
width: 40vw;
height: 42vw;
width: 33vw;
height: 35vw;
position: relative;
}
@ -98,8 +158,8 @@ h1 {
.mob img {
object-fit: contain;
width: 35vw;
height: 35vw;
width: 28vw;
height: 28vw;
margin-top: 5.5vw;
margin-left: 2.5vw;
}
@ -119,6 +179,10 @@ h1 {
margin-right: auto;
}
.results-list th {
font-size: 20px;
}
.results-list td {
border: none;
}

View file

@ -31,7 +31,7 @@ function makeSortButton(string $field): void {
<thead>
<tr>
<th>
Position <?php makeSortButton("position"); ?>
Pos. <?php makeSortButton("position"); ?>
</th>
<th>
<!-- image -->

View file

@ -8,7 +8,16 @@
<script type="application/javascript" src="/js/bundle.js"></script>
</head>
<body>
<nav>
<nav data-hx-boost="true">
<ul class="left">
<li><a href="/">MobMash</a></li>
<li><a href="/results">Results</a></li>
</ul>
<ul class="right">
<li><a href="/about">About</a></li>
<li><a href="https://github.com/overflowerror/mobmash.click">Source</a></li>
<li><a href="/privacy">Privacy</a></li>
</ul>
</nav>
<?php
if (isset($content)) {