added option to set a video as jumbotron background; redesigned hamburger mobile nav

This commit is contained in:
Gabriele Musco 2021-07-06 15:57:07 +02:00
parent c1ebf68128
commit e3a23c2ae7
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
3 changed files with 103 additions and 13 deletions

View File

@ -204,6 +204,8 @@ subtitle: Some fancy subtitle
image: /jumbotron_image.svg image: /jumbotron_image.svg
imagePosition: left # values: left, right, top, bottom imagePosition: left # values: left, right, top, bottom
background: /img/jumbotron_bg.png background: /img/jumbotron_bg.png
backgroundVideo: /img/jumbotron_video.webm # will replace the background image
textShadow: false
fullscreen: false fullscreen: false
downArrow: false downArrow: false
links: links:

View File

@ -505,7 +505,7 @@ a.discreteTag {
} }
.shareBtn { .shareBtn {
{{ if eq (site.Params.navType | default "standard") "circles" }} {{ if eq (site.Params.navtype | default "standard") "circles" }}
@include buttonLikeLink; @include buttonLikeLink;
{{ end }} {{ end }}
font-size: 1.2em; font-size: 1.2em;
@ -513,7 +513,7 @@ a.discreteTag {
} }
input { 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; @include buttonLikeLink;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $highlight_bg_color; background-color: $highlight_bg_color;
@ -593,6 +593,9 @@ header {
@media only screen and (max-width: 520px) { @media only screen and (max-width: 520px) {
header { header {
.titleAndSearchContainer {
z-index: 9999999 !important;
}
#hamburger-menu { #hamburger-menu {
display: block !important; display: block !important;
font-size: 1.2rem; font-size: 1.2rem;
@ -604,15 +607,27 @@ header {
} }
nav { nav {
ul#main-nav { ul#main-nav {
&, li, li a {text-shadow: none !important;}
display: none; 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; flex-direction: column;
li { li {
border-right: none !important; border-right: none !important;
display: block; display: block;
text-align: right; text-align: center;
a { a {
padding-left: 0; display: block;
padding-right: ($content_spacing / 4); width: 100%;
padding: 0;
} }
} }
} }
@ -625,6 +640,12 @@ header {
{{ end }} {{ end }}
{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} {{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }}
{{
$jumbo_fullscreen := (or
(.Site.Data.jumbotron.fullscreen | default false)
(.Site.Data.jumbotron.backgroundVideo)
)
}}
header { header {
.jumbotron { display: none; } .jumbotron { display: none; }
max-width: 100%; max-width: 100%;
@ -633,13 +654,18 @@ header {
} }
} }
header.jumbotronContainer { header.jumbotronContainer {
{{ if (.Site.Data.jumbotron.textShadow | default false) }}
&, * {
text-shadow: 0 0 5px rgba(0, 0, 0, .7);
}
{{ end }}
> *:first-child { > *:first-child {
padding-top: 15px; padding-top: 15px;
} }
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
.jumbotron { display: flex; } .jumbotron { display: flex; }
{{ if .Site.Data.jumbotron.background }} {{ if and .Site.Data.jumbotron.background (not .Site.Data.jumbotron.backgroundVideo) }}
background: background:
linear-gradient( linear-gradient(
transparentize($bg_color, 0.2), transparentize($bg_color, 0.2),
@ -649,13 +675,43 @@ header.jumbotronContainer {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; 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 }} {{ else }}
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
{{ end }} {{ end }}
{{ if (.Site.Data.jumbotron.fullscreen | default false) }} {{ if $jumbo_fullscreen }}
height: 100vh; height: 100vh;
{{ if (.Site.Data.jumbotron.downArrow | default false) }} {{ if (.Site.Data.jumbotron.downArrow | default false) }}
margin-bottom: 100px;
.arrow { .arrow {
position: absolute;
bottom: 24px;
left: 50%; transform: translateX(-50%);
cursor: pointer; cursor: pointer;
&, svg { &, svg {
height: 64px; height: 64px;
@ -697,7 +753,7 @@ header.jumbotronContainer {
} }
.jumbotron { .jumbotron {
width: 100%; width: 100%;
{{ if (.Site.Data.jumbotron.fullscreen | default false) }} {{ if $jumbo_fullscreen }}
height: 80vh; height: 80vh;
{{ else }} {{ else }}
min-height: 40vh; min-height: 40vh;
@ -706,6 +762,7 @@ header.jumbotronContainer {
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center;
{{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }} {{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }}
{{ if (eq $jumbotronImagePosition "left") }} {{ if (eq $jumbotronImagePosition "left") }}
flex-direction: row; flex-direction: row;
@ -728,16 +785,18 @@ header.jumbotronContainer {
img { img {
flex-basis: 45%; flex-basis: 45%;
flex-grow: 1; flex-grow: 1;
max-width: 100%; max-width: 100vw;
min-width: 300px; min-width: 200px;
} }
h1 { h1 {
font-weight: 300; font-weight: 300;
&.huge { &.huge {
font-size: 4em; font-size: 4em;
margin: 24px;
} }
} }
h1, h2 {
margin: 12px;
}
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -748,7 +807,7 @@ header.jumbotronContainer {
li { li {
margin: 3px; margin: 3px;
a { a {
{{ if eq .Site.Params.navType "circles" }} {{ if eq .Site.Params.navtype "circles" }}
@include buttonLikeLink; @include buttonLikeLink;
background-color: transparentize($highlight_bg_color, .3); background-color: transparentize($highlight_bg_color, .3);
{{ end }} {{ end }}
@ -759,6 +818,20 @@ header.jumbotronContainer {
@media only screen and (max-width: 520px) { @media only screen and (max-width: 520px) {
.jumbotron { .jumbotron {
flex-wrap: wrap; 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 }} {{ end }}

View File

@ -1,4 +1,19 @@
{{ if and .IsHome (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} {{ 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 }}
<div class="video_container">
<video
class="jumbotron_video"
src="{{ .Site.Data.jumbotron.backgroundVideo }}"
autoplay mute loop>
</video>
</div>
{{ end }}
<div class="jumbotron"> <div class="jumbotron">
{{ if .Site.Data.jumbotron.image }} {{ if .Site.Data.jumbotron.image }}
<img src="{{ .Site.Data.jumbotron.image }}" /> <img src="{{ .Site.Data.jumbotron.image }}" />
@ -21,7 +36,7 @@
</div> </div>
{{ if ( {{ if (
and and
(.Site.Data.jumbotron.fullscreen | default false) $jumbo_fullscreen
(.Site.Data.jumbotron.downArrow | default false) (.Site.Data.jumbotron.downArrow | default false)
) }} ) }}
<div class="arrow" onclick="jumpdown();"> <div class="arrow" onclick="jumpdown();">