From 6f7f95f181eb3670ffdc8b3cc0749311fb53edf1 Mon Sep 17 00:00:00 2001 From: Zdenek K Date: Wed, 5 Apr 2023 21:34:45 +0200 Subject: [PATCH 1/2] Cover video - initial transplant Transplanted cover video feature from fork of @thomasjungblut and adapted to latest hugo scroll code Co-Authored-By: Thomas Jungblut --- assets/css/theme.scss | 22 +++++++++++++++++-- exampleSite/content/_index.md | 5 +++++ .../layouts/partials/custom_header_video.html | 6 +++++ layouts/index.html | 15 ++++++++++++- layouts/partials/custom_header_video.html | 14 ++++++++++++ 5 files changed, 59 insertions(+), 3 deletions(-) create mode 100644 exampleSite/layouts/partials/custom_header_video.html create mode 100644 layouts/partials/custom_header_video.html diff --git a/assets/css/theme.scss b/assets/css/theme.scss index a67c3bb..614aacf 100644 --- a/assets/css/theme.scss +++ b/assets/css/theme.scss @@ -12,7 +12,12 @@ body { line-height: 0; } -#site-head { +#site-head.withCenteredImage{ + /* can't be used together with video */ + background: var(--section-light-bg-color) no-repeat center center; +} + +#site-head, #site-head.withCenteredImage { position: relative; display: table; width: 100%; @@ -20,9 +25,22 @@ body { margin-bottom: 0rem; text-align: center; color: var(--cover-text-color); - background: var(--section-light-bg-color) no-repeat center center; background-size: cover; + /* Big cover video at the landing area */ + video { + bottom: 0; + height: 100%; + min-width: 100%; + -o-object-fit: cover; + object-fit: cover; + position: absolute; + right: 0; + top: 0; + width: auto; + z-index: -100; + } + .title-and-description-guard { margin: auto; padding: 0.6em; diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index eda3c35..39c0f2b 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -1,8 +1,13 @@ --- # Striking header background image, Ideal images are homogenous around the centre and contrasting to the text. Non-ideal images can use `title_guard` header_image: "images/cover-image.jpg" +# +# When set true, uses video from custom_header_video.html partial, instead of header_image +header_use_video: true +# # Optional header logo. CSS: `#blog-logo`, with max-height defined, optimize to prevent scaling header_logo: "images/chef-hat.png" +# # Headers are safeHTML, you can use HTML tags such as b,i,u,br header_headline: "Jane Doe" header_subheadline: "Nutrition Coach & Chef Consultant" diff --git a/exampleSite/layouts/partials/custom_header_video.html b/exampleSite/layouts/partials/custom_header_video.html new file mode 100644 index 0000000..5139b7f --- /dev/null +++ b/exampleSite/layouts/partials/custom_header_video.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 38ba28c..b9e978f 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -4,8 +4,21 @@ {{ $sections := cond .Site.BuildDrafts $sections (where $sections "Draft" "==" false) }} -