github.com/jbramsden/hugo@v0.47.1/docs/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html (about)

     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                {{.}} &#8594;
    39              </div>
    40            </div>
    41            {{end}}
    42          </a>
    43          {{ end }}
    44  {{ end }}