diff options
author | Christoph Cullmann <cullmann@kde.org> | 2024-04-28 17:33:09 +0200 |
---|---|---|
committer | Christoph Cullmann <cullmann@kde.org> | 2024-04-28 17:33:09 +0200 |
commit | e77051ccc4b47951bfa4fde2be436b1bb2fb113b (patch) | |
tree | f0b75ee3521da9c8cd39dac4359212348f70e4e8 /themes/blowfish/layouts/partials/header | |
parent | 4b355837824ac2422d371acef790f0f4249255c7 (diff) |
use https://github.com/nunocoracao/blowfish.git
Diffstat (limited to 'themes/blowfish/layouts/partials/header')
11 files changed, 327 insertions, 0 deletions
diff --git a/themes/blowfish/layouts/partials/header/basic.html b/themes/blowfish/layouts/partials/header/basic.html new file mode 100644 index 0000000..3a513c6 --- /dev/null +++ b/themes/blowfish/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" + 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 }} flex items-center"> + <button id="appearance-switcher" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400"> + <div class="flex items-center justify-center dark:hidden"> + {{ partial "icon.html" "moon" }} + </div> + <div class="items-center justify-center hidden dark:flex"> + {{ partial "icon.html" "sun" }} + </div> + </button> + </div> + {{ end }} + + </nav> + <div class="flex md:hidden items-center space-x-5 md:ml-12 h-12"> + + <span></span> + + {{ partial "translations.html" . }} + + {{ if .Site.Params.enableSearch | default false }} + <button id="search-button-mobile" aria-label="Search" class="text-base 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" class="text-base hover:text-primary-600 dark:hover:text-primary-400" style="margin-right:5px"> + <div class="flex items-center justify-center dark:hidden"> + {{ partial "icon.html" "moon" }} + </div> + <div class="items-center justify-center hidden 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 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 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-sm font-sm 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-xs 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 }} diff --git a/themes/blowfish/layouts/partials/header/fixed-fill-blur.html b/themes/blowfish/layouts/partials/header/fixed-fill-blur.html new file mode 100644 index 0000000..534fe98 --- /dev/null +++ b/themes/blowfish/layouts/partials/header/fixed-fill-blur.html @@ -0,0 +1,14 @@ +<div class="min-h-[148px]"></div> +<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100"> + <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div> + <div class="relative max-w-[64rem] ml-auto mr-auto"> + {{ partial "partials/header/basic.html" . }} + </div> +</div> +<script> + window.addEventListener('scroll', function (e) { + var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; + var background_blur = document.getElementById('menu-blur'); + background_blur.style.opacity = (scroll / 300); + }); +</script> diff --git a/themes/blowfish/layouts/partials/header/fixed-fill.html b/themes/blowfish/layouts/partials/header/fixed-fill.html new file mode 100644 index 0000000..4d73a1f --- /dev/null +++ b/themes/blowfish/layouts/partials/header/fixed-fill.html @@ -0,0 +1,6 @@ +<div class="min-h-[148px]"></div> +<div class="fixed inset-x-0 pl-[24px] pr-[24px] bg-neutral dark:bg-neutral-800" style="z-index:100"> + <div class="relative max-w-[64rem] ml-auto mr-auto"> + {{ partial "partials/header/basic.html" . }} + </div> +</div> diff --git a/themes/blowfish/layouts/partials/header/fixed-gradient.html b/themes/blowfish/layouts/partials/header/fixed-gradient.html new file mode 100644 index 0000000..7085b8a --- /dev/null +++ b/themes/blowfish/layouts/partials/header/fixed-gradient.html @@ -0,0 +1,15 @@ +<div class="min-h-[148px]"></div> +<div class="fixed inset-x-0 min-h-[130px] opacity-65 pl-[24px] pr-[24px] bg-gradient-to-b from-neutral from-60% dark:from-neutral-800 to-transparent mix-blend-normal" style="z-index:80"></div> +<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100"> + <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div> + <div class="relative max-w-[64rem] ml-auto mr-auto"> + {{ partial "partials/header/basic.html" . }} + </div> +</div> +<script> + window.addEventListener('scroll', function (e) { + var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; + var background_blur = document.getElementById('menu-blur'); + background_blur.style.opacity = (scroll / 300); + }); +</script> diff --git a/themes/blowfish/layouts/partials/header/fixed.html b/themes/blowfish/layouts/partials/header/fixed.html new file mode 100644 index 0000000..8e3f64d --- /dev/null +++ b/themes/blowfish/layouts/partials/header/fixed.html @@ -0,0 +1,14 @@ +<div class="min-h-[148px]"></div> +<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100"> + <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div> + <div class="relative max-w-[64rem] ml-auto mr-auto"> + {{ partial "partials/header/basic.html" . }} + </div> +</div> +<script> + window.addEventListener('scroll', function (e) { + var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; + var background_blur = document.getElementById('menu-blur'); + background_blur.style.opacity = (scroll / 300); + }); +</script> diff --git a/themes/blowfish/layouts/partials/header/header-mobile-option-nested.html b/themes/blowfish/layouts/partials/header/header-mobile-option-nested.html new file mode 100644 index 0000000..04c3e6d --- /dev/null +++ b/themes/blowfish/layouts/partials/header/header-mobile-option-nested.html @@ -0,0 +1,31 @@ +<li class="mt-1"> + <a class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"> + {{ if .Pre }} + <span {{ if and .Pre .Name}} class="mr-1" {{ end }}> + {{ partial "icon.html" .Pre }} + </span> + {{ end }} + <p class="text-bg font-bg" 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 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"> + {{ if .Pre }} + <span {{ if and .Pre .Name}} class="mr-1" {{ end }}> + {{ partial "icon.html" .Pre }} + </span> + {{ end }} + <p class="text-sm font-small" title="{{ .Title }}"> + {{ .Name | markdownify | emojify }} + </p> + </a> +</li> +{{ end }} +<li class="mb-2"></li>
\ No newline at end of file diff --git a/themes/blowfish/layouts/partials/header/header-mobile-option-simple.html b/themes/blowfish/layouts/partials/header/header-mobile-option-simple.html new file mode 100644 index 0000000..e4d2d64 --- /dev/null +++ b/themes/blowfish/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 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"> + {{ if .Pre }} + <div {{ if and .Pre .Name}} class="mr-2" {{ end }}> + {{ partial "icon.html" .Pre }} + </div> + {{ end }} + <p class="text-bg font-bg" title="{{ .Title }}"> + {{ .Name | markdownify | emojify }} + </p> + </a> +</li>
\ No newline at end of file diff --git a/themes/blowfish/layouts/partials/header/header-mobile-option.html b/themes/blowfish/layouts/partials/header/header-mobile-option.html new file mode 100644 index 0000000..1703119 --- /dev/null +++ b/themes/blowfish/layouts/partials/header/header-mobile-option.html @@ -0,0 +1,5 @@ +{{ if .HasChildren }} + {{ partial "header/header-mobile-option-nested.html" . }} +{{ else }} + {{ partial "header/header-mobile-option-simple.html" . }} +{{ end }} diff --git a/themes/blowfish/layouts/partials/header/header-option-nested.html b/themes/blowfish/layouts/partials/header/header-option-nested.html new file mode 100644 index 0000000..b86fed6 --- /dev/null +++ b/themes/blowfish/layouts/partials/header/header-option-nested.html @@ -0,0 +1,35 @@ +<div> + <div class="cursor-pointer flex items-center nested-menu"> + {{ if .Pre }} + <span {{ if and .Pre .Name}} class="mr-1" {{ end }}> + {{ partial "icon.html" .Pre }} + </span> + {{ end }} + <a {{ if .URL }} href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} + target="_blank" {{ end }} {{ end }} class="text-base font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}"> + {{ .Name | markdownify | emojify }} + </a> + <span> + {{ partial "icon.html" "chevron-down" }} + </span> + </div> + <div class="absolute menuhide"> + <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl"> + <div class="flex flex-col space-y-3"> + {{ range .Children }} + <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} + target="_blank" {{ end }} class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"> + {{ if .Pre }} + <span {{ if and .Pre .Name}} class="mr-1" {{ end }}> + {{ partial "icon.html" .Pre }} + </span> + {{ end }} + <p class="text-sm font-sm" title="{{ .Title }}"> + {{ .Name | markdownify | emojify }} + </p> + </a> + {{ end }} + </div> + </div> + </div> +</div> diff --git a/themes/blowfish/layouts/partials/header/header-option-simple.html b/themes/blowfish/layouts/partials/header/header-option-simple.html new file mode 100644 index 0000000..9ce01b8 --- /dev/null +++ b/themes/blowfish/layouts/partials/header/header-option-simple.html @@ -0,0 +1,11 @@ +<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ + end }} class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"> + {{ if .Pre }} + <span {{ if and .Pre .Name}} class="mr-1" {{ end }}> + {{ partial "icon.html" .Pre }} + </span> + {{ end }} + <p class="text-base font-medium" title="{{ .Title }}"> + {{ .Name | markdownify | emojify }} + </p> +</a>
\ No newline at end of file diff --git a/themes/blowfish/layouts/partials/header/header-option.html b/themes/blowfish/layouts/partials/header/header-option.html new file mode 100644 index 0000000..2a27da7 --- /dev/null +++ b/themes/blowfish/layouts/partials/header/header-option.html @@ -0,0 +1,5 @@ +{{ if .HasChildren }} + {{ partial "header/header-option-nested.html" . }} +{{ else }} + {{ partial "header/header-option-simple.html" . }} +{{ end }} |