making mobile menu bigger

assets/css/compiled/main.css

@@ -1647,6 +1647,10 @@ select {
   left: 0px;
 }
 
+.z-30 {
+  z-index: 30;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1659,10 +1663,6 @@ select {
   z-index: 1;
 }
 
-.z-30 {
-  z-index: 30;
-}
-
 .order-first {
   order: -9999;
 }
@@ -1724,6 +1724,11 @@ select {
   margin-bottom: 0px;
 }
 
+.-my-2 {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1749,11 +1754,6 @@ select {
   margin-right: 3px;
 }
 
-.-my-2 {
-  margin-top: -0.5rem;
-  margin-bottom: -0.5rem;
-}
-
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -1815,10 +1815,30 @@ select {
   margin-right: 1rem;
 }
 
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -1847,10 +1867,6 @@ select {
   margin-bottom: 5rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -1867,10 +1883,6 @@ select {
   margin-bottom: 0px !important;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .mb-16 {
   margin-bottom: 4rem;
 }
@@ -1883,10 +1895,6 @@ select {
   margin-left: 0.5rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1895,10 +1903,6 @@ select {
   margin-right: -100%;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-5 {
   margin-right: 1.25rem;
 }
@@ -1915,10 +1919,6 @@ select {
   margin-left: 1.5rem;
 }
 
-.-mr-2 {
-  margin-right: -0.5rem;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -2067,14 +2067,14 @@ select {
   width: 6rem;
 }
 
-.w-36 {
-  width: 9rem;
-}
-
 .w-screen {
   width: 100vw;
 }
 
+.w-36 {
+  width: 9rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -2131,6 +2131,10 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[5rem\] {
+  max-width: 5rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -2153,10 +2157,6 @@ select {
   max-width: 48rem;
 }
 
-.max-w-\[5rem\] {
-  max-width: 5rem;
-}
-
 .max-w-\[64rem\] {
   max-width: 64rem;
 }
@@ -2287,12 +2287,6 @@ select {
   margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -2311,6 +2305,12 @@ select {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .place-self-center {
   place-self: center;
 }
@@ -2457,6 +2457,10 @@ select {
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
 
+.bg-neutral-100\/50 {
+  background-color: rgba(var(--color-neutral-100), 0.5);
+}
+
 .bg-neutral {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral), var(--tw-bg-opacity));
@@ -2499,10 +2503,6 @@ select {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
 }
 
-.bg-neutral-100\/50 {
-  background-color: rgba(var(--color-neutral-100), 0.5);
-}
-
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -2643,6 +2643,16 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -2653,11 +2663,6 @@ select {
   padding-right: 0.25rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2683,11 +2688,6 @@ select {
   padding-right: 0.5rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2718,6 +2718,10 @@ select {
   padding-bottom: 1rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2738,10 +2742,6 @@ select {
   padding-left: 0.5rem;
 }
 
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
 .pl-\[24px\] {
   padding-left: 24px;
 }
@@ -2821,10 +2821,25 @@ select {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .text-\[0\.6rem\] {
   font-size: 0.6rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-extrabold {
   font-weight: 800;
 }
@@ -2833,14 +2848,6 @@ select {
   font-weight: 600;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
-.font-normal {
-  font-weight: 400;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -2849,6 +2856,14 @@ select {
   font-weight: 300;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -2869,6 +2884,10 @@ select {
   line-height: .75rem;
 }
 
+.leading-10 {
+  line-height: 2.5rem;
+}
+
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-900), var(--tw-text-opacity));
@@ -2909,6 +2928,11 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
 .text-primary-300 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-300), var(--tw-text-opacity));
@@ -2929,11 +2953,6 @@ select {
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
 }
 
-.text-neutral-700 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
-}
-
 .text-primary-700 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-700), var(--tw-text-opacity));
@@ -2980,14 +2999,14 @@ select {
   color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity));
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .opacity-0 {
   opacity: 0;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-60 {
   opacity: 0.6;
 }
@@ -3022,14 +3041,14 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.backdrop-blur {
+.backdrop-blur-sm {
-  --tw-backdrop-blur: blur(8px);
+  --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.backdrop-blur-sm {
+.backdrop-blur {
-  --tw-backdrop-blur: blur(4px);
+  --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
@@ -4727,6 +4746,11 @@ pre {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
 }
 
+.hover\:text-primary-600:hover {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-600), var(--tw-text-opacity));
+}
+
 .hover\:text-primary-400:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
@@ -4747,11 +4771,6 @@ pre {
   color: rgba(var(--color-neutral), var(--tw-text-opacity));
 }
 
-.hover\:text-primary-600:hover {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -4914,6 +4933,10 @@ pre {
   margin-left: 0.5rem;
 }
 
+[dir="ltr"] .ltr\:mr-14 {
+  margin-right: 3.5rem;
+}
+
 [dir="ltr"] .ltr\:mr-4 {
   margin-right: 1rem;
 }
@@ -4922,10 +4945,6 @@ pre {
   margin-left: -1.25rem;
 }
 
-[dir="ltr"] .ltr\:mr-14 {
-  margin-right: 3.5rem;
-}
-
 [dir="ltr"] .ltr\:block {
   display: block;
 }
@@ -4970,6 +4989,10 @@ pre {
   margin-right: 0.5rem;
 }
 
+[dir="rtl"] .rtl\:ml-14 {
+  margin-left: 3.5rem;
+}
+
 [dir="rtl"] .rtl\:ml-4 {
   margin-left: 1rem;
 }
@@ -4978,10 +5001,6 @@ pre {
   margin-right: -1.25rem;
 }
 
-[dir="rtl"] .rtl\:ml-14 {
-  margin-left: 3.5rem;
-}
-
 [dir="rtl"] .rtl\:block {
   display: block;
 }
@@ -5058,6 +5077,10 @@ pre {
   background-color: rgba(var(--color-primary-800), var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-neutral-900\/50 {
+  background-color: rgba(var(--color-neutral-900), 0.5);
+}
+
 .dark .dark\:bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-800), var(--tw-bg-opacity));
@@ -5077,10 +5100,6 @@ pre {
   background-color: rgba(var(--color-neutral-800), 0.5);
 }
 
-.dark .dark\:bg-neutral-900\/50 {
-  background-color: rgba(var(--color-neutral-900), 0.5);
-}
-
 .dark .dark\:bg-neutral-700 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity));
@@ -5364,14 +5383,14 @@ pre {
     margin-top: 0px;
   }
 
-  .md\:-mr-16 {
-    margin-right: -4rem;
-  }
-
   .md\:ml-12 {
     margin-left: 3rem;
   }
 
+  .md\:-mr-16 {
+    margin-right: -4rem;
+  }
+
   .md\:flex {
     display: flex;
   }

layouts/partials/header/basic.html

@@ -0,0 +1,178 @@
+<div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
+    class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+    {{ if .Site.Params.Logo }}
+    {{ $logo := resources.Get .Site.Params.Logo }}
+    {{ if $logo }}
+    <div>
+        <a href="{{ "" | relLangURL }}" class="flex">
+            <span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>
+
+            <img src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}" height="{{ div $logo.Height 2 }}"
+                class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="{{ .Site.Title }}" />
+
+        </a>
+    </div>
+    {{ end }}
+    {{- end }}
+    <div class="flex flex-1 items-center justify-between">
+        <nav class="flex space-x-3">
+
+            {{ if not .Site.Params.disableTextInHeader | default true }}
+            <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{
+                .Site.Title | markdownify
+                | emojify }}</a>
+            {{ end }}
+
+        </nav>
+        <nav class="hidden md:flex items-center space-x-5 md:ml-12 h-12">
+
+            {{ if .Site.Menus.main }}
+            {{ range .Site.Menus.main }}
+            {{ partial "header/header-option.html" . }}
+            {{ end }}
+            {{ end }}
+
+            {{ partial "translations.html" . }}
+
+            {{ if .Site.Params.enableSearch | default false }}
+            <button id="search-button" aria-label="Search" class="text-base hover:text-primary-600 dark:hover:text-primary-400 h-12"
+                title="{{ i18n " search.open_button_title" }}">
+                {{ partial "icon.html" "search" }}
+            </button>
+            {{ end }}
+
+
+            {{/* Appearance switch */}}
+            {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
+            <div
+                class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
+                <button id="appearance-switcher" aria-label="Dark mode switcher" type="button">
+                    <div class="flex items-center justify-center h-12 dark:hidden">
+                        {{ partial "icon.html" "moon" }}
+                    </div>
+                    <div class="items-center justify-center hidden h-12 dark:flex">
+                        {{ partial "icon.html" "sun" }}
+                    </div>
+                </button>
+            </div>
+            {{ end }}
+
+        </nav>
+        <div class="flex md:hidden items-center space-x-5 md:ml-12">
+
+            <span></span>
+
+            {{ partial "translations.html" . }}
+
+            {{ if .Site.Params.enableSearch | default false }}
+            <button id="search-button-mobile" aria-label="Search" class="text-2xl hover:text-primary-600 dark:hover:text-primary-400"
+                title="{{ i18n " search.open_button_title" }}">
+                {{ partial "icon.html" "search" }}
+            </button>
+            {{ end }}
+
+            {{/* Appearance switch */}}
+            {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
+            <button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" style="margin-right:5px" class="text-3xl">
+                <div class="flex items-center justify-center h-12 dark:hidden">
+                    {{ partial "icon.html" "moon" }}
+                </div>
+                <div class="items-center justify-center hidden h-12 dark:flex">
+                    {{ partial "icon.html" "sun" }}
+                </div>
+            </button>
+            {{ end }}
+
+        </div>
+    </div>
+    <div class="-my-2 -mr-2 md:hidden">
+
+        <label id="menu-button" for="menu-controller" class="block">
+            <input type="checkbox" id="menu-controller" class="hidden" />
+            {{ if .Site.Menus.main }}
+            <div class="cursor-pointer text-3xl hover:text-primary-600 dark:hover:text-primary-400">
+                {{ partial "icon.html" "bars" }}
+            </div>
+            <div id="menu-wrapper" style="padding-top:5px;"
+                class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
+                <ul
+                    class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+
+                    <li>
+                        <span
+                            class="cursor-pointer text-5xl inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{
+                            partial
+                            "icon.html"
+                            "xmark" }}</span>
+                    </li>
+
+                    {{ range .Site.Menus.main }}
+
+                    {{ partial "header/header-mobile-option.html" . }}
+
+                    {{ end }}
+
+                </ul>
+                {{ if .Site.Menus.subnavigation }}
+                <hr>
+                <ul
+                    class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+
+
+                    {{ range .Site.Menus.subnavigation }}
+                    <li class="mb-1">
+                        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+                            ) }} target="_blank" {{ end }} class="flex items-center">
+                            {{ if .Pre }}
+                            <span {{ if and .Pre .Name}} class="mr-3" {{ end }}>
+                                {{ partial "icon.html" .Pre }}
+                            </span>
+                            {{ end }}
+                            <p class="text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                                {{ .Name | markdownify | emojify }}
+                            </p>
+                        </a>
+                    </li>
+                    {{ end }}
+
+                </ul>
+                {{ end }}
+                {{ end }}
+
+            </div>
+        </label>
+    </div>
+</div>
+
+{{ if .Site.Menus.subnavigation }}
+<div class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" {{ if .Site.Params.Logo
+    }} style="margin-top:-15px" {{ end }}>
+    <div class="hidden md:flex items-center space-x-5">
+        {{ range .Site.Menus.subnavigation }}
+        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+            target="_blank" {{ end }} class="flex items-center">
+            {{ if .Pre }}
+            <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
+                {{ partial "icon.html" .Pre }}
+            </span>
+            {{ end }}
+            <p class="text-xl font-light text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                {{ .Name | markdownify | emojify }}
+            </p>
+        </a>
+        {{ end }}
+    </div>
+</div>
+{{ end }}
+
+{{ if .Site.Params.highlightCurrentMenuArea }}
+<script>
+    (function () {
+        var $mainmenu = $('.main-menu');
+        var path = window.location.pathname;
+        $mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
+            $(e).children('p').addClass('active');
+        });
+    })();
+</script>
+{{ end }}

layouts/partials/header/header-mobile-option-nested.html

@@ -0,0 +1,31 @@
+<li class="mt-1">
+    <a class="flex items-center">
+        {{ if .Pre }}
+        <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
+            {{ partial "icon.html" .Pre }}
+        </span>
+        {{ end }}
+        <p class="text-3xl text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+            {{ .Name | markdownify | emojify }}
+        </p>
+        <span>
+            {{ partial "icon.html" "chevron-down" }}
+        </span>
+    </a>
+</li>
+{{ range .Children }}
+<li class="mt-1">
+    <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+        ) }} target="_blank" {{ end }} class="flex items-center">
+        {{ if .Pre }}
+        <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
+            {{ partial "icon.html" .Pre }}
+        </span>
+        {{ end }}
+        <p class="text-3xl font-small text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+            {{ .Name | markdownify | emojify }}
+        </p>
+    </a>
+</li>
+{{ end }}
+<li class="mb-2"></li>

layouts/partials/header/header-mobile-option-simple.html

@@ -0,0 +1,13 @@
+<li class="mt-1">
+    <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+        ) }} target="_blank" {{ end }} class="flex items-center">
+        {{ if .Pre }}
+        <div {{ if and .Pre .Name}} class="mr-2" {{ end }}>
+            {{ partial "icon.html" .Pre }}
+        </div>
+        {{ end }}
+        <p class="text-6xl mt-6 text-white hover:text-blue-900" title="{{ .Title }}">
+            {{ .Name | markdownify | emojify }}
+        </p>
+    </a>
+</li>