summaryrefslogtreecommitdiffhomepage
path: root/layouts/shortcodes/blocks/cover.html
blob: 367d93b693b11d7938754252c2215e035f24fb43 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{{ $blockID := printf "td-cover-block-%d" .Ordinal }}
{{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" }}
{{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" }}
{{ $col_id := .Get "color" | default "dark" }}
{{ $image_anchor := .Get "image_anchor" | default "smart" }}
{{ $logo_anchor := .Get "logo_anchor" | default "smart" }}
{{/* Height can be one of: auto, min, med, max, full. */}}
{{ $height := .Get "height" | default "max"  }}
{{ with $promo_image }}
{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }}
{{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) }}
<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
<link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
<style>
#{{ $blockID }} {
    background-image: url({{ $promo_image_small.RelPermalink }}); 
}
@media only screen and (min-width: 1200px) {
    #{{ $blockID }} {
        background-image: url({{ $promo_image_big.RelPermalink }}); 
    }
}
</style>
{{ end }}
<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }}">
  <div class="container td-overlay__inner">
    <div class="row">
      <div class="cover-content col-12">
        <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row">
          <div class="td-navbar-nav-scroll ml-md-auto" id="cover_navbar">
            <ul class="navbar-nav mt-2 mt-lg-0">
              {{ $p := . }}
              {{ range .Site.Menus.main }}
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"><span>{{ .Name }}</span></a>
              </li>
              {{ end }}
              {{ if  (gt (len .Site.Home.Translations) 0) }}
              <li class="nav-item dropdown d-none d-lg-block">
                {{ partial "navbar-lang-selector.html" . }}
              </li>
              {{ end }}
            </ul>
          </div>
          <div class="navbar-nav d-none d-lg-block">{{ partial "search-input.html" . }}</div>
        </nav>

        {{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
        {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
        <div class="pt-3 lead">
          {{ .Inner }}
        </div>
      </div>
    </div>
  </div>
</section>