showcase.html (1812B)
1 <section class="bg-near-white mid-gray pb5 ph4 ph5-ns pt4 w-100">
2 <h3 class="black f1 fw4 lh-title ma0 pb3 pt0-l pt4">Showcase</h3>
3 {{/* NOTE: transitions for this section are in themes/gohugoioTheme/src/css/_carousel.css */}}
4 <div class="w-100">
5 <div class="w-100 overflow-x-scroll">
6 <div class="row nowrap mv2 pb1">
7 {{ $showcasePages := where .Site.RegularPages "Section" "showcase" }}
8 {{ if $showcasePages }}
9 {{ template "home_showcase_item" (index $showcasePages 0) }}
10 {{ range $p := first 10 ($showcasePages | after 1 | shuffle) }}
11 {{template "home_showcase_item" $p }}
12 {{end}}
13 {{end}}
14 </div>
15 </div>
16 </div>
17 {{/* END */}}
18 <div class="flex w-100 mt4 justify-end">{{/* using Flex to make the button show up on the right side */}}
19 <a href="/showcase/" class="br2 f6 bg-primary-color-dark hover-bg-primary-color link ph3 pv2 ttu white">See All</a>
20 </div>
21 </section>
22
23
24 {{ define "home_showcase_item" }}
25 {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
26 {{ with $img }}
27 {{ $big := .Fill "1024x512 top" }}
28 {{ $small := $big.Resize "512x" }}
29 <a href="{{ $.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;"
30 data-bg="{{ $img.RelPermalink }}"
31 data-sizes="auto"
32 data-srcset="{{ $small.RelPermalink }} 1x,
33 {{ $big.RelPermalink }} 2x" data-src="small"
34 >
35 {{with $.Title}}
36 <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
37 <div class="absolute bottom-0 pa2 tc white">
38 {{.}} →
39 </div>
40 </div>
41 {{end}}
42 </a>
43 {{ end }}
44 {{ end }}