added new features to the jumbotron

This commit is contained in:
Gabriele Musco 2021-07-05 14:00:51 +02:00
parent 9413a77498
commit fc530bc483
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
3 changed files with 123 additions and 11 deletions

View File

@ -199,8 +199,13 @@ Following is an example configuration:
```yaml
title: My awesome website
hugeTitle: false
subtitle: Some fancy subtitle
image: /jumbotron_image.svg
imagePosition: left # values: left, right, top, bottom
background: /img/jumbotron_bg.png
fullscreen: false
downArrow: false
links:
- title: About me
link: /pages/about

View File

@ -647,16 +647,91 @@ header.jumbotronContainer {
{{ else }}
background-color: rgba(0, 0, 0, .3);
{{ end }}
{{ if (.Site.Data.jumbotron.fullscreen | default false) }}
height: 100vh;
{{ if (.Site.Data.jumbotron.downArrow | default false) }}
.arrow {
cursor: pointer;
&, svg {
height: 64px;
width: 64px;
}
opacity: .7;
border-radius: 100%;
border: 2px solid $fg_color;
padding: 3px;
// display: flex; flex-direction: row; justify-content: center;
background-color: transparent;
transition: background-color .15s ease-in-out;
svg {
margin-top: 5px;
&, * {
fill: $fg_color;
transition: fill .15s ease-in-out;
}
@keyframes bounce {
0% {
transform: translateY(3px);
}
100% {
transform: translateY(-3px);
}
}
animation: bounce 2s infinite ease-in-out alternate both;
}
&:hover, &:focus, &:active {
background-color: $fg_color;
svg, svg * {
fill: $bg_color;
}
}
}
{{ end }}
{{ end }}
}
.jumbotron {
width: 100%;
min-height: 40vh;
flex-direction: column;
{{ if (.Site.Data.jumbotron.fullscreen | default false) }}
height: 80vh;
{{ else }}
min-height: 40vh;
{{ end }}
flex-wrap: no-wrap;
text-align: center;
justify-content: center;
align-items: center;
{{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }}
{{ if (eq $jumbotronImagePosition "left") }}
flex-direction: row;
{{ else if (eq $jumbotronImagePosition "right") }}
flex-direction: row-reverse;
{{ else if (eq $jumbotronImagePosition "top") }}
flex-direction: column;
{{ else if (eq $jumbotronImagePosition "bottom") }}
flex-direction: column-reverse;
{{ end }}
.main_box {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
flex-basis: 55%;
flex-grow: 1;
}
img {
flex-basis: 45%;
flex-grow: 1;
max-width: 100%;
min-width: 300px;
}
h1 {
font-weight: 300;
&.huge {
font-size: 4em;
margin: 24px;
}
}
ul {
list-style: none;
@ -676,4 +751,9 @@ header.jumbotronContainer {
}
}
}
@media only screen and (max-width: 520px) {
.jumbotron {
flex-wrap: wrap;
}
}
{{ end }}

View File

@ -1,13 +1,40 @@
{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }}
<div class="jumbotron">
<h1>{{ .Site.Data.jumbotron.title }}</h1>
<h2>{{ .Site.Data.jumbotron.subtitle }}</h2>
{{ if .Site.Data.jumbotron.links }}
<ul>
{{ range .Site.Data.jumbotron.links }}
<li><a href="{{ .link }}">{{ .title }}</a></li>
{{ if .Site.Data.jumbotron.image }}
<img src="{{ .Site.Data.jumbotron.image }}" />
{{ end }}
<div class="main_box">
<h1 class="
{{ if (.Site.Data.jumbotron.hugeTitle | default false) }}
huge
{{ end }}
">{{ .Site.Data.jumbotron.title }}</h1>
<h2>{{ .Site.Data.jumbotron.subtitle }}</h2>
{{ if .Site.Data.jumbotron.links }}
<ul>
{{ range .Site.Data.jumbotron.links }}
<li><a href="{{ .link }}">{{ .title }}</a></li>
{{ end }}
</ul>
{{ end }}
</ul>
{{ end }}
</div>
</div>
{{ if (
and
(.Site.Data.jumbotron.fullscreen | default false)
(.Site.Data.jumbotron.downArrow | default false)
) }}
<div class="arrow" onclick="jumpdown();">
<svg version="1.1" viewBox="0 0 33.867 33.867" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(.26459)" d="m16 34.346v8c0 2.3545 1.0067 4.4663 2.6152 5.9277l45.385 45.385 45.385-45.385c1.6086-1.4614 2.6152-3.5732 2.6152-5.9277v-8h-8c-2.335 0-4.4287 0.99084-5.8887 2.5762l-0.037109 0.039063-34.074 34.074-34.074-34.074c-0.012103-0.013323-0.024917-0.025824-0.037109-0.039063-1.4599-1.5853-3.5537-2.5762-5.8887-2.5762h-8z" />
</svg>
</div>
<script>
function jumpdown() {
window.scrollTo({
top: window.innerHeight, left: 0, behavior: 'smooth'
});
}
</script>
{{ end }}
{{ end }}