From bf3f6c25b7eabf5b71420531c6e985733d64f9bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Bail=C3=A3o?= Date: Sun, 23 Aug 2020 18:51:47 -0300 Subject: custom video background config --- README.md | 18 ++++++++++++++++++ assets/sass/_elements.sass | 23 +++++++++++++++++++++++ layouts/index.html | 16 +++++++++++++++- 3 files changed, 56 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f6415a6..c11aa42 100755 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Focused on content and typography, the stylized index page is really just a list - Customize - Custom navigation menu set via `config.toml` - Custom footer text + - Custom background video via `config.toml` - Developer-approved - Syntax highlighting - Share-ready pages with [Open Graph](https://gohugo.io/templates/internal/#open-graph) and [Twitter](https://gohugo.io/templates/internal/#twitter-cards) metadata you can customize in `config.toml` and page front-matter @@ -169,6 +170,23 @@ content/ That's it! Sam's gallery layout template will automagically build the page from your images. +## Custom video background + +To change the default home page background to a looping video, you need to set a list of video sources and optionally an overlay color (default: `rgba(0, 0, 0, 0.4)`). + +Here is an example configuration of `config.toml`: + +```toml +[[params.videoBackgroud.sources]] + source = "/background.mp4" + type = "video/mp4" + poster = "/background.jpg" + +[params.videoBackgroud] + overlay = "rgba(0, 0, 0, 0.4)" # optional + +``` + ## Editing the theme This theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/introduction/) to compile, autoprefix, and minify its CSS styles from the included Sass files. diff --git a/assets/sass/_elements.sass b/assets/sass/_elements.sass index 6099b55..6358ed7 100755 --- a/assets/sass/_elements.sass +++ b/assets/sass/_elements.sass @@ -129,3 +129,26 @@ article width: 100% object-fit: cover opacity: 1 + +.video + position: fixed + z-index: -1 + +#overlay + position: fixed + height: 100% + width: 100% + top: 0 + left: 0 + background: rgba(0,0,0, 0.4) + z-index: -1 + +@media (min-aspect-ratio: 16/9) + .video + width: 100% + height: auto + +@media (max-aspect-ratio: 16/9) + .video + width: auto + height: 100% diff --git a/layouts/index.html b/layouts/index.html index 3c7fcdf..7447984 100755 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,6 +7,20 @@ + {{ with .Site.Params.videoBackgroud }} + + {{ with .overlay }} +
+ {{ end }} + {{ end }} + - \ No newline at end of file + -- cgit v1.2.3