Skip to content

Commit

Permalink
Add optional video background
Browse files Browse the repository at this point in the history
- 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/
  • Loading branch information
victoriadrake committed Sep 1, 2020
1 parent 63c93b8 commit bd1b408
Show file tree
Hide file tree
Showing 10 changed files with 48 additions and 15 deletions.
8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
7 changes: 7 additions & 0 deletions exampleSite/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion exampleSite/content/gallery/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion exampleSite/content/portfolio/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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; }
Expand All @@ -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; }
Expand Down
Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -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="}}
Binary file added exampleSite/static/background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exampleSite/static/sample_video.mp4
Binary file not shown.
Binary file added images/video_screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit bd1b408

Please sign in to comment.