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,12 +1659,20 @@ select {
   height: 2rem;
 }
 
-.h-\[200px\] {
+.h-\[120px\] {
-  height: 200px;
+  height: 120px;
 }
 
-.h-\[700px\] {
+.h-\[100px\] {
-  height: 700px;
+  height: 100px;
+}
+
+.h-\[250px\] {
+  height: 250px;
+}
+
+.h-\[900px\] {
+  height: 900px;
 }
 
 .h-36 {
@@ -1683,6 +1699,10 @@ select {
   min-height: 0px;
 }
 
+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1743,6 +1763,10 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1751,6 +1775,10 @@ select {
   max-width: 5rem;
 }
 
+.max-w-\[64rem\] {
+  max-width: 64rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -2150,6 +2178,14 @@ select {
   padding-bottom: 1rem;
 }
 
+.pl-\[24px\] {
+  padding-left: 24px;
+}
+
+.pr-\[24px\] {
+  padding-right: 24px;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2307,9 +2343,9 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
-.text-primary-300 {
+.text-primary-800 {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
 .text-neutral-200 {
@@ -2322,6 +2358,11 @@ select {
   color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
 }
 
+.text-primary-300 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
+}
+
 .\!no-underline {
   text-decoration-line: none !important;
 }
@@ -2384,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);
@@ -3065,7 +3112,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;
@@ -3502,12 +3549,13 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-.dark .dark\:opacity-60 {
+.dark .dark\:text-primary-200 {
-  opacity: 0.6;
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
 }
 
-.dark .dark\:mix-blend-multiply {
+.dark .dark\:opacity-60 {
-  mix-blend-mode: multiply;
+  opacity: 0.6;
 }
 
 .dark .dark\:hover\:bg-primary-900:hover {
@@ -3660,6 +3708,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .md\:h-\[300px\] {
+    height: 300px;
+  }
+
   .md\:h-56 {
     height: 14rem;
   }
@@ -3703,6 +3755,10 @@ body:has(#menu-controller:checked) {
     top: 2.5rem;
   }
 
+  .lg\:top-\[140px\] {
+    top: 140px;
+  }
+
   .lg\:left-0 {
     left: 0px;
   }
@@ -3745,6 +3801,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .lg\:h-\[350px\] {
+    height: 350px;
+  }
+
   .lg\:h-72 {
     height: 18rem;
   }

assets/css/main.css

@@ -348,7 +348,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;

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/assets/js/home.js

@@ -35,8 +35,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });
 
 var list_config = [
-  "CardViewProse",
   "CardViewScreenWidth",
+  "CardViewProse",
   "NormalView"
 ]
 
@@ -57,10 +57,6 @@ function switchList() {
   var currentDiv = document.getElementById(list_config[currentConfig])
   const configCode = document.querySelectorAll("code[id=config]");
 
-  console.log(currentConfig)
-  console.log(oldDiv)
-  console.log(currentDiv)
-
   currentDiv.style.display = "block";
   oldDiv.style.display = "none";
 

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,7 +16,20 @@
     </span>
 </div>
 
-<div id="CardViewProse" class="">
+<div id="CardViewScreenWidth" class="">
+    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
+        <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 xl:w-1/4 2xl:w-1/5">
+                {{ partial "article-link-card.html" . }}
+            </div>
+            {{ end }}
+        </div>
+    </section>
+</div>
+
+<div id="CardViewProse" class="hidden h-full">
     <section class="w-full">
         <div class="flex flex-wrap">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
@@ -28,18 +41,7 @@
         </div>
     </section>
 </div>
-<div id="CardViewScreenWidth" class="hidden h-full">
+
-    <section class="relative w-screen" style="left: calc(-50vw + 50%);">
-        <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 xl:w-1/4 2xl:w-1/5">
-                {{ partial "article-link-card.html" . }}
-            </div>
-            {{ end }}
-        </div>
-    </section>
-</div>
 <div id="NormalView" class="hidden h-full">
     <section class="space-y-10 w-full">
         {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"

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,12 +24,12 @@
     {{ 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 backdrop-blur">
+      <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>
       {{ end }}
-      <div class="min-w-0 min-h-0 max-w-prose backdrop-blur">
+      <div class="min-w-0 min-h-0 max-w-prose">
         {{ partial "series.html" . }}
         {{ .Content | emojify }}
         </br></br>

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,15 +3,22 @@
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
 {{ with .Resize "1200x" }}
-<div id="hero" class="h-[200px]"></div>
+<div id="hero" class="h-[250px] md:h-[300px] lg:h-[350px]"></div>
-<div class="fixed inset-x-0 top-0 h-[700px] single_hero_background nozoom"
+<div class="fixed inset-x-0 top-0 h-[900px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">
-    <div
+    <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
-        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal dark:mix-blend-multiply">
     </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>
+<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 }}
 {{- 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-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 }}

layouts/partials/recent-articles.html

@@ -8,7 +8,7 @@
 
 {{ if .Site.Params.homepage.cardView | default false }}
 {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-<section class="relative w-screen" style="left: calc(-50vw + 50%);">
+<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
   <div class="flex flex-wrap pl-8 pr-8">
     {{ else }}
     <section class="w-full">

package.json

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