From 910dc5183c52d4d58cf5ba65583423a95dffdb30 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Sun, 13 Aug 2023 14:56:57 +0100 Subject: Better responsive navbar --- public/main.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/public/main.css b/public/main.css index 53c47aa..e89888f 100644 --- a/public/main.css +++ b/public/main.css @@ -309,7 +309,7 @@ footer { margin-inline: auto; } -@media (min-width: 40rem) { +@media (min-width: 60rem) { .back-to-top-link { margin-inline-end: 0; } @@ -399,14 +399,16 @@ nav { align-items: center; padding-block-start: var(--spacing-block-sm); padding-block-end: var(--spacing-block-md); + padding-inline: var(--spacing-inline-sm); } -@media (min-width: 40rem) { +@media (min-width: 60rem) { nav { flex-direction: row; justify-content: space-between; align-items: baseline; padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); + gap: var(--spacing-inline-xs); } .breadcrumbs { @@ -422,19 +424,24 @@ nav { } } +.logo { + text-align: center; +} + .logo a { text-decoration: none; } .breadcrumbs li { list-style-type: none; + min-width: max-content; } .breadcrumbs li::before { content: '/' } -@media (min-width: 40rem) { +@media (min-width: 60rem) { .breadcrumbs { display: flex; } -- cgit v1.2.3