Better responsive navbar

1 files 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;
   }