add new home layout

assets/css/compiled/main.css

@@ -1582,14 +1582,14 @@ select {
   margin-right: -0.5rem;
 }
 
-.-mr-48 {
-  margin-right: -12rem;
-}
-
 .mb-0 {
   margin-bottom: 0px;
 }
 
+.-mr-48 {
+  margin-right: -12rem;
+}
+
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
@@ -1642,14 +1642,14 @@ select {
   height: 9rem;
 }
 
-.h-48 {
-  height: 12rem;
-}
-
 .h-1\/2 {
   height: 50%;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -1969,6 +1969,12 @@ 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);
@@ -2257,6 +2263,11 @@ 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));
@@ -2267,11 +2278,6 @@ 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 {
   -webkit-text-decoration-line: none !important;
           text-decoration-line: none !important;
@@ -3398,6 +3404,10 @@ 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-secondary-800 {
   --tw-gradient-to: rgba(var(--color-secondary-800), 1);
 }
@@ -3437,6 +3447,15 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
 }
 
+.dark .dark\:text-neutral-200 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
+}
+
+.dark .dark\:mix-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
 .dark .dark\:hover\:bg-primary-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
@@ -3718,6 +3737,11 @@ body:has(#menu-controller:checked) {
     padding-right: 8rem;
   }
 
+  .lg\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -3733,11 +3757,6 @@ body:has(#menu-controller:checked) {
     padding-right: 0px;
   }
 
-  .lg\:py-32 {
-    padding-top: 8rem;
-    padding-bottom: 8rem;
-  }
-
   [dir="ltr"] .ltr\:lg\:pl-8 {
     padding-left: 2rem;
   }

config/_default/params.toml

@@ -22,7 +22,7 @@ enableCodeCopy = true
   showScrollToTop = true
 
 [homepage]
-  layout = "profile" # valid options: page, profile, hero, card, custom
+  layout = "profile" # valid options: page, profile, hero, card, background, custom
   #homepageImage = "IMAGE.jpg" # used in: hero, and card
   showRecent = false
   showRecentItems = 5

exampleSite/assets/js/home.js

@@ -1,6 +1,5 @@
-
-
 var layouts = [
+  "background",
   "hero",
   "profile",
   "card",
@@ -11,8 +10,6 @@ var currentLayout = 0
 
 function switchHomeLayout() {
 
-  //document.getElementById(
-
   var old = currentLayout
   currentLayout = currentLayout == layouts.length - 1 ? 0 : currentLayout + 1
 

exampleSite/config/_default/params.toml

@@ -22,7 +22,7 @@ mainSections = ["docs"]
   showScrollToTop = true
 
 [homepage]
-  layout = "custom" # valid options: page, profile, hero, card, custom
+  layout = "custom" # valid options: page, profile, hero, card, background, custom
   homepageImage = "iceland.jpg" # used in: hero, and card
   showRecent = true
   showRecentItems = 5

exampleSite/content/_index.md

@@ -10,7 +10,7 @@ This is a demo site built entirely using Blowfish. It also contains a complete s
     {{< icon "triangle-exclamation" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">
-    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">profile</code> layout.</span>
+    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
     <button
       id="switch-layout-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"

exampleSite/content/docs/configuration/index.md

@@ -129,12 +129,11 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`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.|
-|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` 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`|`"page"`|The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, 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.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.|

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

@@ -23,7 +23,6 @@ Additionally, any Markdown content that is provided in the homepage content will
 
 To enable the profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
 
-
 ## Page layout
 
 The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
@@ -40,6 +39,14 @@ The hero layout brings together ideas from the profile and card layouts. This on
 
 To enable the profile layout, set `homepage.layout = "profile"` and `homepage.homepageImage` in the `params.toml` configuration file.
 
+## Background layout
+
+The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
+
+<img class="thumbnailshadow" src="home-background.png"/>
+
+To enable the profile layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
+
 ## Card layout
 
 The card layout is an extension of the page layout. It provides the same level of flexivbility by also displaying your markdown content and adds a card image to display visual content.

exampleSite/layouts/partials/home/custom.html

@@ -1,5 +1,8 @@
 {{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
-<div id="hero" class="">
+<div id="background" class="">
+  {{ partial "partials/home/background.html" . }}
+</div>
+<div id="hero" class="hidden h-full">
   {{ partial "partials/home/hero.html" . }}
 </div>
 <div id="profile" class="hidden h-full">

layouts/_default/single.html

@@ -146,9 +146,7 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
 
         var header = document.getElementById("single_header")
         var style = getComputedStyle(header);
-        console.log(style, style.height)
         var margin = '-'+ (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
-        console.log(margin)
         var hero = document.getElementById('hero')
         if(hero)
           hero.style["margin-bottom"] = margin;

layouts/partials/home/background.html

@@ -0,0 +1,53 @@
+<article class="max-w-full prose dark:prose-invert">
+    <div class="relative">
+        <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">
+                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ .Site.Params.homepage.homepageImage }}">
+                    <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">
+                    </div>
+                    <div
+                        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+                    </div>
+                </div>
+                <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center">
+                    {{ with .Site.Author.image }}
+                    {{ $authorImage := resources.Get . }}
+                    {{ if $authorImage }}
+                    {{ $authorImage := $authorImage.Fill "288x288" }}
+                    <img class="mb-2 rounded-full h-36 w-36" width="144" height="144"
+                        alt="{{ $.Site.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
+                    {{ end }}
+                    {{ end }}
+                    <h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
+                        {{ .Site.Author.name | default .Site.Title }}
+                    </h1>
+                    {{ with .Site.Author.headline }}
+                    <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
+                        {{ . | markdownify | emojify }}
+                    </h2>
+                    {{ end }}
+                    <div class="mt-1 mb-10 text-2xl">
+                        {{ with .Site.Author.links }}
+                        <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"
+                                aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
+                                "icon.html" $name }}</a>
+                            {{ end }}
+                            {{ end }}
+                        </div>
+                        {{ end }}
+                    </div>
+                    <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+<section>
+    {{ partial "recent-articles.html" . }}
+</section>