Add mobile nav

Pure CSS, baby!

themes/kosmos-22/assets/css/main.css

@@ -534,6 +534,54 @@ p + p, p + ul {
   color: rgb(14 165 233 / var(--tw-text-opacity));
 }
 
+input#mobile-nav-is-open + div > a svg:last-of-type {
+  display: none;
+}
+
+input#mobile-nav-is-open:checked + div > a svg:first-of-type {
+  display: none;
+}
+
+input#mobile-nav-is-open:checked + div > a svg:last-of-type {
+  display: block;
+}
+
+input#mobile-nav-is-open + div > div.backdrop {
+  display: none;
+}
+
+input#mobile-nav-is-open:checked + div > div.backdrop {
+  display: block;
+}
+
+input#mobile-nav-is-open + div > nav {
+  display: none;
+}
+
+input#mobile-nav-is-open:checked + div > nav {
+  display: block;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.top-20 {
+  top: 5rem;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -567,20 +615,24 @@ p + p, p + ul {
   margin-top: -0.125rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
+.mr-1\.5 {
+  margin-right: 0.375rem;
 }
 
 .-mt-0 {
   margin-top: -0px;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .ml-16 {
   margin-left: 4rem;
 }
 
-.mr-1\.5 {
-  margin-right: 0.375rem;
+.-mr-2 {
+  margin-right: -0.5rem;
 }
 
 .block {
@@ -595,6 +647,10 @@ p + p, p + ul {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .grid {
   display: grid;
 }
@@ -627,6 +683,10 @@ p + p, p + ul {
   width: auto;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -635,8 +695,8 @@ p + p, p + ul {
   flex-shrink: 0;
 }
 
-.grow-0 {
-  flex-grow: 0;
+.grow {
+  flex-grow: 1;
 }
 
 .transform {
@@ -659,6 +719,14 @@ p + p, p + ul {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -667,6 +735,14 @@ p + p, p + ul {
   align-items: baseline;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
 .justify-items-stretch {
   justify-items: stretch;
 }
@@ -687,6 +763,16 @@ p + p, p + ul {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -701,6 +787,14 @@ p + p, p + ul {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-zinc-800\/70 {
+  background-color: rgb(39 39 42 / 0.7);
+}
+
 .bg-\[url\(\'\/img\/lagoon-close-02\.jpg\'\)\] {
   background-image: url('/img/lagoon-close-02.jpg');
 }
@@ -717,6 +811,10 @@ p + p, p + ul {
   background-position: center top 30rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -727,6 +825,14 @@ p + p, p + ul {
   padding-right: 2rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -771,11 +877,45 @@ p + p, p + ul {
   color: rgb(113 113 122 / var(--tw-text-opacity));
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .\!text-black {
   --tw-text-opacity: 1 !important;
   color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
 }
 
+.hover\:bg-zinc-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-white:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-offset-zinc-400:focus {
+  --tw-ring-offset-color: #a1a1aa;
+}
+
 @media (min-width: 640px) {
   .sm\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -791,18 +931,22 @@ p + p, p + ul {
     display: block;
   }
 
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:shrink-0 {
     flex-shrink: 0;
   }
 
-  .md\:grow {
-    flex-grow: 1;
-  }
-
   .md\:grow-0 {
     flex-grow: 0;
   }
 
+  .md\:grow {
+    flex-grow: 1;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }