Top nav menu with tailwindcss

2 files changed, 133 insertions, 0 deletions

diff --git a/assets/css/input.css b/assets/css/input.css
index 6243110..229247d 100644
--- a/assets/css/input.css
+++ b/assets/css/input.css
@@ -45,6 +45,62 @@ blockquote::before {
 }
 
 @layer components {
+  .menu {
+    transition: max-height 0.2s ease-out;
+    overflow: hidden;
+    display: flex;
+    /* this parts must be overridden on non small  */
+    flex-direction: column;
+    width: 100%;
+    position: fixed;
+    max-height: 0px;
+  }
+  .menu-btn:checked ~ .menu {
+    max-height: 240px;
+    z-index: 2;
+  }
+  /* What comes next is only to style the ham menu to an X when clicking */
+  .menu-icon {
+    .navicon {
+      display: block;
+      height: 2px;
+      position: relative;
+      transition: background 0.2s ease-out;
+      width: 18px;
+    }
+    .navicon:before,
+    .navicon:after {
+      background: #ebdbb2;
+      content: "";
+      display: block;
+      height: 100%;
+      position: absolute;
+      transition: all 0.2s ease-out;
+      width: 100%;
+    }
+    .navicon:before {
+      top: 6px;
+    }
+    .navicon:after {
+      top: -6px;
+    }
+  }
+  .menu-btn:checked {
+    ~ .menu-icon .navicon {
+      background: 0 0;
+    }
+    ~ .menu-icon .navicon:before {
+      transform: rotate(-45deg);
+    }
+    ~ .menu-icon .navicon:after {
+      transform: rotate(45deg);
+    }
+    ~ .menu-icon:not(.steps) .navicon:before,
+    ~ .menu-icon:not(.steps) .navicon:after {
+      top: 0;
+    }
+  }
+
   #hero {
     text-shadow: 2px 2px 3px black;
   }
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ea36784..3b17675 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -655,6 +655,66 @@ h6 {
   }
 }
 
+.menu {
+  transition: max-height 0.2s ease-out;
+  overflow: hidden;
+  display: flex;
+  /* this parts must be overridden on non small  */
+  flex-direction: column;
+  width: 100%;
+  position: fixed;
+  max-height: 0px;
+}
+
+.menu-btn:checked ~ .menu {
+  max-height: 240px;
+  z-index: 2;
+}
+
+/* What comes next is only to style the ham menu to an X when clicking */
+
+.menu-icon {
+  .navicon {
+    display: block;
+    height: 2px;
+    position: relative;
+    transition: background 0.2s ease-out;
+    width: 18px;
+  }
+  .navicon:before,
+    .navicon:after {
+    background: #ebdbb2;
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all 0.2s ease-out;
+    width: 100%;
+  }
+  .navicon:before {
+    top: 6px;
+  }
+  .navicon:after {
+    top: -6px;
+  }
+}
+
+.menu-btn:checked {
+  ~ .menu-icon .navicon {
+    background: 0 0;
+  }
+  ~ .menu-icon .navicon:before {
+    transform: rotate(-45deg);
+  }
+  ~ .menu-icon .navicon:after {
+    transform: rotate(45deg);
+  }
+  ~ .menu-icon:not(.steps) .navicon:before,
+    ~ .menu-icon:not(.steps) .navicon:after {
+    top: 0;
+  }
+}
+
 #hero {
   text-shadow: 2px 2px 3px black;
 }
@@ -925,6 +985,10 @@ h6 {
   top: 0px;
 }
 
+.top-12 {
+  top: 3rem;
+}
+
 .float-right {
   float: right;
 }
@@ -1546,6 +1610,10 @@ blockquote::before {
 }
 
 @media (min-width: 768px) {
+  .md\:static {
+    position: static;
+  }
+
   .md\:float-left {
     float: left;
   }
@@ -1562,6 +1630,15 @@ blockquote::before {
     display: none;
   }
 
+  .md\:max-h-none {
+    max-height: none;
+  }
+
+  .md\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .md\:shrink-0 {
     flex-shrink: 0;
   }