Update menu style

assets/style.css

@@ -622,14 +622,6 @@ video {
   left: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
-.right-0 {
-  right: 0px;
-}
-
 .top-4 {
   top: 1rem;
 }
@@ -638,6 +630,10 @@ video {
   right: 1.5rem;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -656,10 +652,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mr-auto {
   margin-right: auto;
 }
@@ -668,6 +660,14 @@ video {
   margin-top: auto;
 }
 
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -676,22 +676,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
-.-ml-2 {
-  margin-left: -0.5rem;
-}
-
-.-ml-4 {
-  margin-left: -1rem;
-}
-
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .block {
   display: block;
 }
@@ -742,23 +726,19 @@ video {
   align-items: center;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-6 {
   gap: 1.5rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
 }
 
-.gap-y-2 {
-  row-gap: 0.5rem;
-}
-
 .gap-y-4 {
   row-gap: 1rem;
 }
@@ -767,10 +747,6 @@ video {
   align-self: flex-start;
 }
 
-.self-end {
-  align-self: flex-end;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -803,8 +779,9 @@ video {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.p-6 {
+.bg-gray-100 {
-  padding: 1.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
 .px-6 {
@@ -822,16 +799,6 @@ video {
   padding-bottom: 1.5rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -880,7 +847,7 @@ video {
 }
 
 html {
-  font-family: Spline Sans;
+  font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1.5rem;
 }
 
@@ -1027,20 +994,6 @@ code {
   .max-lg\:hidden {
     display: none;
   }
-
-  .max-lg\:items-start {
-    align-items: flex-start;
-  }
-
-  .max-lg\:bg-gray-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  }
-
-  .max-lg\:bg-gray-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  }
 }
 
 @media (min-width: 768px) {
@@ -1093,6 +1046,10 @@ code {
     margin-right: auto;
   }
 
+  .lg\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
   .lg\:hidden {
     display: none;
   }
@@ -1110,12 +1067,8 @@ code {
     background-color: transparent;
   }
 
-  .lg\:p-0 {
+  .lg\:py-0 {
-    padding: 0px;
+    padding-top: 0px;
-  }
+    padding-bottom: 0px;
-
-  .lg\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
   }
 }

layouts/_default/baseof.html

@@ -18,7 +18,7 @@
   x-bind:class="`color-scheme--${colorScheme} ${menuOpen ? 'overflow-hidden' : ''}`"
 >
   <header class="pt-4 pb-6">
-    <div class="container mx-auto px-6 flex items-center mb-4 gap-6">
+    <div class="container mx-auto px-6 flex items-center lg:mb-4 gap-6">
       <a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="mr-auto">
         <img src="{{ "/images/logo.png" | relURL }}" width="60" alt="{{ site.Title }}" />
       </a>

layouts/partials/menu.html

@@ -1,5 +1,5 @@
 <nav
-  class="lg:container lg:mx-auto lg:px-6 bg-gray-900 lg:bg-transparent fixed overflow-y-auto lg:static inset-0 transition-transform px-6 py-12 lg:p-0 max-lg:bg-gray-100"
+  class="bg-gray-900 bg-gray-100 lg:bg-transparent fixed lg:static inset-0 z-10 overflow-y-auto transition-transform lg:container lg:mx-auto px-6 py-12 lg:py-0"
   x-bind:class="menuOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'">
   <h2 class="sr-only">{{ i18n "menu_title" }}</h2>
   <button class="button block mb-6 lg:hidden absolute top-4 right-6" x-on:click="menuOpen = false">