✨ 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;

assets/css/main.css

@@ -21,6 +21,17 @@ body button {
   @apply hidden;
 }
 
+/* Hamburger menu */
+body:has(#menu-controller:checked) {
+  @apply fixed overflow-y-scroll;
+}
+#menu-button:has(#menu-controller:checked) {
+  @apply invisible;
+}
+#menu-controller:checked ~ #menu-wrapper {
+  @apply visible opacity-100;
+}
+
 /* RTL support */
 .prose blockquote {
   @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;

assets/icons/bars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>