mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
35 lines
1.5 KiB
HTML
35 lines
1.5 KiB
HTML
|
<section class="bg-near-white mid-gray pb5 ph4 ph5-ns pt4 w-100">
|
||
|
|
<h3 class="black f1 fw4 lh-title ma0 pb3 pt0-l pt4">Showcase</h3>
|
||
|
|
{{/* NOTE: transitions for this section are in themes/gohugoioTheme/src/css/_carousel.css */}}
|
||
|
|
<div class="w-100">
|
||
|
|
<div class="w-100 overflow-x-scroll">
|
||
|
|
<div class="row nowrap mv2 pb1">
|
||
|
|
{{ range $p := first 10 (where .Site.RegularPages "Section" "showcase") }}
|
||
|
|
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
|
||
|
|
{{ with $img }}
|
||
|
|
{{ $big := .Fill "1024x512 top" }}
|
||
|
|
{{ $small := $big.Resize "512x" }}
|
||
|
|
<a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;"
|
||
|
|
data-bg="{{ $img.RelPermalink }}"
|
||
|
|
data-sizes="auto"
|
||
|
|
data-srcset="{{ $small.RelPermalink }} 1x,
|
||
|
|
{{ $big.RelPermalink }} 2x" data-src="small"
|
||
|
|
>
|
||
|
|
{{with $p.Title}}
|
||
|
|
<div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
|
||
|
|
<div class="absolute bottom-0 pa2 tc white">
|
||
|
|
{{.}} →
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
</a>
|
||
|
|
{{ end }}
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{/* END */}}
|
||
|
|
<div class="flex w-100 mt4 justify-end">{{/* using Flex to make the button show up on the right side */}}
|
||
|
|
<a href="/showcase/" class="br2 f6 bg-primary-color-dark hover-bg-primary-color link ph3 pv2 ttu white">See All</a>
|
||
|
|
</div>
|
||
|
|
</section>
|