dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

improvements to background component in homepage and articles

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

16
layouts/_default/single.html
View File

@@ -8,6 +8,7 @@
{{ partial "partials/hero/basic.html" . }}
{{ end }}
{{- end -}}
<header id="single_header" class="mt-5 max-w-prose">
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
{{ partial "breadcrumbs.html" . }}
@@ -23,12 +24,12 @@
{{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
.TableOfContents "<ul") }}
<div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
<div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
<div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10 backdrop-blur">
{{ partial "toc.html" . }}
</div>
</div>
{{ end }}
<div class="min-w-0 min-h-0 max-w-prose">
<div class="min-w-0 min-h-0 max-w-prose backdrop-blur">
{{ partial "series.html" . }}
{{ .Content | emojify }}
</br></br>
@@ -148,17 +149,6 @@
}
}
var header = document.getElementById("single_header")
var style = getComputedStyle(header);
var hero = document.getElementById('hero')
if (hero) {
var margin = '-' + (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
var height = (-parseInt(margin) + parseInt(getComputedStyle(hero).height)) + "px"
console.log(height)
hero.style["margin-bottom"] = margin;
hero.style["height"] = height;
}
</script>
</section>
<footer class="pt-8 max-w-prose print:hidden">

2
layouts/partials/article-link-card.html
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 . }}

2
layouts/partials/article-link.html
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 }}

17
layouts/partials/hero/background.html
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 -}}

6
layouts/partials/home/background.html
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 }}