templates/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-04-20 20:11:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add blur parameter to homepage background setup

Browse source
This commit is contained in:
Nuno Coração 2022-11-06 19:05:01 +00:00
parent 5f52400e1e
commit c3ee4b41be
5 changed files with 84 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
config/_default/params.toml
View file

@ -31,6 +31,7 @@ enableCodeCopy = true
showMoreLinkDest = "/posts" showMoreLinkDest = "/posts"
cardView = false cardView = false
cardViewScreenWidth = false cardViewScreenWidth = false
layout_background_blur = false # only used when layout equals background
[article] [article]
showDate = true showDate = true

2
exampleSite/config/_default/params.toml
View file

@ -31,7 +31,7 @@ mainSections = ["docs"]
showMoreLinkDest = "docs" showMoreLinkDest = "docs"
cardView = true cardView = true
cardViewScreenWidth = false cardViewScreenWidth = false
layout_background_blur = true # only used when layout equals background
[article] [article]
showDate = false showDate = false

3
exampleSite/content/docs/configuration/index.md
View file

@ -125,7 +125,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| Name | Default | Description | | 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. | | `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`. | | `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`. | | `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. |
@ -148,6 +148,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
| `homepage.showMoreLinkDest` | '/posts' | The destination of the show more button. | | `homepage.showMoreLinkDest` | '/posts' | The destination of the show more button. |
| `homepage.cardView` | `false` | Display recent articles as a gallery of cards. | | `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.cardViewScreenWidth` | `false` | Enhance the width of the recent articles card gallery to take the full width available. |
| `homepage.layout_background_blur` | `false` | Makes the background image in the homepage layout blur with the scroll |
| `article.showDate` | `true` | Whether or not article dates are displayed. | | `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.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.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |

2
layouts/partials/hero/background.html
View file

@ -17,7 +17,7 @@
window.addEventListener('scroll', function (e) { window.addEventListener('scroll', function (e) {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var background_blur = document.getElementById('background-blur'); var background_blur = document.getElementById('background-blur');
background_blur.style.opacity = (scroll / 150.0) background_blur.style.opacity = (scroll / 300)
}); });
</script> </script>
{{ end }} {{ end }}

10
layouts/partials/home/background.html
View file

@ -56,3 +56,13 @@
<section> <section>
{{ partial "recent-articles.html" . }} {{ partial "recent-articles.html" . }}
</section> </section>
{{ if .Site.Params.homepage.layout_background_blur | 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 }}