improvements to background component in homepage and articles

This commit is contained in:
Nuno Coração
2022-11-05 21:48:45 +00:00
parent eb0f76cf4d
commit fd1420d209
11 changed files with 46 additions and 33 deletions
+1 -1
View File
@@ -3,7 +3,7 @@
{{ 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">
<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 . }}
+1 -1
View File
@@ -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 }}
+12 -5
View File
@@ -2,9 +2,16 @@
{{- $featured := $images.GetMatch "*feature*" -}}
{{- 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 class="hero_gradient bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
</div>
{{ end }}
{{ with .Resize "1200x" }}
<div id="hero" class="h-[200px]"></div>
<div class="fixed inset-x-0 top-0 h-[700px] 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>
{{ end }}
{{- end -}}
+3 -3
View File
@@ -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 }}">
<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 bg-gradient-to-t from-neutral-100 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 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
</div>
{{ end }}
{{ end }}