summaryrefslogtreecommitdiff
path: root/themes/blowfish/layouts/partials/header
diff options
context:
space:
mode:
authorChristoph Cullmann <cullmann@kde.org>2024-04-28 17:33:09 +0200
committerChristoph Cullmann <cullmann@kde.org>2024-04-28 17:33:09 +0200
commite77051ccc4b47951bfa4fde2be436b1bb2fb113b (patch)
treef0b75ee3521da9c8cd39dac4359212348f70e4e8 /themes/blowfish/layouts/partials/header
parent4b355837824ac2422d371acef790f0f4249255c7 (diff)
use https://github.com/nunocoracao/blowfish.git
Diffstat (limited to 'themes/blowfish/layouts/partials/header')
-rw-r--r--themes/blowfish/layouts/partials/header/basic.html178
-rw-r--r--themes/blowfish/layouts/partials/header/fixed-fill-blur.html14
-rw-r--r--themes/blowfish/layouts/partials/header/fixed-fill.html6
-rw-r--r--themes/blowfish/layouts/partials/header/fixed-gradient.html15
-rw-r--r--themes/blowfish/layouts/partials/header/fixed.html14
-rw-r--r--themes/blowfish/layouts/partials/header/header-mobile-option-nested.html31
-rw-r--r--themes/blowfish/layouts/partials/header/header-mobile-option-simple.html13
-rw-r--r--themes/blowfish/layouts/partials/header/header-mobile-option.html5
-rw-r--r--themes/blowfish/layouts/partials/header/header-option-nested.html35
-rw-r--r--themes/blowfish/layouts/partials/header/header-option-simple.html11
-rw-r--r--themes/blowfish/layouts/partials/header/header-option.html5
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 }}