Update package.json

added new fixed header

assets/css/compiled/main.css

@@ -1599,6 +1599,14 @@ select {
   margin-right: -0.5rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -1651,8 +1659,16 @@ select {
   height: 2rem;
 }
 
-.h-\[300px\] {
+.h-\[120px\] {
-  height: 300px;
+  height: 120px;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[250px\] {
+  height: 250px;
 }
 
 .h-\[900px\] {
@@ -1683,6 +1699,10 @@ select {
   min-height: 0px;
 }
 
+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1755,6 +1775,10 @@ select {
   max-width: 5rem;
 }
 
+.max-w-\[64rem\] {
+  max-width: 64rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -2154,6 +2178,14 @@ select {
   padding-bottom: 1rem;
 }
 
+.pl-\[24px\] {
+  padding-left: 24px;
+}
+
+.pr-\[24px\] {
+  padding-right: 24px;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2311,6 +2343,11 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-800), var(--tw-text-opacity));
+}
+
 .text-neutral-200 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
@@ -2376,11 +2413,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.blur-xl {
-  --tw-blur: blur(24px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .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);
@@ -2393,6 +2425,12 @@ select {
           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-2xl {
+  --tw-backdrop-blur: blur(40px);
+  -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);
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3511,9 +3549,9 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-.dark .dark\:text-primary-300 {
+.dark .dark\:text-primary-200 {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
 }
 
 .dark .dark\:opacity-60 {
@@ -3670,6 +3708,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .md\:h-\[300px\] {
+    height: 300px;
+  }
+
   .md\:h-56 {
     height: 14rem;
   }
@@ -3713,6 +3755,10 @@ body:has(#menu-controller:checked) {
     top: 2.5rem;
   }
 
+  .lg\:top-\[140px\] {
+    top: 140px;
+  }
+
   .lg\:left-0 {
     left: 0px;
   }
@@ -3755,6 +3801,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .lg\:h-\[350px\] {
+    height: 350px;
+  }
+
   .lg\:h-72 {
     height: 18rem;
   }

config/_default/params.toml

@@ -15,6 +15,9 @@ enableCodeCopy = true
 # mainSections = ["section1", "section2"]
 # robots = ""
 
+[header]
+  layout = "basic" # valid options: basic, fixed
+
 [footer]
  # showMenu = true
   showCopyright = true
@@ -31,6 +34,7 @@ enableCodeCopy = true
   showMoreLinkDest = "/posts"
   cardView = false
   cardViewScreenWidth = false
+  layoutBackgroundBlur = false # only used when layout equals background
 
 [article]
   showDate = true

exampleSite/config/_default/params.toml

@@ -15,6 +15,9 @@ enableCodeCopy = true
 mainSections = ["docs"]
 # robots = ""
 
+[header]
+  layout = "fixed" # valid options: basic, fixed
+
 [footer]
   showMenu = true
   showCopyright = true
@@ -31,7 +34,7 @@ mainSections = ["docs"]
   showMoreLinkDest = "docs"
   cardView = true
   cardViewScreenWidth = false
-
+  layoutBackgroundBlur = true # only used when layout equals background
 
 [article]
   showDate = false

exampleSite/content/docs/configuration/index.md

@@ -125,7 +125,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 
 <!-- prettier-ignore-start -->
 | Name                              | Default                | Description                                                                                                                                                                                                                                                                                                        |
-| ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| --------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `colorScheme`                     | `"blowfish"`           | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.                                                                                               |
 | `defaultAppearance`               | `"light"`              | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                                                                                            |
 | `autoSwitchAppearance`            | `true`                 | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                                                                                  |
@@ -148,6 +148,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `homepage.showMoreLinkDest`       | '/posts'               | The destination of the show more button.                                                                                                                                                                                                                                                                           |
 | `homepage.cardView`               | `false`                | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
 | `homepage.cardViewScreenWidth`    | `false`                | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
+| `homepage.layoutBackgroundBlur` | `false`                | Makes the background image in the homepage layout blur with the scroll                                                                                                                                                                                                                                             |
 | `article.showDate`                | `true`                 | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                        |
 | `article.showViews`               | `false`                | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                         |
 | `article.showLikes`               | `false`                | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                         |

exampleSite/layouts/partials/recent-articles-demo.html

@@ -16,12 +16,12 @@
     </span>
 </div>
 
-<div id="CardViewProse" class="hidden h-full">
+<div id="CardViewScreenWidth" class="">
-    <section class="w-full">
+    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
-        <div class="flex flex-wrap">
+        <div class="flex flex-wrap pl-8 pr-8">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
             .Site.Params.mainSections)).Pages }}
-            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
+            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
                 {{ partial "article-link-card.html" . }}
             </div>
             {{ end }}
@@ -29,12 +29,12 @@
     </section>
 </div>
 
-<div id="CardViewScreenWidth" class="">
+<div id="CardViewProse" class="hidden h-full">
-    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
+    <section class="w-full">
-        <div class="flex flex-wrap pl-8 pr-8">
+        <div class="flex flex-wrap">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
             .Site.Params.mainSections)).Pages }}
