fix mobile menu

content/header/index.md

@@ -17,7 +17,7 @@ extra:
 
 {% row() %}
 
-<button onclick="window.location.href='/newsroom'">
+<button class="dropdown" onclick="window.location.href='/newsroom'">
 
 [Newsroom](/newsroom)
 <br>
@@ -27,7 +27,7 @@ extra:
 
 |||
 
-<button onclick="window.location.href='/blog'">
+<button class="dropdown" onclick="window.location.href='/blog'">
 
 [Blog](/blog)
 <br>
@@ -37,7 +37,7 @@ extra:
 
 |||
 
-<button onclick="window.location.href='/people'">
+<button class="dropdown" onclick="window.location.href='/people'">
 
 [Our People](/people)
 <br>
@@ -47,7 +47,7 @@ extra:
 
 |||
 
-<button onclick="openInNewTab('https&#58;//library.threefold.me/info/threefold#/')">
+<button class="dropdown" onclick="openInNewTab('https&#58;//library.threefold.me/info/threefold#/')">
 
 [Documentation](https://manual.grid.tf)
 <br>

css/index.css

@@ -80,6 +80,38 @@ a img:hover{
 
 /* new theme */
 
+.dropdown { 
+  @apply
+  lg:text-lg
+  px-6
+  py-1
+  lg:mr-5
+  my-3
+  shadow
+  bg-white
+  border-black
+  capitalize 
+  leading-6 
+  border-transparent 
+  flex 
+  flex-col
+  border-2 
+  w-full 
+  items-start
+  rounded 
+  transition 
+  hover:first:text-gray-500 
+  hover:border-stone-200 
+  hover:bg-stone-100 
+  p-2 
+  text-left
+}
+
+.dropdown a{
+  @apply
+  px-0
+}
+
 .green{
 
   background-color:#58CF77 !important;
@@ -570,36 +602,6 @@ header {
     height: auto;
   
   }
+  
 }
 
-header #menu button { 
-  @apply
-  lg:text-lg
-  px-6
-  py-1
-  lg:mr-5
-  my-3
-  shadow
-  bg-white
-  border-black
-  capitalize 
-  leading-6 
-  border-transparent 
-  flex 
-  flex-col
-  border-2 
-  w-full 
-  items-start
-  rounded 
-  transition 
-  hover:first:text-gray-500 
-  hover:border-stone-200 
-  hover:bg-stone-100 
-  p-2 
-  text-left
-}
-
-header #menu button a{
-  @apply
-  px-0
-}

templates/partials/header.html

@@ -186,7 +186,7 @@
                                         <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                     </button>
                                     {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
-                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                    <div id="{{menu_id}}" class="z-50 leading-3 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
                                         {{ header_arr[1] | safe }}
                                     </div>