michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 22:45:42 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
enhavements to blur effects
This commit is contained in:
Nuno Coração 2022-11-06 01:46:24 +00:00 committed by GitHub
commit d6b6575346
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/css/compiled/main.css
View file

@ -1651,8 +1651,8 @@ select {
height: 2rem;
}
.h-\[300px\] {
height: 300px;
.h-\[250px\] {
height: 250px;
}
.h-\[900px\] {
@ -2376,11 +2376,6 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur-xl {
--tw-blur: blur(24px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-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);
@ -2393,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);
@ -3670,6 +3671,10 @@ body:has(#menu-controller:checked) {
display: none;
}
.md\:h-\[300px\] {
height: 300px;
}
.md\:h-56 {
height: 14rem;
}
@ -3755,6 +3760,10 @@ body:has(#menu-controller:checked) {
display: none;
}
.lg\:h-\[350px\] {
height: 350px;
}
.lg\:h-72 {
height: 18rem;
}

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

@ -3,7 +3,7 @@
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}
{{ with .Resize "1200x" }}
<div id="hero" class="h-[300px]"></div>
<div id="hero" class="h-[250px] md:h-[300px] lg:h-[350px]"></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">
@ -12,14 +12,7 @@
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-[900px] single_hero_background nozoom blur-xl"
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;

2
package.json
View file

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