-            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
+            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
                 {{ partial "article-link-card.html" . }}
             </div>
             {{ end }}

i18n/id.yaml

@@ -59,3 +59,6 @@ sharing:
 
 shortcode:
   recent_articles: "Terbaru"
+
+recent:
+  show_more: "Tampilkan Lainnya"

i18n/ja.yaml

@@ -41,7 +41,7 @@ nav:
 search:
   open_button_title: "検索 (/)"
   close_button_title: "閉じる (Esc)"
-  input_placeholder: "Search"
+  input_placeholder: "検索"
 
 sharing:
   email: " Eメールを送る"
@@ -55,4 +55,4 @@ shortcode:
   recent_articles: "最近の記事"
 
 recent:
-  show_more: "もっと見せる"
+  show_more: "もっと見る"

layouts/_default/single.html

@@ -24,7 +24,7 @@
     {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
     .TableOfContents "<ul") }} 
     <div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
-      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
+      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if eq .Site.Params.header.layout "fixed" }} lg:top-[140px] {{ else }} lg:top-10 {{ end }}">
         {{ partial "toc.html" . }}
       </div>
       </div>

layouts/partials/article-link.html

@@ -1,6 +1,8 @@
-{{ $articleClasses := "flex flex-wrap article backdrop-blur" }}
+{{ $articleClasses := "flex flex-wrap article" }}
 {{ if .Site.Params.list.showCards }}
