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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1651,8 +1651,12 @@ select {
height: 2rem;
}
.h-\[300px\] {
height: 300px;
.h-\[200px\] {
height: 200px;
}
.h-\[700px\] {
height: 700px;
}
.h-36 {
@ -2006,6 +2010,10 @@ select {
--tw-gradient-to: transparent;
}
.to-neutral {
--tw-gradient-to: rgba(var(--color-neutral), 1);
}
.to-secondary-700 {
--tw-gradient-to: rgba(var(--color-secondary-700), 1);
}
@ -2332,6 +2340,14 @@ select {
opacity: 0;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-70 {
opacity: 0.7;
}
.mix-blend-normal {
mix-blend-mode: normal;
}
@ -3408,8 +3424,8 @@ body:has(#menu-controller:checked) {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .dark\:to-neutral-300 {
--tw-gradient-to: rgba(var(--color-neutral-300), 1);
.dark .dark\:to-neutral-800 {
--tw-gradient-to: rgba(var(--color-neutral-800), 1);
}
.dark .dark\:to-secondary-800 {
@ -3488,8 +3504,8 @@ body:has(#menu-controller:checked) {
color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
}
.dark .dark\:mix-blend-multiply {
mix-blend-mode: multiply;
.dark .dark\:opacity-60 {
opacity: 0.6;
}
.dark .dark\:hover\:bg-primary-900:hover {

2
exampleSite/assets/js/home.js
View file

@ -1,7 +1,7 @@
var layouts = [
"profile",
"background",
"hero",
"profile",
"page",
"card"
]

2
exampleSite/content/_index.md
View file

@ -10,7 +10,7 @@ This is a demo site built entirely using Blowfish. It also contains a complete s
{{< icon "triangle-exclamation" >}}
</span>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">profile</code> layout.</span>
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
<button
id="switch-layout-button"
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"

4
exampleSite/layouts/partials/home/custom.html
View file

@ -1,11 +1,11 @@
{{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
<div id="background" style="display:none">
<div id="background">
{{ partial "partials/home/background.html" . }}
</div>
<div id="hero" style="display:none">
{{ partial "partials/home/hero.html" . }}
</div>
<div id="profile" class="">
<div id="profile" style="display:none">
{{ partial "partials/home/profile.html" . }}
</div>
<div id="card" style="display:none">

BIN
exampleSite/resources/_gen/images/docs/front-matter/featured_hu2d8098f125aeb5b866c985ce18317fa7_5037509_2000x0_resize_box_3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 MiB

BIN
exampleSite/resources/_gen/images/docs/installation/featured_hua34c938079c0c05729a2a4d4783f7807_634706_2000x0_resize_box_3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 MiB

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 }}

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

@ -3,8 +3,15 @@
{{- 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 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 }}