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/

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.

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"

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.

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!

exampleSite/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; }

exampleSite/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}

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="}}