small fix on background

Merge pull request #218 from nunocoracao/217-search-modal-z-index
Fixed z-index of search modal
2026-01-30 16:31:52 +01:00 · 2022-11-06 23:16:52 +00:00 · 2022-11-06 23:11:19 +00:00 · 2022-11-06 23:11:00 +00:00 · 2022-11-06 23:04:39 +00:00 · 2022-11-06 23:04:21 +00:00
83 changed files with 1035 additions and 301 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,11 @@
 # Blowfish

 [![Blowfish Docs Deploy](https://github.com/nunocoracao/blowfish/actions/workflows/pages.yml/badge.svg)](https://github.com/nunocoracao/blowfish/actions/workflows/pages.yml)
+[![Minimum Hugo Version](https://img.shields.io/static/v1?label=min-HUGO-version&message=0.87.0&color=blue&logo=hugo)](https://github.com/gohugoio/hugo/releases/tag/v0.87.0)
+[![GitHub](https://img.shields.io/github/license/nunocoracao/blowfish)](https://github.com/nunocoracao/blowfish/blob/main/LICENSE)
+[![Blowfish](https://img.shields.io/badge/Hugo--Themes-@Blowfish-blue)](https://themes.gohugo.io/themes/blowfish/)
+![code-size](https://img.shields.io/github/languages/code-size/nunocoracao/blowfish)
+

 Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohugo.io). It's built using Tailwind CSS with a clean and minimalist design that prioritises to your content. The theme is a fork of [Congo](https://github.com/jpanther/congo).

--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1413,16 +1413,16 @@ select {
  top: calc(100vh - 5.5rem);
 }

-.top-20 {
-  top: 5rem;
-}
-
 .top-0 {
  top: 0px;
 }

-.z-50 {
-  z-index: 50;
+.right-0 {
+  right: 0px;
+}
+
+.top-20 {
+  top: 5rem;
 }

 .z-10 {
@@ -1441,6 +1441,10 @@ select {
  margin: auto;
 }

+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-1 {
  margin: 0.25rem;
 }
@@ -1491,14 +1495,22 @@ select {
  margin-bottom: 3rem;
 }

-.mt-0 {
-  margin-top: 0px;
+.mt-5 {
+  margin-top: 1.25rem;
 }

 .mt-12 {
  margin-top: 3rem;
 }

+.mt-0 {
+  margin-top: 0px;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mt-10 {
  margin-top: 2.5rem;
 }
@@ -1507,10 +1519,6 @@ select {
  margin-top: 1.5rem;
 }

-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .mt-1 {
  margin-top: 0.25rem;
 }
@@ -1575,10 +1583,6 @@ select {
  margin-top: 0.5rem;
 }

-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .\!mb-9 {
  margin-bottom: 2.25rem !important;
 }
@@ -1591,6 +1595,14 @@ select {
  margin-right: -0.5rem;
 }

+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 .mb-0 {
  margin-bottom: 0px;
 }
@@ -1643,8 +1655,20 @@ select {
  height: 2rem;
 }

-.h-\[300px\] {
-  height: 300px;
+.h-\[120px\] {
+  height: 120px;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[150px\] {
+  height: 150px;
+}
+
+.h-\[800px\] {
+  height: 800px;
 }

 .h-36 {
@@ -1655,6 +1679,10 @@ select {
  height: 50%;
 }

+.h-\[1000px\] {
+  height: 1000px;
+}
+
 .h-48 {
  height: 12rem;
 }
@@ -1667,10 +1695,18 @@ select {
  min-height: 0px;
 }

+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-12 {
  width: 3rem;
 }

+.w-screen {
+  width: 100vw;
+}
+
 .w-full {
  width: 100%;
 }
@@ -1683,10 +1719,6 @@ select {
  width: 6rem;
 }

-.w-screen {
-  width: 100vw;
-}
-
 .w-8 {
  width: 2rem;
 }
@@ -1699,6 +1731,10 @@ select {
  min-width: 0px;
 }

+.min-w-full {
+  min-width: 100%;
+}
+
 .min-w-\[1\.8rem\] {
  min-width: 1.8rem;
 }
@@ -1723,6 +1759,10 @@ select {
  max-width: 65ch;
 }

+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
  max-width: 48rem;
 }
@@ -1731,6 +1771,10 @@ select {
  max-width: 5rem;
 }

+.max-w-\[64rem\] {
+  max-width: 64rem;
+}
+
 .max-w-xl {
  max-width: 36rem;
 }
@@ -1844,14 +1888,14 @@ select {
  border-radius: 9999px;
 }

-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded {
  border-radius: 0.25rem;
 }

+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-lg {
  border-radius: 0.5rem;
 }
@@ -1889,16 +1933,16 @@ select {
  border-style: dotted;
 }

-.border-neutral-400 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
-}
-
 .border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
 }

+.border-neutral-400 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
+}
+
 .border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
@@ -1978,12 +2022,6 @@ select {
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }

-.from-neutral-100 {
-  --tw-gradient-from: rgba(var(--color-neutral-100), 1);
-  --tw-gradient-to: rgba(var(--color-neutral-100), 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-primary-500 {
  --tw-gradient-from: rgba(var(--color-primary-500), 1);
  --tw-gradient-to: rgba(var(--color-primary-500), 0);
@@ -1994,6 +2032,10 @@ select {
  --tw-gradient-to: transparent;
 }

+.to-neutral {
+  --tw-gradient-to: rgba(var(--color-neutral), 1);
+}
+
 .to-secondary-700 {
  --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
@@ -2055,6 +2097,11 @@ select {
  padding-right: 0.5rem;
 }

+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
@@ -2095,6 +2142,14 @@ select {
  padding-bottom: 4rem;
 }

+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
 .pt-8 {
  padding-top: 2rem;
 }
@@ -2103,6 +2158,14 @@ select {
  padding-top: 0.75rem;
 }

+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pl-2 {
  padding-left: 0.5rem;
 }
@@ -2111,8 +2174,12 @@ select {
  padding-bottom: 1rem;
 }

-.pt-4 {
-  padding-top: 1rem;
+.pl-\[24px\] {
+  padding-left: 24px;
+}
+
+.pr-\[24px\] {
+  padding-right: 24px;
 }

 .pt-16 {
@@ -2272,9 +2339,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 {
@@ -2287,6 +2354,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;
 }
@@ -2303,6 +2375,14 @@ select {
  opacity: 0;
 }

+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .mix-blend-normal {
  mix-blend-mode: normal;
 }
@@ -2311,6 +2391,12 @@ select {
  mix-blend-mode: multiply;
 }

+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2335,6 +2421,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);
@@ -3015,6 +3107,13 @@ body:has(#menu-controller:checked) {
  background-position:center;
 }

+.thumbnail_card {
+  height: 250px;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
 .single_hero_basic {
  background-repeat:no-repeat;
  background-size:cover;
@@ -3045,6 +3144,14 @@ body:has(#menu-controller:checked) {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }

+.anchor {
+  display: block;
+  position: relative;
+  top: -100px;
+  height: 0px;
+  visibility: hidden;
+}
+
@media (min-width: 640px) {
  .thumbnail {
    min-width: 100%;
@@ -3366,8 +3473,8 @@ body:has(#menu-controller:checked) {
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }

-.dark .dark\:to-neutral-300 {
-  --tw-gradient-to: rgba(var(--color-neutral-300), 1);
+.dark .dark\:to-neutral-800 {
+  --tw-gradient-to: rgba(var(--color-neutral-800), 1);
 }

 .dark .dark\:to-secondary-800 {
@@ -3446,8 +3553,13 @@ body:has(#menu-controller:checked) {
  color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }

-.dark .dark\:mix-blend-multiply {
-  mix-blend-mode: multiply;
+.dark .dark\:text-primary-200 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
+}
+
+.dark .dark\:opacity-60 {
+  opacity: 0.6;
 }

 .dark .dark\:hover\:bg-primary-900:hover {
@@ -3600,6 +3712,10 @@ body:has(#menu-controller:checked) {
    display: none;
  }

+  .md\:h-\[200px\] {
+    height: 200px;
+  }
+
  .md\:h-56 {
    height: 14rem;
  }
@@ -3643,6 +3759,10 @@ body:has(#menu-controller:checked) {
    top: 2.5rem;
  }

+  .lg\:top-\[140px\] {
+    top: 140px;
+  }
+
  .lg\:left-0 {
    left: 0px;
  }
@@ -3771,4 +3891,10 @@ body:has(#menu-controller:checked) {
  .xl\:w-1\/4 {
    width: 25%;
  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:w-1\/5 {
+    width: 20%;
+  }
 }
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -347,6 +347,13 @@ body:has(#menu-controller:checked) {
  background-position:center;
 }

+.thumbnail_card {
+  height: 250px;
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+}
+
 .single_hero_basic {
  background-repeat:no-repeat;
  background-size:cover; 
@@ -376,6 +383,14 @@ body:has(#menu-controller:checked) {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }

+.anchor {
+  display: block;
+  position: relative;
+  top: -100px;
+  height: 0px;
+  visibility: hidden;
+}
+
@screen sm {
  .thumbnail {
    min-width: 100%;
--- a/assets/icons/envelope.svg
+++ b/assets/icons/envelope.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
--- a/config/_default/params.toml
+++ b/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
@@ -29,6 +32,9 @@ enableCodeCopy = true
  showRecentItems = 5
  showMoreLink = false
  showMoreLinkDest = "/posts"
+  cardView = false
+  cardViewScreenWidth = false
+  layoutBackgroundBlur = false # only used when layout equals background

 [article]
  showDate = true
@@ -61,6 +67,8 @@ enableCodeCopy = true
  showTableOfContents = false
  showCards = false
  groupByYear = true
+  cardView = false
+  cardViewScreenWidth = false

 [sitemap]
  excludedKinds = []
--- a/exampleSite/assets/js/home.js
+++ b/exampleSite/assets/js/home.js
@@ -2,8 +2,8 @@ var layouts = [
  "background",
  "hero",
  "profile",
-  "card",
-  "page"
+  "page",
+  "card"
 ]

 var currentLayout = 0
@@ -33,3 +33,44 @@ window.addEventListener("DOMContentLoaded", (event) => {
    })
  );
 });
+
+var list_config = [
+  "CardViewScreenWidth",
+  "CardViewProse",
+  "NormalView"
+]
+
+var titles = {
+  "CardViewProse" : "card view with constrained width",
+  "CardViewScreenWidth" : "card view with full width",
+  "NormalView" : "standard list view"
+}
+
+var currentConfig = 0
+
+function switchList() {
+
+  var old = currentConfig
+  currentConfig = currentConfig == list_config.length - 1 ? 0 : currentConfig + 1
+
+  var oldDiv = document.getElementById(list_config[old])
+  var currentDiv = document.getElementById(list_config[currentConfig])
+  const configCode = document.querySelectorAll("code[id=config]");
+
+  currentDiv.style.display = "block";
+  oldDiv.style.display = "none";
+
+  configCode.forEach(function (el) {
+    el.innerText = titles[list_config[currentConfig]];
+  });
+
+}
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  document.querySelectorAll("#switch-config-button").forEach((button) =>
+    button.addEventListener("click", function (e) {
+      e.preventDefault();
+      switchList();
+    })
+  );
+});
--- a/exampleSite/config/_default/menus.en.toml
+++ b/exampleSite/config/_default/menus.en.toml
@@ -20,22 +20,27 @@
  pageRef = "samples"
  weight = 20

+[[main]]
+  name = "Showcase"
+  pageRef = "examples"
+  weight = 30
+
 [[main]]
  name = "Users"
  pageRef = "users"
-  weight = 30
+  weight = 40

 [[main]]
  identifier = "github"
  pre = "github"
  url = "https://github.com/nunocoracao/blowfish"
-  weight = 40
+  weight = 50

 [[main]]
  identifier = "twitter"
  pre = "twitter"
  url = "https://twitter.com/burufugu"
-  weight = 50
+  weight = 60


 # -- Footer Menu --
--- a/exampleSite/config/_default/params.toml
+++ b/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
@@ -25,10 +28,13 @@ mainSections = ["docs"]
 [homepage]
  layout = "custom" # valid options: page, profile, hero, card, background, custom
  homepageImage = "/img/iceland.jpg" # used in: hero, and card
-  showRecent = true
-  showRecentItems = 5
+  showRecent = false
+  showRecentItems = 10
  showMoreLink = true
  showMoreLinkDest = "docs"
+  cardView = true
+  cardViewScreenWidth = false
+  layoutBackgroundBlur = true # only used when layout equals background

 [article]
  showDate = false
@@ -56,11 +62,15 @@ mainSections = ["docs"]
  sharingLinks = [ "linkedin", "twitter", "whatsapp", "pinterest", "reddit", "facebook", "email"]

 [list]
+  showHero = true
+  heroStyle = "background" # valid options: basic, big, background
  showBreadcrumbs = false
-  showSummary = true
+  showSummary = false
  showTableOfContents = true
  showCards = true
  groupByYear = false
+  cardView = true
+  cardViewScreenWidth = false

 [sitemap]
  excludedKinds = ["taxonomy","term"]
--- a/exampleSite/content/.Ulysses-Settings.plist
+++ b/exampleSite/content/.Ulysses-Settings.plist
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>defaultPathExtensions</key>
-	<string>md</string>
-	<key>enforceFencedCodeBlocks</key>
-	<false/>
-	<key>sheetFormat</key>
-	<string>foreign</string>
-	<key>useInlineLinks</key>
-	<false/>
-</dict>
-</plist>
--- a/exampleSite/content/docs/_index.md
+++ b/exampleSite/content/docs/_index.md
@@ -12,8 +12,6 @@ cascade:
 Simple, yet powerful. Learn how to use Blowfish and its features.
 {{< /lead >}}

-![Featured Blowfish image](featured.png)
-
 This section contains everything you need to know about Blowfish. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Blowfish can do.

 ---
--- a/exampleSite/content/docs/blowfish.png
+++ b/exampleSite/content/docs/blowfish.png
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -30,17 +30,17 @@ The site configuration is managed through the `config/_default/config.toml` file
 Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `outputs.home` refers to `[outputs] home`).

 <!-- prettier-ignore-start -->
-|Name|Default|Description|
-|---|---|---|
-|`theme`|`"blowfish"`|When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `blowfish` for the theme to function.|
-|`baseURL`|_Not set_|The URL to the root of the website.|
-|`defaultContentLanguage`|`"en"`|This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes.|
-|`enableRobotsTXT`|`true`|When enabled, a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made `robots.txt`, set to `false` and place your file in the `static` directory. For complete control, you may provide a [custom layout]({{< ref "content-examples#custom-layouts" >}}) to generate this file.|
-|`paginate`|`10`|The number of articles listed on each page of the article listing.|
-|`summaryLength`|`0`|The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.|
-|`outputs.home`|`["HTML", "RSS", "JSON"]`|The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly.|
-|`permalinks`|_Not set_|Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.|
-|`taxonomies`|_Not set_|Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.|
+| Name                     | Default                   | Description                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`                  | `"blowfish"`              | When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `blowfish` for the theme to function.                                                                                                                                                                                                                     |
+| `baseURL`                | _Not set_                 | The URL to the root of the website.                                                                                                                                                                                                                                                                                                                                          |
+| `defaultContentLanguage` | `"en"`                    | This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes.                                                                                                                                                                                                 |
+| `enableRobotsTXT`        | `true`                    | When enabled, a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made `robots.txt`, set to `false` and place your file in the `static` directory. For complete control, you may provide a [custom layout]({{< ref "content-examples#custom-layouts" >}}) to generate this file. |
+| `paginate`               | `10`                      | The number of articles listed on each page of the article listing.                                                                                                                                                                                                                                                                                                           |
+| `summaryLength`          | `0`                       | The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.                                                                                                                                |
+| `outputs.home`           | `["HTML", "RSS", "JSON"]` | The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly.                                                                                                                                                                                                                                         |
+| `permalinks`             | _Not set_                 | Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.                                                                                                                                                                                                                                                                 |
+| `taxonomies`             | _Not set_                 | Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.                                                                                                                                                                                                                                                      |
 <!-- prettier-ignore-end -->

 ## Thumbnails
@@ -55,26 +55,27 @@ Blowfish is optimised for full multilingual websites and theme assets are transl

 The theme currently supports the following languages by default:

-| Language                               | Code    |
-| -------------------------------------- | ------- |
-| :gb: English                           | `en`    |
-| :bangladesh: Bengali                   | `bn`    |
-| :cn: Simplified Chinese (China)        | `zh-cn` |
-| :taiwan: Traditional Chinese (Taiwan)  | `zh-tw` |
-| :finland: Finnish                      | `fi`    |
-| :fr: French                            | `fr`    |
-| :de: German                            | `de`    |
-| :israel: Hebrew                        | `he`    |
-| :hungary: Hungarian                    | `hu`    |
-| :it: Italian                           | `it`    |
-| :jp: Japanese                          | `ja`    |
-| :brazil: Portuguese (Brazil)           | `pt-br` |
-| :portugal: Portuguese (Portugal)       | `pt-pt` |
-| :poland: Polish                        | `pl`    |
-| :romania: Romanian                     | `ro`    |
-| :es: Spanish (Spain)                   | `es`    |
-| :tr: Turkish                           | `tr`    |
-| 🇭🇷 Croatian                          | `hr`    |
+| Language                              | Code    |
+| ------------------------------------- | ------- |
+| :gb: English                          | `en`    |
+| :bangladesh: Bengali                  | `bn`    |
+| :cn: Simplified Chinese (China)       | `zh-cn` |
+| :taiwan: Traditional Chinese (Taiwan) | `zh-tw` |
+| :finland: Finnish                     | `fi`    |
+| :fr: French                           | `fr`    |
+| :de: German                           | `de`    |
+| :israel: Hebrew                       | `he`    |
+| :hungary: Hungarian                   | `hu`    |
+| :it: Italian                          | `it`    |
+| :jp: Japanese                         | `ja`    |
+| :brazil: Portuguese (Brazil)          | `pt-br` |
+| :portugal: Portuguese (Portugal)      | `pt-pt` |
+| :poland: Polish                       | `pl`    |
+| :romania: Romanian                    | `ro`    |
+| :es: Spanish (Spain)                  | `es`    |
+| :tr: Turkish                          | `tr`    |
+| 🇭🇷 Croatian                            | `hr`    |
+| 🇮🇩 Indonesian                          | `id`    |

 The default translations can be overridden by creating a custom file in `i18n/[code].yaml` that contains the translation strings. You can also use this method to add new languages. If you'd like to share a new translation with the community, please [open a pull request](https://github.com/nunocoracao/blowfish/pulls).

@@ -89,23 +90,23 @@ The default file can be used as a template to create additional languages, or re
 {{< /alert >}}

 <!-- prettier-ignore-start -->
-|Name|Default|Description|
-|---|---|---|
-|`languageCode`|`"en"`|The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive.|
-|`languageName`|`"English"`|The name of the language.|
-|`displayName`|`"EN"`|The name used when the language appears on the website.|
-|`isoCode`|`"en"`|The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).|
-|`weight`|`1`|The weight determines the order of languages when building multilingual sites.|
-|`rtl`|`false`|Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.|
-|`dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
-|`title`|`"Blowfish"`|The title of the website. This will be displayed in the site header and footer.|
-|`description`|_Not set_|The website description. This will be used in the site metadata.|
-|`copyright`|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Blowfish will automatically generate a copyright string using the site `title`.|
-|`author.name`|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.|
-|`author.image`|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `assets/` folder.|
-|`author.headline`|_Not set_|A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.|
-|`author.bio`|_Not set_|A Markdown string containing the author's bio. It will be displayed in article footers.|
-|`author.links`|_Not set_|The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`.|
+| Name              | Default            | Description                                                                                                                                                                                                                                                                                                                 |
+| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `languageCode`    | `"en"`             | The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive.                      |
+| `languageName`    | `"English"`        | The name of the language.                                                                                                                                                                                                                                                                                                   |
+| `displayName`     | `"EN"`             | The name used when the language appears on the website.                                                                                                                                                                                                                                                                     |
+| `isoCode`         | `"en"`             | The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).                                                                                                                                                                                                 |
+| `weight`          | `1`                | The weight determines the order of languages when building multilingual sites.                                                                                                                                                                                                                                              |
+| `rtl`             | `false`            | Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.                                                                                                                        |
+| `dateFormat`      | `"2 January 2006"` | How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.                                                                                                                                                                           |
+| `title`           | `"Blowfish"`       | The title of the website. This will be displayed in the site header and footer.                                                                                                                                                                                                                                             |
+| `description`     | _Not set_          | The website description. This will be used in the site metadata.                                                                                                                                                                                                                                                            |
+| `copyright`       | _Not set_          | A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Blowfish will automatically generate a copyright string using the site `title`.                                                                                                                                 |
+| `author.name`     | _Not set_          | The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.                                                                                                                                                                                                          |
+| `author.image`    | _Not set_          | Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `assets/` folder.                                                                                                                                                                                                     |
+| `author.headline` | _Not set_          | A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.                                                                                                                                                                                                   |
+| `author.bio`      | _Not set_          | A Markdown string containing the author's bio. It will be displayed in article footers.                                                                                                                                                                                                                                     |
+| `author.links`    | _Not set_          | The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`. |
 <!-- prettier-ignore-end -->

 ### Menus
@@ -123,71 +124,79 @@ Blowfish provides a large number of configuration parameters that control how th
 Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details.

 <!-- 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`.|
-|`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|
-|`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.|
-|`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
-|`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
-|`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
-|`disableImageZoom`|`false`|Disables image zoom feature across all the images in the site.|
-|`footer.showMenu`|`true`|Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file.|
-|`footer.showCopyright`|`true`|Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).|
-|`footer.showThemeAttribution`|`true`|Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page).|
-|`footer.showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.|
-|`footer.showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.|
-|`homepage.layout`|`"profile"`|The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
-|`homepage.homepageImage`|_Not set_|Image to be used in `hero` and `card` layouts. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
-|`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.|
-|`homepage.showRecentItems`|5|How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.|
-|`homepage.showMoreLink`|'false'|Wether or not to display a show more link at the end of your posts that takes the user to a predefined place.|
-|`homepage.showMoreLinkDest`|'/posts'|The destination of the show more button.|
-|`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.|
-|`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.|
-|`article.showAuthor`|`true`|Whether or not the author box is displayed in the article footer.|
-|`article.showHero`|`true`|Whether the thumbnail image will be shown as a hero image within each article page.|
-|`heroStyle`|`basic`|Style to display the hero image, valid options are: `basic`, `big`, `background`.|
-|`article.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the article header.|
-|`article.showDraftLabel`|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.|
-|`article.showEdit`|`false`|Whether or not the link to edit the article content should be displayed.|
-|`article.editURL`|_Not set_|When `article.showEdit` is active, the URL for the edit link.|
-|`article.editAppendPath`|`true`|When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.|
-|`article.seriesOpened`|`false`|Whether or not the series module will be displayed open by default or not.|
-|`article.showHeadingAnchors`|`true`|Whether or not heading anchor links are displayed alongside headings within articles.|
-|`article.showPagination`|`true`|Whether or not the next/previous article links are displayed in the article footer.|
-|`article.invertPagination`|`false`|Whether or not to flip the direction of the next/previous article links.|
-|`article.showReadingTime`|`true`|Whether or not article reading times are displayed.|
-|`article.showTableOfContents`|`false`|Whether or not the table of contents is displayed on articles.|
-|`article.showTaxonomies`|`false`|Whether or not the taxonomies related to this article are displayed.|
-|`article.showAuthorsBadges`|`false`|Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.|
-|`article.showWordCount`|`false`|Whether or not article word counts are displayed.|
-|`article.showComments`|`false`|Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.|
-|`article.sharingLinks`|_Not set_|Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.|
-|`list.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the header on list pages.|
-|`list.showTableOfContents`|`false`|Whether or not the table of contents is displayed on list pages.|
-|`list.showSummary`|`false`|Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).|
-|`list.showCards`|`false`|Whether or not each article is displayed as a card or as simple inline text.|
-|`list.groupByYear`|`true`|Whether or not articles are grouped by year on list pages.|
-|`sitemap.excludedKinds`|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.|
-|`taxonomy.showTermCount`|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.|
-|`firebase.apiKey`|_Not set_|Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`firebase.authDomain`|_Not set_|Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`firebase.projectId`|_Not set_|Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`firebase.storageBucket`|_Not set_|Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`firebase.messagingSenderId`|_Not set_|Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`firebase.appId`|_Not set_|Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`firebase.measurementId`|_Not set_|Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
-|`fathomAnalytics.site`|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
-|`fathomAnalytics.domain`|_Not set_|If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.|
-|`verification.google`|_Not set_|The site verification string provided by Google to be included in the site metadata.|
-|`verification.bing`|_Not set_|The site verification string provided by Bing to be included in the site metadata.|
-|`verification.pinterest`|_Not set_|The site verification string provided by Pinterest to be included in the site metadata.|
-|`verification.yandex`|_Not set_|The site verification string provided by Yandex to be included in the site metadata.|
+| 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`.                                                                                                                                  |
+| `enableSearch`                  | `false`                | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.                                                                                             |
+| `enableCodeCopy`                | `false`                | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.                                                                  |
+| `logo`                          | _Not set_              | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.                                                                                                                                                          |
+| `mainSections`                  | _Not set_              | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.                                                                                                                                                                       |
+| `robots`                        | _Not set_              | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.                                                                             |
+| `disableImageZoom`              | `false`                | Disables image zoom feature across all the images in the site.                                                                                                                                                                                                                                                     |
+| `header.layout`                 | `"basic"`              | Defines the header for the entire site, supported values are `basic` and `fixed`.                                                                                                                                                                                                                                  |
+| `footer.showMenu`               | `true`                 | Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file.                                                                                                                                                                                        |
+| `footer.showCopyright`          | `true`                 | Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).                                                                                                                |
+| `footer.showThemeAttribution`   | `true`                 | Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page).                                                                                          |
+| `footer.showAppearanceSwitcher` | `false`                | Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.                                                                                                                                                                        |
+| `footer.showScrollToTop`        | `true`                 | When set to `true` the scroll to top arrow is displayed.                                                                                                                                                                                                                                                           |
+| `homepage.layout`               | `"profile"`            | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
+| `homepage.homepageImage`        | _Not set_              | Image to be used in `hero` and `card` layouts. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.                                                                                                                                                                             |
+| `homepage.showRecent`           | `false`                | Whether or not to display the recent articles list on the homepage.                                                                                                                                                                                                                                                |
+| `homepage.showRecentItems`      | 5                      | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.                                                                                                                                                                          |
+| `homepage.showMoreLink`         | 'false'                | Wether or not to display a show more link at the end of your posts that takes the user to a predefined place.                                                                                                                                                                                                      |
+| `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.                                                                                                                                                                                                         |
+| `article.showDateUpdated`       | `false`                | Whether or not the dates articles were updated are displayed.                                                                                                                                                                                                                                                      |
+| `article.showAuthor`            | `true`                 | Whether or not the author box is displayed in the article footer.                                                                                                                                                                                                                                                  |
+| `article.showHero`              | `false`                | Whether the thumbnail image will be shown as a hero image within each article page.                                                                                                                                                                                                                                |
+| `article.heroStyle`             | _Not set_              | Style to display the hero image, valid options are: `basic`, `big`, `background`.                                                                                                                                                                                                                                  |
+| `article.showBreadcrumbs`       | `false`                | Whether or not breadcrumbs are displayed in the article header.                                                                                                                                                                                                                                                    |
+| `article.showDraftLabel`        | `true`                 | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.                                                                                                                                                                                                              |
+| `article.showEdit`              | `false`                | Whether or not the link to edit the article content should be displayed.                                                                                                                                                                                                                                           |
+| `article.editURL`               | _Not set_              | When `article.showEdit` is active, the URL for the edit link.                                                                                                                                                                                                                                                      |
+| `article.editAppendPath`        | `true`                 | When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.                                                                                                                                                                          |
+| `article.seriesOpened`          | `false`                | Whether or not the series module will be displayed open by default or not.                                                                                                                                                                                                                                         |
+| `article.showHeadingAnchors`    | `true`                 | Whether or not heading anchor links are displayed alongside headings within articles.                                                                                                                                                                                                                              |
+| `article.showPagination`        | `true`                 | Whether or not the next/previous article links are displayed in the article footer.                                                                                                                                                                                                                                |
+| `article.invertPagination`      | `false`                | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                                                                           |
+| `article.showReadingTime`       | `true`                 | Whether or not article reading times are displayed.                                                                                                                                                                                                                                                                |
+| `article.showTableOfContents`   | `false`                | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                                                                     |
+| `article.showTaxonomies`        | `false`                | Whether or not the taxonomies related to this article are displayed.                                                                                                                                                                                                                                               |
+| `article.showAuthorsBadges`     | `false`                | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                                                       |
+| `article.showWordCount`         | `false`                | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                  |
+| `article.showComments`          | `false`                | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.                                                                                                                                                                                                       |
+| `article.sharingLinks`          | _Not set_              | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.                                                                                                                                                                                        |
+| `list.showHero`                 | `false`                | Whether the thumbnail image will be shown as a hero image within each list page.                                                                                                                                                                                                                                   |
+| `list.heroStyle`                | _Not set_              | Style to display the hero image, valid options are: `basic`, `big`, `background`.                                                                                                                                                                                                                                  |
+| `list.showBreadcrumbs`          | `false`                | Whether or not breadcrumbs are displayed in the header on list pages.                                                                                                                                                                                                                                              |
+| `list.showTableOfContents`      | `false`                | Whether or not the table of contents is displayed on list pages.                                                                                                                                                                                                                                                   |
+| `list.showSummary`              | `false`                | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).                                                     |
+| `list.showCards`                | `false`                | Whether or not each article is displayed as a card or as simple inline text.                                                                                                                                                                                                                                       |
+| `list.groupByYear`              | `true`                 | Whether or not articles are grouped by year on list pages.                                                                                                                                                                                                                                                         |
+| `list.cardView`                 | `false`                | Display lists as a gallery of cards.                                                                                                                                                                                                                                                                               |
+| `list.cardViewScreenWidth`      | `false`                | Enhance the width of card galleries in lists to take the full width available.                                                                                                                                                                                                                                     |
+| `sitemap.excludedKinds`         | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.                                                                                                                        |
+| `taxonomy.showTermCount`        | `true`                 | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.                                                                                                                                                                                                                 |
+| `firebase.apiKey`               | _Not set_              | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                                    |
+| `firebase.authDomain`           | _Not set_              | Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                                |
+| `firebase.projectId`            | _Not set_              | Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                                 |
+| `firebase.storageBucket`        | _Not set_              | Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                             |
+| `firebase.messagingSenderId`    | _Not set_              | Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                         |
+| `firebase.appId`                | _Not set_              | Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                                     |
+| `firebase.measurementId`        | _Not set_              | Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish                                                                                                                                             |
+| `fathomAnalytics.site`          | _Not set_              | The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.                                                                                                                                                                     |
+| `fathomAnalytics.domain`        | _Not set_              | If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.                                                                                                                                                                                                       |
+| `verification.google`           | _Not set_              | The site verification string provided by Google to be included in the site metadata.                                                                                                                                                                                                                               |
+| `verification.bing`             | _Not set_              | The site verification string provided by Bing to be included in the site metadata.                                                                                                                                                                                                                                 |
+| `verification.pinterest`        | _Not set_              | The site verification string provided by Pinterest to be included in the site metadata.                                                                                                                                                                                                                            |
+| `verification.yandex`           | _Not set_              | The site verification string provided by Yandex to be included in the site metadata.                                                                                                                                                                                                                               |
 <!-- prettier-ignore-end -->

 ## Other configuration files
--- a/exampleSite/content/docs/cover.jpg
+++ b/exampleSite/content/docs/cover.jpg
--- a/exampleSite/content/docs/homepage-layout/index.md
+++ b/exampleSite/content/docs/homepage-layout/index.md
@@ -82,4 +82,8 @@ The articles listed in this section are derived from the `mainSections` setting

 Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 

-[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
+
+## Card Gallery
+
+Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.
--- a/exampleSite/content/examples/_index.md
+++ b/exampleSite/content/examples/_index.md
@@ -0,0 +1,19 @@
+---
+title: "Showcase"
+description: "See what's possible with Blowfish."
+
+cascade:
+  showEdit: false
+  showReadingTime: false
+  showSummary: true
+  showLikes: false
+  showViews: false
+---
+
+{{< lead >}}
+See what's possible with Blowfish.
+{{< /lead >}}
+
+This section contains links to example templates and pages created using Blowfish to get you inspired.
+
+---
--- a/exampleSite/content/examples/blowfish-template-repo/_index.md
+++ b/exampleSite/content/examples/blowfish-template-repo/_index.md
@@ -0,0 +1,8 @@
+---
+title: "Blowfish Template - GitHub Repo"
+date: 2022-11-06
+externalUrl: "https://github.com/nunocoracao/blowfish_template"
+summary: "A simple template project to get you started. Blowfish theme already installed with a simple github pages action configured."
+---
+
+A simple template project to get you started. Blowfish theme already installed with a simple github pages action configured.
--- a/exampleSite/content/examples/blowfish-template-repo/cover.png
+++ b/exampleSite/content/examples/blowfish-template-repo/cover.png
--- a/exampleSite/content/examples/blowfish-template/_index.md
+++ b/exampleSite/content/examples/blowfish-template/_index.md
@@ -0,0 +1,8 @@
+---
+title: "Blowfish Template"
+date: 2022-11-06
+externalUrl: "https://nunocoracao.github.io/blowfish_template/"
+summary: "A simple template project to get you started. Blowfish theme already installed with a simple github pages action configured."
+---
+
+A simple template project to get you started. Blowfish theme already installed with a simple github pages action configured.
--- a/exampleSite/content/examples/blowfish-template/cover.png
+++ b/exampleSite/content/examples/blowfish-template/cover.png
--- a/exampleSite/content/examples/cover.jpg
+++ b/exampleSite/content/examples/cover.jpg
--- a/exampleSite/content/samples/_index.md
+++ b/exampleSite/content/samples/_index.md
@@ -4,7 +4,7 @@ description: "See what's possible with Blowfish."

 cascade:
  showEdit: false
-  showSummary: true
+  showSummary: false
 ---

 {{< lead >}}
--- a/exampleSite/content/samples/cover.jpg
+++ b/exampleSite/content/samples/cover.jpg
--- a/exampleSite/content/samples/icons/index.md
+++ b/exampleSite/content/samples/icons/index.md
@@ -35,6 +35,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | dribbble             | {{< icon dribbble >}}             |
 | edit                 | {{< icon edit >}}                 |
 | email                | {{< icon email >}}                |
+| envelope             | {{< icon envelope >}}             |
 | eye                  | {{< icon eye >}}                  |
 | facebook             | {{< icon facebook >}}             |
 | fire                 | {{< icon fire >}}                 |
--- a/exampleSite/content/samples/thumbnail_sample/index.md
+++ b/exampleSite/content/samples/thumbnail_sample/index.md
@@ -25,7 +25,7 @@ content
    └── featured.png
 ```

-Inside the article you can now add an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*`. Example below.
+Inside the article you can now add an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*`. Example below.

 ```shell
 content
--- a/exampleSite/content/users/_index.md
+++ b/exampleSite/content/users/_index.md
@@ -43,6 +43,7 @@ Real websites that are built with Blowfish.
 | [omarohn.de](https://omarohn.de)                                      | Personal site                |
 | [spelucin.me](https://spelucin.me)                                    | Personal site                |
 | [insidemordecai.com](https://insidemordecai.com)                      | Personal site                |
+| [sajayprakash.com](https://sajayprakash.com)                          | Personal site                |

 {{< alert >}}

--- a/exampleSite/content/users/cover.jpg
+++ b/exampleSite/content/users/cover.jpg
--- a/exampleSite/layouts/partials/home/custom.html
+++ b/exampleSite/layouts/partials/home/custom.html
@@ -1,17 +1,20 @@
 {{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
-<div id="background" class="">
+<div id="background">
  {{ partial "partials/home/background.html" . }}
 </div>
-<div id="hero" class="hidden h-full">
+<div id="hero" style="display:none">
  {{ partial "partials/home/hero.html" . }}
 </div>
-<div id="profile" class="hidden h-full">
+<div id="profile" style="display:none">
  {{ partial "partials/home/profile.html" . }}
 </div>
-<div id="card" class="hidden h-full">
+<div id="card" style="display:none">
  {{ partial "partials/home/card.html" . }}
 </div>
-<div id="page" class="hidden h-full">
+<div id="page" style="display:none">
  {{ partial "partials/home/page.html" . }}
 </div>
+<section>
+  {{ partial "recent-articles-demo.html" . }}
+</section>
 <script defer type="text/javascript" src="{{ $jsHome.RelPermalink }}" integrity="{{ $jsHome.Data.Integrity }}"></script>
--- a/exampleSite/layouts/partials/recent-articles-demo.html
+++ b/exampleSite/layouts/partials/recent-articles-demo.html
@@ -0,0 +1,66 @@
+{{ $recentArticles := 5 }}
+{{ $showMoreLinkDest := "/posts" }}
+{{ if index .Site.Params.homepage "showRecentItems" }}
+{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
+{{ end }}
+
+<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
+
+<div class="flex mb-6 px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
+    <span class="flex items-center justify-between grow dark:text-neutral-300">
+        <span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code id="config">card view with constrained width</code></span>
+        <button id="switch-config-button"
+            class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
+            Switch config &orarr;
+        </button>
+    </span>
+</div>
+
+<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"
+            .Site.Params.mainSections)).Pages }}
+            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
+                {{ 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"
+        .Site.Params.mainSections)).Pages
+        }}
+        {{ partial "article-link.html" . }}
+        {{ end }}
+    </section>
+</div>
+
+{{ if .Site.Params.homepage.showMoreLink | default false }}
+{{ if index .Site.Params.homepage "showRecentItems" }}
+{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
+{{ end }}
+<div class="mt-10 flex justify-center">
+    <a href="{{ $showMoreLinkDest }}">
+        <button
+            class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
+            More</button>
+    </a>
+</div>
+{{ end }}
--- a/exampleSite/resources/_gen/images/docs/configuration/featured_hu61945c9a50a7e783444cb54fb71dc68a_650977_2200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/configuration/featured_hu61945c9a50a7e783444cb54fb71dc68a_650977_2200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/docs/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
--- a/exampleSite/resources/_gen/images/docs/feature_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/docs/feature_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
--- a/exampleSite/resources/_gen/images/docs/featured_hud8adc593272aed8f1224d3593fe9b187_99792_1200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/featured_hud8adc593272aed8f1224d3593fe9b187_99792_1200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/front-matter/featured_hu2d8098f125aeb5b866c985ce18317fa7_5037509_2000x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/front-matter/featured_hu2d8098f125aeb5b866c985ce18317fa7_5037509_2000x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/getting-started/featured_hu7b932db01f62f5127910b65e3cd14f9d_599809_2200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/getting-started/featured_hu7b932db01f62f5127910b65e3cd14f9d_599809_2200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/homepage-layout/featured_hu2b64bd3fbe5e1f5f3d9d27abc9d45f1e_648252_2200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/homepage-layout/featured_hu2b64bd3fbe5e1f5f3d9d27abc9d45f1e_648252_2200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/installation/featured_hua34c938079c0c05729a2a4d4783f7807_634706_2000x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/installation/featured_hua34c938079c0c05729a2a4d4783f7807_634706_2000x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/installation/featured_hua34c938079c0c05729a2a4d4783f7807_634706_2200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/installation/featured_hua34c938079c0c05729a2a4d4783f7807_634706_2200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/multi-author/featured_hub711b3bcf9ec72021fe99f7bb1f650e4_637127_2200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/multi-author/featured_hub711b3bcf9ec72021fe99f7bb1f650e4_637127_2200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/docs/welcome/featured_hu6c1a40751b0ecb38722eba3ab5726016_6942334_2200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/docs/welcome/featured_hu6c1a40751b0ecb38722eba3ab5726016_6942334_2200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/example/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/example/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
--- a/copy/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_1200x0_resize_box_3.png
+++ b/copy/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_1200x0_resize_box_3.png
--- a/copy/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_600x0_resize_box_3.png
+++ b/copy/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_600x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_1200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_1200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_600x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_600x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hud8adc593272aed8f1224d3593fe9b187_99792_1200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hud8adc593272aed8f1224d3593fe9b187_99792_1200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hud8adc593272aed8f1224d3593fe9b187_99792_600x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/examples/blowfish-template-repo/cover_hud8adc593272aed8f1224d3593fe9b187_99792_600x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/blowfish-template/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_1200x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/examples/blowfish-template/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_1200x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/blowfish-template/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_600x0_resize_box_3.png
+++ b/exampleSite/resources/_gen/images/examples/blowfish-template/cover_hu4592ac3fe4dd4ca45e75cc0313416524_51117_600x0_resize_box_3.png
--- a/exampleSite/resources/_gen/images/examples/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/examples/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
--- a/exampleSite/resources/_gen/images/samples/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/samples/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
--- a/exampleSite/resources/_gen/images/users/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/users/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_1200x0_resize_q75_box.jpg
--- a/exampleSite/resources/_gen/images/users/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_600x0_resize_q75_box.jpg
+++ b/exampleSite/resources/_gen/images/users/cover_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_600x0_resize_q75_box.jpg
--- a/i18n/bn.yaml
+++ b/i18n/bn.yaml
@@ -52,4 +52,4 @@ sharing:
  twitter: "ট্যুইট করুন"

 shortcode:
-  recent_articles: "সাম্প্রতিক"
+  recent_articles: "সাম্প্রতিক"
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -53,3 +53,7 @@ sharing:

 shortcode:
  recent_articles: "Neue Beiträge"
+
+
+recent:
+  show_more: "Zeig Mehr"
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -59,3 +59,6 @@ sharing:

 shortcode:
  recent_articles: "Recent"
+
+recent:
+  show_more: "Show More"
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "Reciente"
+
+recent:
+  show_more: "Mostrar Más"
--- a/i18n/fi.yaml
+++ b/i18n/fi.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "Viimeaikaiset"
+
+recent:
+  show_more: "Näytä Lisää"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "Articles récents"
+
+recent:
+  show_more: "Montre Plus"
--- a/i18n/he.yaml
+++ b/i18n/he.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "חדשים"
+
+recent:
+  show_more: "להראות יותר"
--- a/i18n/hr.yaml
+++ b/i18n/hr.yaml
@@ -60,3 +60,5 @@ sharing:
 shortcode:
  recent_articles: "Nedavno"

+recent:
+  show_more: "Prikaži Više"
--- a/i18n/hu.yaml
+++ b/i18n/hu.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "Friss"
+
+recent:
+  show_more: "Mutass Többet"
--- a/i18n/id.yaml
+++ b/i18n/id.yaml
@@ -0,0 +1,64 @@
+article:
+  anchor_label: "Anchor"
+  date: "{{ .Date }}"
+  date_updated: "Diperbarui: {{ .Date }}"
+  draft: "Draft"
+  edit_title: "Edit konten"
+  reading_time:
+    one: "{{ .Count }} menit"
+    other: "{{ .Count }} menit"
+  reading_time_title: "Waktu membaca"
+  table_of_contents: "Daftar isi"
+  word_count:
+    one: "{{ .Count }} kata"
+    other: "{{ .Count }} kata"
+  views:
+    one: "{{ .Count }} dilihat"
+    other: "{{ .Count }} dilihat"
+  likes:
+    one: "{{ .Count }} disukai"
+    other: "{{ .Count }} disukai"
+
+author:
+  byline_title: "Penulis"
+
+code:
+  copy: "Salin"
+  copied: "Disalin"
+
+error:
+  404_title: "Halaman tidak ditemukan :confused:"
+  404_error: "Kesalahan 404"
+  404_description: "Tampaknya halaman yang Anda minta tidak ada."
+
+footer:
+  dark_appearance: "Beralih ke tampilan gelap"
+  light_appearance: "Beralih ke tampilan terang"
+  powered_by: "Dipersembahkan oleh {{ .Hugo }} &amp; {{ .Theme }}"
+
+list:
+  externalurl_title: "Tautan ke situs eksternal"
+  no_articles: "Belum ada artikel untuk dicantumkan di sini."
+
+nav:
+  scroll_to_top_title: "Gulir ke atas"
+  skip_to_main: "Lewati ke konten utama"
+
+search:
+  open_button_title: "Cari (/)"
+  close_button_title: "Tutup (Esc)"
+  input_placeholder: "Pencarian"
+
+sharing:
+  email: "Kirim lewat surel"
+  facebook: "Bagikan ke Facebook"
+  linkedin: "Bagikan ke LinkedIn"
+  pinterest: "Pin di Pinterest"
+  reddit: "Kirim ke Reddit"
+  twitter: "Tweet di Twitter"
+
+shortcode:
+  recent_articles: "Terbaru"
+
+recent:
+  show_more: "Tampilkan Lainnya"
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "Recenti"
+
+recent:
+  show_more: "Mostra di Più"
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@@ -41,7 +41,7 @@ nav:
 search:
  open_button_title: "検索 (/)"
  close_button_title: "閉じる (Esc)"
-  input_placeholder: "Search"
+  input_placeholder: "検索"

 sharing:
  email: " Eメールを送る"
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "最近の記事"
+
+recent:
+  show_more: "もっと見る"
--- a/i18n/pl.yaml
+++ b/i18n/pl.yaml
@@ -59,3 +59,6 @@ sharing:

 shortcode:
  recent_articles: "Ostatnie artykuły"
+
+recent:
+  show_more: "Pokaż Więcej"
--- a/i18n/pt-BR.yaml
+++ b/i18n/pt-BR.yaml
@@ -56,3 +56,6 @@ sharing:

 shortcode:
  recent_articles: "Recente"
+
+recent:
+  show_more: "Mostrar Mais"
--- a/i18n/pt-PT.yaml
+++ b/i18n/pt-PT.yaml
@@ -56,3 +56,6 @@ sharing:

 shortcode:
  recent_articles: "Recente"
+
+recent:
+  show_more: "Mostrar Mais"
--- a/i18n/ro.yaml
+++ b/i18n/ro.yaml
@@ -53,3 +53,6 @@ sharing:

 shortcode:
  recent_articles: "Cele mai noi"
+
+recent:
+  show_more: "Afișați mai multe"
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@@ -53,3 +53,6 @@ sharing:
 shortcode:
  recent_articles: "Güncel"
  icon_none: "Icon bulunamadı."
+
+recent:
+  show_more: "Daha Fazla Göster"
--- a/i18n/zh-CN.yaml
+++ b/i18n/zh-CN.yaml
@@ -52,3 +52,6 @@ sharing:

 shortcode:
  recent_articles: "最近的文章"
+
+recent:
+  show_more: "显示更多"
--- a/i18n/zh-TW.yaml
+++ b/i18n/zh-TW.yaml
@@ -51,4 +51,7 @@ sharing:
  twitter: "推到 Twitter"

 shortcode:
-  recent_articles: "最近的文章"
+  recent_articles: "最近的文章"
+
+recent:
+  show_more: "顯示更多"
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1 +1,8 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative group">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a></span>{{ end }}</h{{ .Level }}>
+<div id="{{ .Anchor | safeURL }}" class="anchor">{{ .Text | safeHTML }}></div>
+<h{{ .Level }} class="relative group">{{ .Text | safeHTML }} 
+    {{ if.Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<span
+        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
+        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
+            style="text-decoration-line: none !important;" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a></span>        
+    {{ end }}
+</h{{ .Level }}>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,49 +1,121 @@
 {{ define "main" }}
-  {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
-  <header>
-    {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
-      {{ partial "breadcrumbs.html" . }}
-    {{ end }}
-    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+
+{{ if .Site.Params.list.showHero | default false }}
+{{ $heroStyle := print "partials/hero/" .Site.Params.list.heroStyle ".html" }}
+{{ if templates.Exists $heroStyle }}
+{{ partial $heroStyle . }}
+{{ else }}
+{{ partial "partials/hero/basic.html" . }}
+{{ end }}
+{{- end -}}
+
+{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
+.TableOfContents "<ul") }} <header>
+  {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
+  {{ partial "breadcrumbs.html" . }}
+  {{ end }}
+  <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
  </header>
-  <section
-    class="{{ if $toc -}}
+  <section class="{{ if $toc -}}
      mt-12
    {{- else -}}
      mt-0
-    {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
-  >
+    {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
    {{ if $toc }}
-      <div class="order-first 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 lg:sticky lg:top-10">
-          {{ partial "toc.html" . }}
-        </div>
+    <div class="order-first 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 lg:sticky lg:top-10">
+        {{ partial "toc.html" . }}
      </div>
+    </div>
    {{ end }}
    <div class="min-w-0 min-h-0 max-w-prose">
      {{ .Content | emojify }}
    </div>
  </section>
  {{ if gt .Pages 0 }}
-    <section class="space-y-10 w-full">
-      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-        {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-          <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+
+  {{ if .Site.Params.list.cardView | default false }}
+
+  {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth}}
+
+  {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+
+  {{ if $cardViewScreenWidth }}
+  <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+    <div class="flex flex-wrap pl-8 pr-8">
+      {{ else }}
+      <section class="w-full">
+        <div class="flex flex-wrap">
+          {{ end }}
+
+          {{ end }}
+
+
+
+          {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+          <h2 class="mt-12 mb-5 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
            {{ .Key }}
          </h2>
-          <hr class="border-dotted w-36 border-neutral-400" />
-        {{ end }}
-        {{ range .Pages }}
-          {{ partial "article-link.html" . }}
-        {{ end }}
-      {{ end }}
-    </section>
-    {{ partial "pagination.html" . }}
-  {{ else }}
-    <section class="mt-10 prose dark:prose-invert">
-      <p class="py-8 border-t">
-        <em>{{ i18n "list.no_articles" | emojify }}</em>
-      </p>
-    </section>
-  {{ end }}
-{{ end }}
+          {{ else }}
+          {{ end }}
+
+          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+
+          {{ if $cardViewScreenWidth}}
+          <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+            <div class="flex flex-wrap pl-8 pr-8">
+              {{ else }}
+              <section class="w-full">
+                <div class="flex flex-wrap">
+                  {{ end }}
+                  {{ end }}
+
+                  {{ range .Pages }}
+
+                  {{ if $cardViewScreenWidth }}
+                  <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">
+                    {{ else }}
+                    <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
+                      {{ end }}
+
+                      {{ partial "article-link-card.html" . }}
+                    </div>
+                    {{ end }}
+                    {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+                  </div>
+              </section>
+              {{ end }}
+
+
+              {{ end }}
+
+              {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+            </div>
+          </section>
+          {{ end }}
+
+          {{ else }}
+          <section class="space-y-10 w-full">
+            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+            {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+            <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+              {{ .Key }}
+            </h2>
+            {{ end }}
+            {{ range .Pages }}
+            {{ partial "article-link.html" . }}
+            {{ end }}
+            {{ end }}
+          </section>
+          {{ partial "pagination.html" . }}
+          {{ end }}
+
+          {{ else }}
+          <section class="mt-10 prose dark:prose-invert">
+            <p class="py-8 border-t">
+              <em>{{ i18n "list.no_articles" | emojify }}</em>
+            </p>
+          </section>
+          {{ end }}
+          {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,6 +8,7 @@
  {{ partial "partials/hero/basic.html" . }}
  {{ end }}
  {{- end -}}
+  
  <header id="single_header" class="mt-5 max-w-prose">
    {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
    {{ partial "breadcrumbs.html" . }}
@@ -23,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>
@@ -148,17 +149,6 @@
          }
        }

-        var header = document.getElementById("single_header")
-        var style = getComputedStyle(header);
-        var hero = document.getElementById('hero')
-        if (hero) {
-          var margin = '-' + (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
-          var height = (-parseInt(margin) + parseInt(getComputedStyle(hero).height)) + "px"
-          console.log(height)
-          hero.style["margin-bottom"] = margin;
-          hero.style["height"] = height;
-        }
-
      </script>
  </section>
  <footer class="pt-8 max-w-prose print:hidden">
--- a/layouts/partials/article-link-card.html
+++ b/layouts/partials/article-link-card.html
@@ -0,0 +1,64 @@
+{{ with .Params.externalUrl }}
+<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
+  {{ else }}
+  <a href="{{ .RelPermalink }}" class="min-w-full">
+    {{ end }}
+    <div class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+
+      {{- with $.Params.images -}}
+      {{- range first 6 . }}
+      <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+      {{- else -}}
+      {{- $images := $.Resources.ByType "image" -}}
+      {{- $featured := $images.GetMatch "*feature*" -}}
+      {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+      {{- with $featured -}}
+      {{ with .Resize "600x" }}
+      <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+      {{ end }}
+      {{- else -}}
+      {{- with $.Site.Params.images }}
+      <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+      {{- end -}}
+      {{- end -}}
+
+
+      {{ if and .Draft .Site.Params.article.showDraftLabel }}
+      <span class="absolute top-0 right-0 m-2">
+        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+      </span>
+      {{ end }}
+
+      <div class="px-6 py-4">
+
+        {{ with .Params.externalUrl }}
+        <div>
+          <div
+            class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            {{ $.Title | emojify }}
+            <span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
+              <span class="rtl:hidden">&#8599;</span>
+              <span class="ltr:hidden">&#8598;</span>
+            </span>
+          </div>
+        </div>
+        {{ else }}
+        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
+        {{ end }}
+
+        <div class="text-sm text-neutral-500 dark:text-neutral-400">
+          {{ partial "article-meta.html" . }}
+        </div>
+
+        {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+        <div class="py-1 prose dark:prose-invert">
+          {{ .Summary | emojify }}
+        </div>
+        {{ end }}
+      </div>
+      <div class="px-6 pt-4 pb-2">
+
+      </div>
+    </div>
+  </a>
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -1,6 +1,8 @@
 {{ $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" }}
@@ -45,7 +47,7 @@
        {{ with .Params.externalUrl }}
        <div>
          <div
-            class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
            {{ $.Title | emojify }}
            <span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
              <span class="rtl:hidden">&#8599;</span>
@@ -54,7 +56,7 @@
          </div>
        </div>
        {{ else }}
-        <div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
        {{ end }}
        {{ if and .Draft .Site.Params.article.showDraftLabel }}
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -121,31 +121,4 @@
            </div>
        </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>
--- a/layouts/partials/header/fixed.html
+++ b/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>
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -2,9 +2,23 @@
 {{- $featured := $images.GetMatch "*feature*" -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
-    {{ with .Resize "1200x" }}
-        <div id="hero" class="relative h-[300px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});">
-            <div class="hero_gradient bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
-        </div>
-    {{ end }}
+{{ with .Resize "1200x" }}
+<div id="hero" class="h-[150px] md:h-[200px]"></div>
+<div class="fixed inset-x-0 top-0 h-[800px] 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">
+    </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 -}}
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -3,16 +3,16 @@
        <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
        <div class="mx-auto max-w-7xl p-0">
            <div class="relative sm:overflow-hidden">
-                <div class="absolute inset-0">
+                <div class="fixed inset-x-0 top-0" style="z-index:-10">
                    {{ with .Site.Params.homepage.homepageImage }}
                    {{ $homepageImage := resources.Get . }}
                    {{ if $homepageImage }}
-                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
+                    <img class="w-full h-[1000px] object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
                    <div
-                        class="absolute inset-0 bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent dark:to-neutral-300  mix-blend-normal dark:mix-blend-multiply">
+                        class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
                    </div>
                    <div
-                        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+                        class="opacity-70 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
                    </div>
                    {{ end }}
                    {{ end }}
@@ -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 }}
@@ -55,4 +55,14 @@
 </article>
 <section>
    {{ partial "recent-articles.html" . }}
-</section>
+</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 }}
--- a/layouts/partials/recent-articles.html
+++ b/layouts/partials/recent-articles.html
@@ -5,21 +5,48 @@
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 {{ end }}
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
-<section class="space-y-10 w-full">
-  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
-  {{ partial "article-link.html" . }}
-  {{ end }}
-</section>
-{{ if .Site.Params.homepage.showMoreLink | default false }}
-{{ if index .Site.Params.homepage "showRecentItems" }}
-{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
-{{ end }}
-<div class="mt-10 flex justify-center">
-  <a href="{{ $showMoreLinkDest }}">
-    <button
-      class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
-      More</button>
-  </a>
-</div>
-{{ end }}
-{{ end }}
+
+{{ if .Site.Params.homepage.cardView | default false }}
+{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
+<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">
+      <div class="flex flex-wrap">
+        {{ end }}
+
+        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+        .Site.Params.mainSections)).Pages }}
+
+        {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
+        <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">
+          {{ else }}
+          <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
+            {{ end }}
+
+            {{ partial "article-link-card.html" . }}
+          </div>
+          {{ end }}
+        </div>
+    </section>
+    {{ else }}
+    <section class="space-y-10 w-full">
+      {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
+      }}
+      {{ partial "article-link.html" . }}
+      {{ end }}
+    </section>
+    {{ end }}
+    {{ if .Site.Params.homepage.showMoreLink | default false }}
+    {{ if index .Site.Params.homepage "showRecentItems" }}
+    {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
+    {{ end }}
+    <div class="mt-10 flex justify-center">
+      <a href="{{ $showMoreLinkDest }}">
+        <button
+          class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
+          More</button>
+      </a>
+    </div>
+    {{ end }}
+    {{ end }}
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -1,7 +1,8 @@
 <div
  id="search-wrapper"
-  class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]"
+  class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]"
  data-url="{{ "" | absLangURL }}"
+  style="z-index:500"
 >
  <div
    id="search-modal"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hugo-blowfish-theme",
-  "version": "2.6.1",
+  "version": "2.9.0",
  "description": "Blowfish theme for Hugo",
  "scripts": {
    "preinstall": "rimraf assets/vendor",
Author	SHA1	Message	Date
Nuno Coração	c456627c39	small fix on background	2022-11-06 23:16:52 +00:00
Nuno Coração	7189216109	Merge pull request #218 from nunocoracao/217-search-modal-z-index Fixed z-index of search modal	2022-11-06 23:11:19 +00:00
Nuno Coração	b6d57a2ed9	Fixed z-index of search modal	2022-11-06 23:11:00 +00:00
Nuno Coração	b4e4f46ed9	Update package.json	2022-11-06 23:04:39 +00:00
Nuno Coração	1399cc60a3	Update package.json	2022-11-06 23:04:21 +00:00
Nuno Coração	c977caaa2b	Merge pull request #216 from nunocoracao/213-lists-should-support-coverfeature-images 213 lists should support coverfeature images	2022-11-06 23:04:00 +00:00
Nuno Coração	4008bbf92c	added docs	2022-11-06 23:03:40 +00:00
Nuno Coração	afd1928cd2	added support for cover images in lists	2022-11-06 22:57:15 +00:00
Nuno Coração	1ea543da24	Merge pull request #215 from nunocoracao/211-fixed-header-+-navigating-to-a-anchor-=-bug fixed anchors	2022-11-06 22:29:22 +00:00
Nuno Coração	8ec3504224	fixed anchors	2022-11-06 22:28:52 +00:00
Nuno Coração	c7156995e7	Merge pull request #214 from nunocoracao/212-background-hero-image-margin-top-is-too-high corrected margins for backgroun hero image	2022-11-06 21:11:50 +00:00
Nuno Coração	2de1df4227	corrected margins for backgroun hero image	2022-11-06 21:11:36 +00:00
Nuno Coração	7bcfea2cfb	adding header.layout to docs	2022-11-06 19:56:14 +00:00
Nuno Coração	1263500587	Update package.json	2022-11-06 19:49:38 +00:00
Nuno Coração	af3af38509	Merge pull request #210 from nunocoracao/201-fixed-main-menu added new fixed header	2022-11-06 19:49:03 +00:00
Nuno Coração	28689bcf58	added new fixed header	2022-11-06 19:48:41 +00:00
Nuno Coração	5bfacfa68b	Merge pull request #209 from nunocoracao/204-homepage-background-mode-blur-improvements corrected case for layoutBackgroundBlur parameter	2022-11-06 19:10:23 +00:00
Nuno Coração	2f2b159cb7	corrected case for layoutBackgroundBlur parameter	2022-11-06 19:09:18 +00:00
Nuno Coração	cade256b72	Merge pull request #203 from kame404/main improved Japanese translation	2022-11-06 19:07:14 +00:00
Nuno Coração	16ef0b849e	Merge pull request #208 from nunocoracao/204-homepage-background-mode-blur-improvements add blur parameter to homepage background setup	2022-11-06 19:05:20 +00:00
Nuno Coração	c3ee4b41be	add blur parameter to homepage background setup	2022-11-06 19:05:01 +00:00
Nuno Coração	5f52400e1e	Merge pull request #207 from nunocoracao/205-cards-background-blur-improvements removed blur from list view without card config	2022-11-06 18:54:22 +00:00
Nuno Coração	3751b9970b	removed blur from list view without card config	2022-11-06 18:54:01 +00:00
Nuno Coração	e708455557	Merge pull request #206 from nunocoracao/200-homepage-background-icons-in-light-mode-need-to-be-darker Improvements to icon colors in homepage background setup	2022-11-06 18:49:16 +00:00
Nuno Coração	9a847af0e7	corrected colors	2022-11-06 18:48:41 +00:00
Nuno Coração	3948277d5f	small fix on docs	2022-11-06 18:43:35 +00:00
kame404	a4daa9ddca	improved Japanese translation	2022-11-06 22:27:57 +09:00
Nuno Coração	10be63c502	Update package.json	2022-11-06 10:58:36 +00:00
Nuno Coração	2c682cfef2	Merge pull request #202 from marmtshm/main show more in recent articles is part of i18n	2022-11-06 10:58:20 +00:00
marmtshm	fe6eaa5e98	show more in recent articles is part of i18n	2022-11-06 09:34:56 +07:00
Nuno Coração	d6b6575346	Merge pull request #198 from nunocoracao/197-blur-further-improvements-mobile-looks-weird enhavements to blur effects	2022-11-06 01:46:24 +00:00
Nuno Coração	9b9aea0bec	enhavements to blur effects	2022-11-06 01:45:53 +00:00
Nuno Coração	1a82400bad	Merge pull request #196 from nunocoracao/193-blur-in-article-background-needs-improvements enhavements to blur effects	2022-11-06 01:00:03 +00:00
Nuno Coração	83f28f8cca	enhavements to blur effects	2022-11-06 00:59:44 +00:00
Nuno Coração	9848ca7b44	Merge pull request #195 from nunocoracao/194-background-homepage-needs-a-max-width updates to the homepage background setup	2022-11-06 00:15:47 +00:00
Nuno Coração	8f588f5175	updates to the homepage background setup	2022-11-06 00:15:29 +00:00
Nuno Coração	642db32def	Update params.toml	2022-11-05 22:31:35 +00:00
Nuno Coração	196ba07e48	fixed bug in background setup	2022-11-05 22:28:30 +00:00
Nuno Coração	cde1150c41	updated version	2022-11-05 22:06:39 +00:00
Nuno Coração	c044f16f30	fixed bug in background setup	2022-11-05 22:06:13 +00:00
Nuno Coração	85295939ac	final adjustments for background	2022-11-05 21:58:55 +00:00
Nuno Coração	00f7c66acb	final adjustments for background	2022-11-05 21:58:40 +00:00
Nuno Coração	54e42158f4	Update package.json	2022-11-05 21:50:07 +00:00
Nuno Coração	747b6af3fd	Merge pull request #192 from nunocoracao/190-background-images-hero-+-articles-fill-the-screen improvements to background component in homepage and articles	2022-11-05 21:49:13 +00:00
Nuno Coração	fd1420d209	improvements to background component in homepage and articles	2022-11-05 21:48:45 +00:00
Nuno Coração	eb0f76cf4d	Merge pull request #189 from sajayprakash/patch-1 update user list	2022-11-05 15:19:02 +00:00
Nuno Coração	c8491598ed	Merge pull request #191 from nunocoracao/177-new-list-view-cards implemented card gallery for lists	2022-11-05 15:18:26 +00:00
Nuno Coração	740e573245	Merge branch 'main' into 177-new-list-view-cards	2022-11-05 15:18:20 +00:00
Nuno Coração	79e2046a5a	fixed conflicts	2022-11-05 15:13:11 +00:00
Nuno Coração	f2d3ff1572	implemented card gallery for lists	2022-11-05 15:11:20 +00:00
Sajay	fe3e2fe9f6	update user list added my personal site	2022-11-05 12:24:13 +00:00
Nuno Coração	032ff6ce86	Merge pull request #188 from nunocoracao/182-where-is-show-more-in-translations show more in recent articles is part of i18n	2022-11-05 11:55:54 +00:00
Nuno Coração	215d8ae4a2	show more in recent articles is part of i18n	2022-11-05 11:55:39 +00:00
Nuno Coração	c03c522a27	Merge pull request #187 from nunocoracao/186-add-the-envelope-icon-so-that-users-have-multiple-ways-to-display-email-contact added envelope icon	2022-11-05 11:40:54 +00:00
Nuno Coração	bb400dd936	added enveloper icon	2022-11-05 11:40:23 +00:00
Nuno Coração	95351dec9a	fixed identation	2022-11-05 11:37:11 +00:00
Nuno Coração	e10536e721	corrected indonesia flag in docs	2022-11-05 11:36:43 +00:00
Nuno Coração	1b9f9c5a1c	Merge pull request #178 from marmtshm/main Add id.yaml (Bahasa Indonesia)	2022-11-05 11:34:08 +00:00
Nuno Coração	d2dcbf8830	Update README.md	2022-10-31 16:24:45 +00:00
marmtshm	fd2b585a55	update docs	2022-10-31 23:23:37 +07:00
Nuno Coração	10148953fb	Merge pull request #180 from nunocoracao/179-typo-in-documentation Fixed typo in sample article	2022-10-31 16:12:03 +00:00
Nuno Coração	d7cd7cf9fb	Update index.md	2022-10-31 16:11:04 +00:00
marmtshm	139d4164da	Add id.yaml (Bahasa Indonesia)	2022-10-31 17:40:51 +07:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>`