diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 34ef0384..cfa188e1 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -4537,6 +4537,30 @@ body a, body button { transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } +@keyframes homepage-ambient-drift { + 0%, 100% { + transform: scale(1.08) translate3d(-1.5%, -1%, 0); + } + 50% { + transform: scale(1.16) translate3d(1.5%, 1%, 0); + } +} +.homepage-ambient-background { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + filter: saturate(1.08); + animation: homepage-ambient-drift 24s ease-in-out infinite; + will-change: transform; +} +.homepage-ambient-wash { + background: linear-gradient(180deg, rgba(var(--color-neutral-950), 0.08), rgba(var(--color-neutral-950), 0.42)); +} +@media (prefers-reduced-motion: reduce) { + .homepage-ambient-background { + animation: none; + } +} button, [role="button"] { cursor: pointer; } diff --git a/assets/css/main.css b/assets/css/main.css index ee00c408..5f7d7329 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -23,6 +23,37 @@ body button { @apply transition-colors; } +/* Opt-in landing-page atmosphere. The motion is deliberately slow and is + removed entirely when a visitor requests reduced motion. */ +@keyframes homepage-ambient-drift { + 0%, + 100% { + transform: scale(1.08) translate3d(-1.5%, -1%, 0); + } + 50% { + transform: scale(1.16) translate3d(1.5%, 1%, 0); + } +} + +.homepage-ambient-background { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + filter: saturate(1.08); + animation: homepage-ambient-drift 24s ease-in-out infinite; + will-change: transform; +} + +.homepage-ambient-wash { + background: linear-gradient(180deg, rgba(var(--color-neutral-950), 0.08), rgba(var(--color-neutral-950), 0.42)); +} + +@media (prefers-reduced-motion: reduce) { + .homepage-ambient-background { + animation: none; + } +} + button, [role="button"] { cursor: pointer; diff --git a/exampleSite/assets/images/v3/animated-background.png b/exampleSite/assets/images/v3/animated-background.png new file mode 100644 index 00000000..72fa30c2 Binary files /dev/null and b/exampleSite/assets/images/v3/animated-background.png differ diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 80eb2154..2056f449 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -53,6 +53,8 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384", [homepage] layout = "landing" # valid options: page, profile, hero, card, background, landing, custom layoutSwitcher = true # opt-in interactive preview of the built-in layouts + animatedBackground = true # opt-in motion background for the landing layout + animatedBackgroundImage = "images/v3/animated-background.png" # homepageImage = "/img/iceland.jpg" # used in: hero, and card showRecent = true showRecentItems = 12 diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html index 41a4e9cc..c3c1c292 100644 --- a/layouts/partials/article-link/_shortcode.html +++ b/layouts/partials/article-link/_shortcode.html @@ -41,7 +41,7 @@ {{/* frontmatter */}} {{ with $page }} {{ $p := . }} - {{ with .Params.featureimage }} + {{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html index d9cdad7e..705ed290 100644 --- a/layouts/partials/article-link/card-related.html +++ b/layouts/partials/article-link/card-related.html @@ -15,7 +15,7 @@ {{/* frontmatter */}} {{ with $page }} {{ $p := . }} - {{ with .Params.featureimage }} + {{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html index 5f0db5ba..266cdd5d 100644 --- a/layouts/partials/article-link/card.html +++ b/layouts/partials/article-link/card.html @@ -18,7 +18,7 @@ {{/* frontmatter */}} {{ with $page }} {{ $p := . }} - {{ with .Params.featureimage }} + {{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html index 44ae022a..08b60871 100644 --- a/layouts/partials/article-link/simple.html +++ b/layouts/partials/article-link/simple.html @@ -34,7 +34,7 @@ {{/* frontmatter */}} {{ with $page }} {{ $p := . }} - {{ with .Params.featureimage }} + {{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/functions/feature-image.html b/layouts/partials/functions/feature-image.html new file mode 100644 index 00000000..ece8d31a --- /dev/null +++ b/layouts/partials/functions/feature-image.html @@ -0,0 +1,10 @@ +{{/* Return the page's feature image, falling back to a translated sibling. + This keeps a translated article visually aligned with its source page without + forcing every locale to duplicate presentation-only front matter. */}} +{{ $featureImage := .Params.featureimage }} +{{ if not $featureImage }} + {{ range .Translations }} + {{ with .Params.featureimage }}{{ $featureImage = . }}{{ end }} + {{ end }} +{{ end }} +{{ return $featureImage }} diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html index 259de33c..eff3cdef 100644 --- a/layouts/partials/hero/background.html +++ b/layouts/partials/hero/background.html @@ -3,7 +3,7 @@ {{ $useDefault := false }} {{ $featured := "" }} {{ $featuredURL := "" }} -{{ with .Params.featureimage }} +{{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/hero/basic.html b/layouts/partials/hero/basic.html index 9d7625cd..b35a7d3d 100644 --- a/layouts/partials/hero/basic.html +++ b/layouts/partials/hero/basic.html @@ -3,7 +3,7 @@ {{ $useDefault := false }} {{ $featured := "" }} {{ $featuredURL := "" }} -{{ with .Params.featureimage }} +{{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/hero/big.html b/layouts/partials/hero/big.html index 8c5a6679..941faaf8 100644 --- a/layouts/partials/hero/big.html +++ b/layouts/partials/hero/big.html @@ -3,7 +3,7 @@ {{ $useDefault := false }} {{ $featured := "" }} {{ $featuredURL := "" }} -{{ with .Params.featureimage }} +{{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html index ff9e3666..a7ed27cb 100644 --- a/layouts/partials/hero/thumbAndBackground.html +++ b/layouts/partials/hero/thumbAndBackground.html @@ -37,7 +37,7 @@ {{/* === Featured === */}} {{ $featured := "" }} {{ $featuredURL := "" }} -{{ with .Params.featureimage }} +{{ with partial "functions/feature-image.html" . }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ if site.Params.hotlinkFeatureImage }} {{ $featuredURL = . }} diff --git a/layouts/partials/home/landing.html b/layouts/partials/home/landing.html index b59a782f..c78f6279 100644 --- a/layouts/partials/home/landing.html +++ b/layouts/partials/home/landing.html @@ -1,7 +1,15 @@
- + {{ if .Site.Params.homepage.animatedBackground | default false }} + {{ $background := resources.Get (.Site.Params.homepage.animatedBackgroundImage | default "images/v3/animated-background.png") }} + {{ with $background }} + + + {{ end }} + {{ else }} + + {{ end }}
diff --git a/layouts/partials/term-link/card.html b/layouts/partials/term-link/card.html index 02341289..14781a51 100644 --- a/layouts/partials/term-link/card.html +++ b/layouts/partials/term-link/card.html @@ -9,7 +9,7 @@ {{ if isset .Page.Params "featureImageHover" }}{{ $featureImageHover = .Page.Params.featureImageHover }}{{ end }} {{ $featureImagePosition := .Page.Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }} {{ $p := .Page }} -{{ with .Page.Params.featureimage }} +{{ with partial "functions/feature-image.html" .Page }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ $featured = resources.GetRemote . }} {{ else }}