aboutsummaryrefslogtreecommitdiff
path: root/themes/docsy/layouts/shortcodes/blocks/cover.html
diff options
context:
space:
mode:
Diffstat (limited to 'themes/docsy/layouts/shortcodes/blocks/cover.html')
-rw-r--r--themes/docsy/layouts/shortcodes/blocks/cover.html40
1 files changed, 40 insertions, 0 deletions
diff --git a/themes/docsy/layouts/shortcodes/blocks/cover.html b/themes/docsy/layouts/shortcodes/blocks/cover.html
new file mode 100644
index 0000000..5e14d6d
--- /dev/null
+++ b/themes/docsy/layouts/shortcodes/blocks/cover.html
@@ -0,0 +1,40 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $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">
+ <div class="text-center">
+ {{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ $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 | markdownify}}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>