diff --git a/README.md b/README.md index e5213f17..d489311f 100755 --- 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 index aa40d35b..870641f1 100755 --- 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 index 9644bbde..a9811ed3 100755 --- 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 index ee96358b..eb802725 100755 --- 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/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content index 2632facb..e508a0f3 100644 --- a/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content +++ b/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; } diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.content b/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.content index 2d9fef54..f42ed110 100644 --- a/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.content +++ b/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} \ No newline at end of file +*{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} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.json b/exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.json index 42cd5a61..ba8ea0e2 100644 --- 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="}} \ No newline at end of file +{"Target":"css/main.min.6d10ea1ed2e66d431267324e2126b185c40ae2a7adb70d109ce81ce22729f1c3.css","MediaType":"text/css","Data":{"Integrity":"sha256-bRDqHtLmbUMSZzJOISaxhcQK4qettw0QnOgc4icp8cM="}} \ No newline at end of file diff --git a/exampleSite/static/background.png b/exampleSite/static/background.png new file mode 100644 index 00000000..b12d2b67 Binary files /dev/null and b/exampleSite/static/background.png differ diff --git a/exampleSite/static/sample_video.mp4 b/exampleSite/static/sample_video.mp4 new file mode 100644 index 00000000..5907e8f7 Binary files /dev/null and b/exampleSite/static/sample_video.mp4 differ diff --git a/images/video_screenshot.png b/images/video_screenshot.png new file mode 100644 index 00000000..5fbfc682 Binary files /dev/null and b/images/video_screenshot.png differ