From e3a23c2ae7b28eb236efba1ea66c60c2dca239e9 Mon Sep 17 00:00:00 2001 From: Gabriele Musco Date: Tue, 6 Jul 2021 15:57:07 +0200 Subject: [PATCH] added option to set a video as jumbotron background; redesigned hamburger mobile nav --- README.md | 2 + assets/scss/style.scss | 97 +++++++++++++++++++++++++++++---- layouts/partials/jumbotron.html | 17 +++++- 3 files changed, 103 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 77dcf32..17269df 100644 --- a/README.md +++ b/README.md @@ -204,6 +204,8 @@ subtitle: Some fancy subtitle image: /jumbotron_image.svg imagePosition: left # values: left, right, top, bottom background: /img/jumbotron_bg.png +backgroundVideo: /img/jumbotron_video.webm # will replace the background image +textShadow: false fullscreen: false downArrow: false links: diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 1fcff87..5cc8852 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -505,7 +505,7 @@ a.discreteTag { } .shareBtn { - {{ if eq (site.Params.navType | default "standard") "circles" }} + {{ if eq (site.Params.navtype | default "standard") "circles" }} @include buttonLikeLink; {{ end }} font-size: 1.2em; @@ -513,7 +513,7 @@ a.discreteTag { } input { - {{ if or (site.Params.discreteCards | default false) (eq (site.Params.navType | default "standard") "circles") }} + {{ if or (site.Params.discreteCards | default false) (eq (site.Params.navtype | default "standard") "circles") }} @include buttonLikeLink; &:hover, &:focus, &:active { background-color: $highlight_bg_color; @@ -593,6 +593,9 @@ header { @media only screen and (max-width: 520px) { header { + .titleAndSearchContainer { + z-index: 9999999 !important; + } #hamburger-menu { display: block !important; font-size: 1.2rem; @@ -604,15 +607,27 @@ header { } nav { ul#main-nav { + &, li, li a {text-shadow: none !important;} display: none; + position: absolute; + z-index: 99999; + right: 6px; + padding: 12px; + width: 120px; + {{ if eq .Site.Params.navtype "circles" }} + border-radius: $border_radius; + {{ end }} + border: 2px solid $accent_color; + background-color: $highlight_bg_color; flex-direction: column; li { border-right: none !important; display: block; - text-align: right; + text-align: center; a { - padding-left: 0; - padding-right: ($content_spacing / 4); + display: block; + width: 100%; + padding: 0; } } } @@ -625,6 +640,12 @@ header { {{ end }} {{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} +{{ + $jumbo_fullscreen := (or + (.Site.Data.jumbotron.fullscreen | default false) + (.Site.Data.jumbotron.backgroundVideo) + ) +}} header { .jumbotron { display: none; } max-width: 100%; @@ -633,13 +654,18 @@ header { } } header.jumbotronContainer { + {{ if (.Site.Data.jumbotron.textShadow | default false) }} + &, * { + text-shadow: 0 0 5px rgba(0, 0, 0, .7); + } + {{ end }} > *:first-child { padding-top: 15px; } padding-bottom: 0; padding-top: 0; .jumbotron { display: flex; } - {{ if .Site.Data.jumbotron.background }} + {{ if and .Site.Data.jumbotron.background (not .Site.Data.jumbotron.backgroundVideo) }} background: linear-gradient( transparentize($bg_color, 0.2), @@ -649,13 +675,43 @@ header.jumbotronContainer { background-size: cover; background-position: center; background-repeat: no-repeat; + {{ else if .Site.Data.jumbotron.backgroundVideo }} + background: transparent; + > * { + position: relative; + z-index: 9999; + } + overflow: hidden; + .video_container { + overflow: hidden; + position: absolute; + min-height: 100%; + min-width: 100%; + top: 0; bottom: 0; left: 0; right: 0; + z-index: 0; + .jumbotron_video { + position: absolute; + z-index: 0; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + min-height: 100%; + min-width: 100%; + height: 100vh; + } + } {{ else }} background-color: rgba(0, 0, 0, .3); {{ end }} - {{ if (.Site.Data.jumbotron.fullscreen | default false) }} + {{ if $jumbo_fullscreen }} height: 100vh; {{ if (.Site.Data.jumbotron.downArrow | default false) }} + margin-bottom: 100px; .arrow { + position: absolute; + bottom: 24px; + left: 50%; transform: translateX(-50%); cursor: pointer; &, svg { height: 64px; @@ -697,7 +753,7 @@ header.jumbotronContainer { } .jumbotron { width: 100%; - {{ if (.Site.Data.jumbotron.fullscreen | default false) }} + {{ if $jumbo_fullscreen }} height: 80vh; {{ else }} min-height: 40vh; @@ -706,6 +762,7 @@ header.jumbotronContainer { text-align: center; justify-content: center; align-items: center; + align-content: center; {{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }} {{ if (eq $jumbotronImagePosition "left") }} flex-direction: row; @@ -728,16 +785,18 @@ header.jumbotronContainer { img { flex-basis: 45%; flex-grow: 1; - max-width: 100%; - min-width: 300px; + max-width: 100vw; + min-width: 200px; } h1 { font-weight: 300; &.huge { font-size: 4em; - margin: 24px; } } + h1, h2 { + margin: 12px; + } ul { list-style: none; padding: 0; @@ -748,7 +807,7 @@ header.jumbotronContainer { li { margin: 3px; a { - {{ if eq .Site.Params.navType "circles" }} + {{ if eq .Site.Params.navtype "circles" }} @include buttonLikeLink; background-color: transparentize($highlight_bg_color, .3); {{ end }} @@ -759,6 +818,20 @@ header.jumbotronContainer { @media only screen and (max-width: 520px) { .jumbotron { flex-wrap: wrap; + h1.huge { + font-size: 3em !important; + } + h1, h2 { + margin: 6px; + } + } +} +@media only screen and (max-height: 800px) { + .jumbotron { + height: auto; + img { + max-height: 120px; + } } } {{ end }} diff --git a/layouts/partials/jumbotron.html b/layouts/partials/jumbotron.html index 6bde82a..ae8b3ae 100644 --- a/layouts/partials/jumbotron.html +++ b/layouts/partials/jumbotron.html @@ -1,4 +1,19 @@ {{ if and .IsHome (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} + {{ + $jumbo_fullscreen := (or + (.Site.Data.jumbotron.fullscreen | default false) + (.Site.Data.jumbotron.backgroundVideo) + ) + }} + {{ if .Site.Data.jumbotron.backgroundVideo }} +
+ +
+ {{ end }}
{{ if .Site.Data.jumbotron.image }} @@ -21,7 +36,7 @@
{{ if ( and - (.Site.Data.jumbotron.fullscreen | default false) + $jumbo_fullscreen (.Site.Data.jumbotron.downArrow | default false) ) }}