michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-23 06:55:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #548 from nunocoracao/547-new-header-that-blurs-to-background-color

Browse source 
✨ new header that blurs to background color
This commit is contained in:
Nuno Coração 2023-02-25 19:23:36 +00:00 committed by GitHub
commit cff12498dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/js/appearance.js
View file

@ -62,9 +62,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
var updateMeta = () => {
var elem, style;
elem = document.querySelector('body');
console.log(elem)
style = getComputedStyle(elem);
console.log(style.backgroundColor)
document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
}

2
config/_default/params.toml
View file

@ -24,7 +24,7 @@ disableImageOptimization = false
# smartTOCHideUnfocusedChildren = true
[header]
layout = "basic" # valid options: basic, fixed, fixed-fill
layout = "basic" # valid options: basic, fixed, fixed-fill, fixed-fill-blur
[footer]
showMenu = true

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

@ -24,7 +24,7 @@ smartTOC = true
smartTOCHideUnfocusedChildren = true
[header]
layout = "fixed" # valid options: basic, fixed, fixed-fill
layout = "fixed" # valid options: basic, fixed, fixed-fill, fixed-fill-blur
[footer]
showMenu = true

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

@ -154,7 +154,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
| Name | Default | Description |
| --------------- | --------- | --------------------------------------------------------------------------------- |
| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, and `fixed-fill`. |
| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
### Footer
| Name | Default | Description |

14
layouts/partials/header/fixed-fill-blur.html Normal file
View file

@ -0,0 +1,14 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100">
<div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div>
<div class="relative max-w-[64rem] ml-auto mr-auto">
{{ partial "partials/header/basic.html" . }}
</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>