diff options
| author | Ian Lewis <ianmlewis@gmail.com> | 2019-03-31 20:18:04 -0400 |
|---|---|---|
| committer | Adin Scannell <ascannell@google.com> | 2019-04-02 16:11:43 -0700 |
| commit | 0803a82bffccdd609db03743d145c3d6656f220e (patch) | |
| tree | 1838dcb9c5601bb047963def04563de70b97ee37 /layouts | |
| parent | 96dedf5dd6c42125b3c6f976a1447de96e804600 (diff) | |
Updated style for top page cover
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/shortcodes/blocks/cover.html | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html new file mode 100644 index 000000000..d602b8480 --- /dev/null +++ b/layouts/shortcodes/blocks/cover.html @@ -0,0 +1,37 @@ +{{ $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="col-12"> + {{ 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> |