FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark background (#1024)

Browse source 
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
Bernat Borràs Civil 2025-01-28 15:59:47 +01:00 • committed by GitHub
parent 35a1686bfe
commit f8befe62cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
layouts/partials/sections/home.html
View file

@ -20,6 +20,10 @@
{{ $backgroundImage = site.Params.background }}
{{ end }}
{{ $darkBackgroundImage:= $backgroundImage }}
{{ if site.Params.darkBackground }}
{{ $darkBackgroundImage = site.Params.darkBackground }}
{{ end }}
{{ $authorImage:= "/images/default-avatar.png" }}
{{ if $author.image }}
@ -73,6 +77,41 @@
{{ $large := $src}}
{{ end }}
{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $darkSrc := resources.Get $darkBackgroundImage }}
{{/* resize the src image to the given sizes */}}
{{ $darkTiny := $darkSrc.Resize $tinyw }}
{{ $darkSmall := $darkSrc.Resize $smallw }}
{{ $darkMedium := $darkSrc.Resize $mediumw }}
{{ $darkLarge := $darkSrc.Resize $largew }}
{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
{{ if lt $darkSrc.Width "500" }}
{{ $darkTiny := $src}}
{{ $darkSmall := $src}}
{{ $darkMedium := $src}}
{{ $darkLarge := $src}}
{{ end }}
{{ if lt $src.Width "800" }}
{{ $darkSmall := $src}}
{{ $darkMedium := $src}}
{{ $darkLarge := $src}}
{{ end }}
{{ if lt $src.Width "1200" }}
{{ $darkMedium := $src}}
{{ $darkLarge := $src}}
{{ end }}
{{ if lt $src.Width "1500" }}
{{ $darkLarge := $src}}
{{ end }}
<div class="container-fluid home" id="home">
<style>
/* 0 to 299 */
@ -100,6 +139,34 @@
background-image: url('{{ $src.RelPermalink }}');
}
}
html[data-theme='dark'] {
/* 0 to 299 */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $darkTiny.RelPermalink }}');
}
/* 300 to X */
@media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $darkSmall.RelPermalink }}');
}
}
@media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $darkMedium.RelPermalink }}');
}
}
@media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $darkLarge.RelPermalink }}');
}
}
@media (min-width: 1501px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $darkSrc.RelPermalink }}');
}
}
}
</style>
<span class="on-the-fly-behavior"></span>
<div