-{{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-md") " " }}
+{{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md") " " }}
+{{ else }}
+{{ $articleClasses = delimit (slice $articleClasses "") " " }}
 {{ end }}
 
 {{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}

layouts/partials/header/basic.html

@@ -122,30 +122,3 @@
         </label>
     </div>
 </div>
-
-
-<div id="mobile-menu"
-    class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
-    <ul
-        class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
-        <li class="mb-1">
-            <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">{{ partial "icon.html"
-                "xmark" }}</span>
-        </li>
-        {{ if .Site.Menus.main }}
-        {{ range .Site.Menus.main }}
-        <li class="mb-1">
-            <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                href="{{ .URL }}" title="{{ .Title }}">{{ .Name | markdownify | emojify }}</a>
-        </li>
-        {{ end }}
-        {{ end }}
-        {{ if .Site.Params.enableSearch | default false }}
-        <li>
-            <button id="search-button-mobile" class="text-base hover:text-primary-600 dark:hover:text-primary-400">
-                {{ partial "icon.html" "search" }}
-            </button>
-        </li>
-        {{ end }}
-    </ul>
-</div>

layouts/partials/header/fixed.html

@@ -0,0 +1,145 @@
+<div class="min-h-[148px]"></div>
+<div class="fixed inset-x-0 h-[120px] pl-[24px] pr-[24px] sbackdrop-blur-xl sshadown-2xl" 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] h-[100px] ml-auto mr-auto">
+            <div style="padding-left:0;padding-right:0"
+                class="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="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">
+
+                        <a href="{{ "" | relLangURL }}"
+                            class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
+                            | emojify }}</a>
+
+
+                    </nav>
+                    <div class="hidden md:flex items-center space-x-5 md:ml-12">
+
+                        {{ if .Site.Menus.main }}
+                        {{ range .Site.Menus.main }}
+                        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+                            ) }} target="_blank" {{ end }}
+                            class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                            {{ partial "icon.html" .Pre }}
+                            {{ if and .Pre .Name }} &nbsp; {{ end }}
+                            {{ .Name | markdownify | emojify }}
+                        </a>
+                        {{ end }}
+                        {{ end }}
+
+                        {{ partial "translations.html" . }}
+
+                        {{ if .Site.Params.enableSearch | default false }}
+                        <button id="search-button" 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 }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
+                            <button id="appearance-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 }}
+
+                    </div>
+                    <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"
+                            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" type="button" style="margin-right:5px">
+                            <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" />
+                        <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:25px;"
+                            class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
+                            <ul
+                                class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
+                                <li class="mb-1">
+                                    <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">{{
+                                        partial
+                                        "icon.html"
+                                        "xmark" }}</span>
+                                </li>
+
+                                {{ if .Site.Menus.main }}
+                                {{ range .Site.Menus.main }}
+                                <li class="mb-1">
+                                    <a {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+                                        target="_blank" {{ end }}
+                                        class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+                                        href="{{ .URL }}" title="{{ .Title }}">
+                                        {{ partial "icon.html" .Pre }}
+                                        {{ if and .Pre .Name }} &nbsp; {{ end }}
+                                        {{ .Name | markdownify | emojify }}
+                                    </a>
+                                </li>
+                                {{ end }}
+                                {{ end }}
+
+                            </ul>
+                        </div>
+                    </label>
+                </div>
+            </div>
+        </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>

layouts/partials/hero/background.html

@@ -3,7 +3,7 @@
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
 {{ with .Resize "1200x" }}
-<div id="hero" class="h-[300px]"></div>
+<div id="hero" class="h-[250px] md:h-[300px] lg:h-[350px]"></div>
 <div class="fixed inset-x-0 top-0 h-[900px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">
     <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
@@ -12,19 +12,12 @@
         class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
     </div>
 </div>
-<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-[900px] single_hero_background nozoom blur-xl"
+<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
-    style="background-image:url({{ .RelPermalink }});">
-    <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
-    </div>
-    <div
-        class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
-    </div>
-</div>
 <script>
     window.addEventListener('scroll', function (e) {
         var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
         var background_blur = document.getElementById('background-blur');
-        background_blur.style.opacity = (scroll / 150.0)
+        background_blur.style.opacity = (scroll / 300)
     });
 </script>
 {{ end }}

layouts/partials/home/background.html

@@ -39,7 +39,7 @@
                         <div class="flex flex-wrap">
                             {{ range $links := . }}
                             {{ range $name, $url := $links }}
-                            <a class="px-1 hover:text-primary-400 text-primary-700 dark:text-primary-300" href="{{ $url }}" target="_blank"
+                            <a class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200" href="{{ $url }}" target="_blank"
                                 aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
                                 "icon.html" $name }}</a>
                             {{ end }}
@@ -56,3 +56,13 @@
 <section>
     {{ partial "recent-articles.html" . }}
 </section>
+{{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
+<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
+<script>
+    window.addEventListener('scroll', function (e) {
+        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        var background_blur = document.getElementById('background-blur');
+        background_blur.style.opacity = (scroll / 300)
+    });
+</script>
+{{ end }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "preinstall": "rimraf assets/vendor",