From d9cc3bf85ea9b181542475342d0c0ede15785171 Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sat, 3 Aug 2024 22:52:04 +0200 Subject: [PATCH] feat: First draft of navbar + changes to sizing --- html/styles/main.css | 78 ++++++++++++++++++++++++++++++++++---- view/fragments/mobList.php | 2 +- view/layout.php | 11 +++++- 3 files changed, 82 insertions(+), 9 deletions(-) diff --git a/html/styles/main.css b/html/styles/main.css index 6d2e67b..3923257 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -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; } diff --git a/view/fragments/mobList.php b/view/fragments/mobList.php index 1d576a5..fe33505 100644 --- a/view/fragments/mobList.php +++ b/view/fragments/mobList.php @@ -31,7 +31,7 @@ function makeSortButton(string $field): void { - Position + Pos. diff --git a/view/layout.php b/view/layout.php index 0e8f823..8155e51 100644 --- a/view/layout.php +++ b/view/layout.php @@ -8,7 +8,16 @@ -