Merge pull request #198 from nunocoracao/197-blur-further-improvements-mobile-looks-weird

enhavements to blur effects

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).
 

assets/css/compiled/main.css

@@ -1413,14 +1413,18 @@ select {
   top: calc(100vh - 5.5rem);
 }
 
-.top-20 {
-  top: 5rem;
-}
-
 .top-0 {
   top: 0px;
 }
 
+.right-0 {
+  right: 0px;
+}
+
+.top-20 {
+  top: 5rem;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -1441,6 +1445,10 @@ select {
   margin: auto;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-1 {
   margin: 0.25rem;
 }
@@ -1499,6 +1507,10 @@ select {
   margin-top: 3rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -1575,10 +1587,6 @@ select {
   margin-top: 0.5rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
@@ -1643,8 +1651,12 @@ select {
   height: 2rem;
 }
 
-.h-\[300px\] {
+.h-\[250px\] {
-  height: 300px;
+  height: 250px;
+}
+
+.h-\[900px\] {
+  height: 900px;
 }
 
 .h-36 {
@@ -1655,6 +1667,10 @@ select {
   height: 50%;
 }
 
+.h-\[1000px\] {
+  height: 1000px;
+}
+
 .h-48 {
   height: 12rem;
 }
@@ -1671,6 +1687,10 @@ select {
   width: 3rem;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1683,10 +1703,6 @@ select {
   width: 6rem;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1699,6 +1715,10 @@ select {
   min-width: 0px;
 }
 
+.min-w-full {
+  min-width: 100%;
+}
+
 .min-w-\[1\.8rem\] {
   min-width: 1.8rem;
 }
@@ -1723,6 +1743,10 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1844,14 +1868,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 +1913,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 +2002,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 +2012,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 +2077,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 +2122,14 @@ select {
   padding-bottom: 4rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -2103,6 +2138,14 @@ select {
   padding-top: 0.75rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2111,10 +2154,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2272,11 +2311,6 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
-.text-primary-300 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
 .text-neutral-200 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
@@ -2287,6 +2321,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 +2342,14 @@ select {
   opacity: 0;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -2311,6 +2358,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 +2388,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 +3074,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;
@@ -3366,8 +3432,8 @@ body:has(#menu-controller:checked) {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.dark .dark\:to-neutral-300 {
+.dark .dark\:to-neutral-800 {
-  --tw-gradient-to: rgba(var(--color-neutral-300), 1);
+  --tw-gradient-to: rgba(var(--color-neutral-800), 1);
 }
 
 .dark .dark\:to-secondary-800 {
@@ -3446,8 +3512,13 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-.dark .dark\:mix-blend-multiply {
+.dark .dark\:text-primary-300 {
-  mix-blend-mode: multiply;
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
+}
+
+.dark .dark\:opacity-60 {
+  opacity: 0.6;
 }
 
 .dark .dark\:hover\:bg-primary-900:hover {
@@ -3600,6 +3671,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .md\:h-\[300px\] {
+    height: 300px;
+  }
+
   .md\:h-56 {
     height: 14rem;
   }
@@ -3685,6 +3760,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .lg\:h-\[350px\] {
+    height: 350px;
+  }
+
   .lg\:h-72 {
     height: 18rem;
   }
@@ -3772,3 +3851,9 @@ body:has(#menu-controller:checked) {
     width: 25%;
   }
 }
+
+@media (min-width: 1536px) {
+  .\32xl\:w-1\/5 {
+    width: 20%;
+  }
+}

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; 

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>

config/_default/params.toml

@@ -29,6 +29,8 @@ enableCodeCopy = true
   showRecentItems = 5
   showMoreLink = false
   showMoreLinkDest = "/posts"
+  cardView = false
+  cardViewScreenWidth = false
 
 [article]
   showDate = true
@@ -61,6 +63,8 @@ enableCodeCopy = true
   showTableOfContents = false
   showCards = false
   groupByYear = true
+  cardView = false
+  cardViewScreenWidth = false
 
 [sitemap]
   excludedKinds = []

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();
+    })
+  );
+});

exampleSite/config/_default/params.toml

@@ -25,10 +25,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
+  showRecent = false
-  showRecentItems = 5
+  showRecentItems = 10
   showMoreLink = true
   showMoreLinkDest = "docs"
+  cardView = true
+  cardViewScreenWidth = false
+
 
 [article]
   showDate = false
@@ -57,10 +60,12 @@ mainSections = ["docs"]
 
 [list]
   showBreadcrumbs = false
-  showSummary = true
+  showSummary = false
   showTableOfContents = true
   showCards = true
   groupByYear = false
+  cardView = true
+  cardViewScreenWidth = false
 
 [sitemap]
   excludedKinds = ["taxonomy","term"]

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>

exampleSite/content/docs/configuration/index.md

@@ -31,7 +31,7 @@ Note that the variable names provided in this table use dot notation to simplify
 
 <!-- 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.                                                                                                                                                                                                 |
@@ -56,7 +56,7 @@ 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` |
@@ -75,6 +75,7 @@ The theme currently supports the following languages by default:
 | :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).
 
@@ -90,7 +91,7 @@ The default file can be used as a template to create additional languages, or re
 
 <!-- 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.                                                                                                                                                                                                                                                                     |
@@ -124,7 +125,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 
 <!-- prettier-ignore-start -->
 | Name                            | Default                | Description                                                                                                                                                                                                                                                                                                        |
-|---|---|---|
+| ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `colorScheme`                   | `"blowfish"`           | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.                                                                                               |
 | `defaultAppearance`             | `"light"`              | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                                                                                            |
 | `autoSwitchAppearance`          | `true`                 | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                                                                                  |
@@ -145,6 +146,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `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.                                                                                                                                                                                                                            |
 | `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.                                                                                                                                                                                                         |
@@ -173,6 +176,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `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                                                                                                                                                    |

exampleSite/content/docs/homepage-layout/index.md

@@ -83,3 +83,7 @@ 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.
+
+## 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.

exampleSite/content/samples/_index.md

@@ -4,7 +4,7 @@ description: "See what's possible with Blowfish."
 
 cascade:
   showEdit: false
-  showSummary: true
+  showSummary: false
 ---
 
 {{< lead >}}

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 >}}                 |

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

exampleSite/content/users.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 >}}
 

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>

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="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="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="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 }}

i18n/de.yaml

@@ -53,3 +53,7 @@ sharing:
 
 shortcode:
   recent_articles: "Neue Beiträge"
+
+
+recent:
+  show_more: "Zeig Mehr"

i18n/en.yaml

@@ -59,3 +59,6 @@ sharing:
 
 shortcode:
   recent_articles: "Recent"
+
+recent:
+  show_more: "Show More"

i18n/es.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "Reciente"
+
+recent:
+  show_more: "Mostrar Más"

i18n/fi.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "Viimeaikaiset"
+
+recent:
+  show_more: "Näytä Lisää"

i18n/fr.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "Articles récents"
+
+recent:
+  show_more: "Montre Plus"

i18n/he.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "חדשים"
+
+recent:
+  show_more: "להראות יותר"

i18n/hr.yaml

@@ -60,3 +60,5 @@ sharing:
 shortcode:
   recent_articles: "Nedavno"
 
+recent:
+  show_more: "Prikaži Više"

i18n/hu.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "Friss"
+
+recent:
+  show_more: "Mutass Többet"

i18n/id.yaml

@@ -0,0 +1,61 @@
+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 }} & {{ .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"

i18n/it.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "Recenti"
+
+recent:
+  show_more: "Mostra di Più"

i18n/ja.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "最近の記事"
+
+recent:
+  show_more: "もっと見せる"

i18n/pl.yaml

@@ -59,3 +59,6 @@ sharing:
 
 shortcode:
   recent_articles: "Ostatnie artykuły"
+
+recent:
+  show_more: "Pokaż Więcej"

i18n/pt-BR.yaml

@@ -56,3 +56,6 @@ sharing:
 
 shortcode:
   recent_articles: "Recente"
+
+recent:
+  show_more: "Mostrar Mais"

i18n/pt-PT.yaml

@@ -56,3 +56,6 @@ sharing:
 
 shortcode:
   recent_articles: "Recente"
+
+recent:
+  show_more: "Mostrar Mais"

i18n/ro.yaml

@@ -53,3 +53,6 @@ sharing:
 
 shortcode:
   recent_articles: "Cele mai noi"
+
+recent:
+  show_more: "Afișați mai multe"

i18n/tr.yaml

@@ -53,3 +53,6 @@ sharing:
 shortcode:
   recent_articles: "Güncel"
   icon_none: "Icon bulunamadı."
+
+recent:
+  show_more: "Daha Fazla Göster"

i18n/zh-CN.yaml

@@ -52,3 +52,6 @@ sharing:
 
 shortcode:
   recent_articles: "最近的文章"
+
+recent:
+  show_more: "显示更多"

i18n/zh-TW.yaml

@@ -52,3 +52,6 @@ sharing:
 
 shortcode:
   recent_articles: "最近的文章"
+
+recent:
+  show_more: "顯示更多"

layouts/_default/list.html

@@ -1,18 +1,16 @@
 {{ define "main" }}
-  {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
+{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
-  <header>
+.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>
   </header>
-  <section
+  <section class="{{ if $toc -}}
-    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">
@@ -25,13 +23,75 @@
     </div>
   </section>
   {{ if gt .Pages 0 }}
+
+  {{ 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>
+          {{ 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>
-          <hr class="border-dotted w-36 border-neutral-400" />
             {{ end }}
             {{ range .Pages }}
             {{ partial "article-link.html" . }}
@@ -39,6 +99,8 @@
             {{ end }}
           </section>
           {{ partial "pagination.html" . }}
+          {{ end }}
+
           {{ else }}
           <section class="mt-10 prose dark:prose-invert">
             <p class="py-8 border-t">

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" . }}
@@ -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">

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>

layouts/partials/article-link.html

@@ -1,4 +1,4 @@
-{{ $articleClasses := "flex flex-wrap article" }}
+{{ $articleClasses := "flex flex-wrap article backdrop-blur" }}
 {{ if .Site.Params.list.showCards }}
 {{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-md") " " }}
 {{ end }}
@@ -45,7 +45,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 +54,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 }}

layouts/partials/hero/background.html

@@ -3,8 +3,22 @@
 {{- 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 id="hero" class="h-[250px] md:h-[300px] lg:h-[350px]"></div>
-            <div class="hero_gradient bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
+<div class="fixed inset-x-0 top-0 h-[900px] single_hero_background nozoom"
+    style="background-image:url({{ .RelPermalink }});">
+    <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
     </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 / 150.0)
+    });
+</script>
 {{ end }}
 {{- end -}}

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-700 dark:text-primary-300" href="{{ $url }}" target="_blank"
                                 aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
                                 "icon.html" $name }}</a>
                             {{ end }}

layouts/partials/recent-articles.html

@@ -5,11 +5,38 @@
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 {{ end }}
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
+
+{{ 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 }}
+      {{ 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 }}

package.json

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