✨ Add header layouts and hamburger menu layout

Ref #167, #88, #43, #29

assets/css/compiled/main.css

@@ -1015,6 +1015,22 @@ body button {
   display: none;
 }
 
+/* Hamburger menu */
+
+body:has(#menu-controller:checked) {
+  position: fixed;
+  overflow-y: scroll;
+}
+
+#menu-button:has(#menu-controller:checked) {
+  visibility: hidden;
+}
+
+#menu-controller:checked ~ #menu-wrapper {
+  visibility: visible;
+  opacity: 1;
+}
+
 /* RTL support */
 
 [dir="rtl"] .prose blockquote {
@@ -1706,6 +1722,14 @@ body button {
   z-index: 10;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
 .order-first {
   order: -9999;
 }
@@ -1748,6 +1772,11 @@ body button {
   margin-bottom: 0px;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -2015,6 +2044,10 @@ body button {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .scroll-smooth {
   scroll-behavior: smooth;
 }
@@ -2118,6 +2151,10 @@ body button {
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
 
+.bg-neutral-100\/50 {
+  background-color: rgba(var(--color-neutral-100), 0.5);
+}
+
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
@@ -2849,6 +2886,10 @@ body button {
     padding-bottom: 2.5rem;
   }
 
+  .sm\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
   .sm\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;