Add optional video background

- Configure exampleSite with video background - Add example of #90 with video from: https://www.pexels.com/video/bird-s-eye-view-of-ocean-waves-1918465/
victoriadrake · Sep 1, 2020 · bd1b408 · bd1b408
1 parent 63c93b8
commit bd1b408
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -181,15 +181,19 @@ Here is an example configuration of `config.toml`:
 
 ```toml
 [[params.videoBackgroud.sources]]
-    source  = "/background.mp4"
+    source  = "/background.mp4" # Your video file
     type    = "video/mp4"
-    poster  = "/background.jpg"
+    poster  = "/background.jpg" # The image to show when the video isn't playing
 
 [params.videoBackgroud]
     overlay = "rgba(0, 0, 0, 0.4)" # optional
 
 ```
 
+And here is a screenshot of what that might look like:
+
+![Video background main page screenshot](https://github.com/victoriadrake/hugo-theme-sam/blob/master/images/video_screenshot.png)
+
 ## 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/exampleSite/config.toml b/exampleSite/config.toml
@@ -21,6 +21,13 @@ pygmentsCodefences       = true
     title                = "Call me Sam"
     # rss                = ""
 
+[[params.videoBackgroud.sources]]
+    source  = "/sample_video.mp4"
+    type    = "video/mp4"
+    poster  = "/background.png"
+[params.videoBackgroud]
+    overlay = "rgba(0, 0, 0, 0.4)" # optional
+
 [[params.mainMenu]]
     link = "posts"
     text = "posts"

diff --git a/exampleSite/content/gallery/_index.md b/exampleSite/content/gallery/_index.md
@@ -3,7 +3,7 @@ title: "Photos from Tokyo"
 type: "gallery"
 url: "/gallery"
 maxWidth: "800x"
-clickablePhotos: false
+clickablePhotos: true
 ---
 
 This responsive image gallery is rendered in random order from a folder of image files. It uses Hugo's [Image Processing](https://gohugo.io/content-management/image-processing/) to automatically resize your images while preserving the full size image's aspect ratio. You can configure the gallery to open the full size image file when clicked, or not. You can set this text in the `_index.md` file in the `/content/gallery/` folder.

diff --git a/exampleSite/content/portfolio/_index.md b/exampleSite/content/portfolio/_index.md
@@ -6,4 +6,4 @@ maxWidth: "600x"
 clickablePhotos: true
 ---
 
-This is another gallery of images similar to [the first one](/hugo-theme-sam/gallery). It can be called anything you want!
+This is another gallery of images similar to [the first one](/gallery). It can be called anything you want!
diff --git a/...eSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content b/...eSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content
@@ -54,14 +54,6 @@ a {
   a:active {
     color: #cccccc; }
 
-button {
-  padding: 20px;
-  border: 0px;
-  border-radius: 5px;
-  background: #fff; }
-  button:hover {
-    box-shadow: 5px 5px #111; }
-
 hr {
   margin: 1rem 0;
   background-color: transparent;
@@ -234,10 +226,14 @@ article {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  grid-auto-rows: auto; }
+  grid-auto-rows: 400px; }
   @media screen and (max-width: 736px) {
     .grid {
       grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } }
+  .grid.keep-aspect-ratio {
+    grid-auto-rows: auto;
+    place-items: start; }
+
 .grid > div {
   background-color: transparent;
   overflow: hidden; }
@@ -248,12 +244,38 @@ article {
   object-fit: cover;
   opacity: 1; }
 
+.grid > div > a {
+  border-bottom: none; }
+
 .grid > div > a > img {
   height: 100%;
   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%; } }
+
 .go-left {
   justify-content: flex-start;
   align-items: flex-start; }

diff --git a/...eSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.content b/...eSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.content
@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;opacity:1}header{padding:6em 1em 1em 0}@media screen and (max-width:736px){header{padding:3em 0}}h1,h2,h3{margin-bottom:.5em;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0;border-radius:5px;background:#fff}button:hover{box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}nav{margin:1em auto}.wrap{margin:0 auto;width:45%;max-width:64em}@media screen and (max-width:736px){.wrap{width:90%}}.tag-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.flex-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.bottom-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.footer{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{min-height:calc(100vh - 6em)}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}article{width:100%;line-height:2em;letter-spacing:2px}article div{width:100%;height:100%;margin-bottom:1em}article h1,article h2,article h3{margin:1em 0;text-align:left}article p{display:block;margin-bottom:1em;line-height:1.6;letter-spacing:1.5px}article .highlight{width:100%}article pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}article pre>code{border:none}article code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}article img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}article blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}article blockquote a{color:#111}article blockquote ul{margin-top:1rem}article blockquote li{list-style:disc}article table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}article table th{font-size:.9rem}article table td,article table th{padding:2px 5px;text-align:center;border:1px solid #ccc}article li{line-height:2;padding-left:.4rem}article li:last-child{margin-bottom:1rem}article ul{list-style:disc outside;padding-left:2rem}article ol{list-style:decimal outside;padding-left:2rem}article .gist{max-width:100%}article .gist td,article .gist th{text-align:left;border:0}article .gist .gist-meta{background-color:transparent;color:#fff}article .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{margin:1em auto;display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:auto}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.go-left{justify-content:flex-start;align-items:flex-start}.go-right{justify-content:flex-end;align-items:flex-end}.go-center{justify-content:center;align-items:center}
+*{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;opacity:1}header{padding:6em 1em 1em 0}@media screen and (max-width:736px){header{padding:3em 0}}h1,h2,h3{margin-bottom:.5em;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}nav{margin:1em auto}.wrap{margin:0 auto;width:45%;max-width:64em}@media screen and (max-width:736px){.wrap{width:90%}}.tag-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.flex-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.bottom-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.footer{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{min-height:calc(100vh - 6em)}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}article{width:100%;line-height:2em;letter-spacing:2px}article div{width:100%;height:100%;margin-bottom:1em}article h1,article h2,article h3{margin:1em 0;text-align:left}article p{display:block;margin-bottom:1em;line-height:1.6;letter-spacing:1.5px}article .highlight{width:100%}article pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}article pre>code{border:none}article code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}article img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}article blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}article blockquote a{color:#111}article blockquote ul{margin-top:1rem}article blockquote li{list-style:disc}article table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}article table th{font-size:.9rem}article table td,article table th{padding:2px 5px;text-align:center;border:1px solid #ccc}article li{line-height:2;padding-left:.4rem}article li:last-child{margin-bottom:1rem}article ul{list-style:disc outside;padding-left:2rem}article ol{list-style:decimal outside;padding-left:2rem}article .gist{max-width:100%}article .gist td,article .gist th{text-align:left;border:0}article .gist .gist-meta{background-color:transparent;color:#fff}article .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{margin:1em auto;display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:400px}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid.keep-aspect-ratio{grid-auto-rows:auto;place-items:start}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a{border-bottom:none}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;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,.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%}}.go-left{justify-content:flex-start;align-items:flex-start}.go-right{justify-content:flex-end;align-items:flex-end}.go-center{justify-content:center;align-items:center}
diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.json b/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.json
@@ -1 +1 @@
-{"Target":"css/main.min.353ca4aba7f8dd7881fd0d5dfb3060f96bcc2f6367a8e1a2cbaba5d330d4baeb.css","MediaType":"text/css","Data":{"Integrity":"sha256-NTykq6f43XiB/Q1d+zBg+WvML2NnqOGiy6ul0zDUuus="}}
+{"Target":"css/main.min.6d10ea1ed2e66d431267324e2126b185c40ae2a7adb70d109ce81ce22729f1c3.css","MediaType":"text/css","Data":{"Integrity":"sha256-bRDqHtLmbUMSZzJOISaxhcQK4qettw0QnOgc4icp8cM="}}
diff --git a/exampleSite/static/background.png b/exampleSite/static/background.png
diff --git a/exampleSite/static/sample_video.mp4 b/exampleSite/static/sample_video.mp4
diff --git a/images/video_screenshot.png b/images/video_screenshot.png