making mobile menu bigger
This commit is contained in:
parent
bb832e6862
commit
bccf89e5d7
4 changed files with 344 additions and 103 deletions
|
|
@ -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 {
|
||||
--tw-backdrop-blur: blur(8px);
|
||||
.backdrop-blur-sm {
|
||||
--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 {
|
||||
--tw-backdrop-blur: blur(4px);
|
||||
.backdrop-blur {
|
||||
--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;
|
||||
}
|
||||
|
|
|
|||
178
layouts/partials/header/basic.html
Normal file
178
layouts/partials/header/basic.html
Normal file
|
|
@ -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 }}
|
||||
31
layouts/partials/header/header-mobile-option-nested.html
Normal file
31
layouts/partials/header/header-mobile-option-nested.html
Normal file
|
|
@ -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>
|
||||
13
layouts/partials/header/header-mobile-option-simple.html
Normal file
13
layouts/partials/header/header-mobile-option-simple.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue