list.html

{{ partial "header.html" . }}
{{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }}
{{ if eq .Kind "taxonomy" }}
  {{ $paginator = .Data }}
{{ end }}
{{ $cover := .Site.Data.cover }}
    <main id="main">
        <section class="cover p-lg-5 p-md-5 p-3">
            <div class="container h-100">
              <div class="d-flex h-100 align-items-center">
                <div style="margin:auto;text-align:center;">
                    <h1 class="text-primary" style="font-size:2.8rem;margin-bottom:1.2rem;">{{ $cover.title }}</h1>
                    <p class="text-primary sub-heading">{{ $cover.description }}</p>
                    <!-- <a href="{{ $cover.button.href }}" class="btn btn-primary" style="margin-top:1.5rem;">{{ $cover.button.text }}</a>       -->
                </div>
                <!-- <div class="col-12 col-lg-6 col-md-6 col-sm-12"> -->
                    <!-- <img src="/images/cover.svg" class="float-right" style="max-width: 100%"> -->
                <!-- </div> -->
              </div>
              
            </div>
        </section>
        <div class="bg-skew bg-skew-light">
            <div class="container py-4">
                <div class="row">
                    {{ range $paginator.Pages }}
                    <div class="col-lg-6">
                        <div class="card card-hover mb-5 mx-lg-2">
                            <div class="card-body pt-5 px-5 pb-4 text-center">
                                {{ range .Params.categories }}
                                <a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}/" class="d-inline-block link-cta mb-4 text-uppercase">{{ . }}</a>
                                {{ end }}
                                <h2 class="card-title mb-4">
                                    <a class="stretched-link" href="{{ .Params.link }}">{{ .Title }}</a>
                                </h2>
                                <!-- <p class="small"><span class="text-uppercase">{{.Date.Format "2006-01-02"}}</span></p> -->
                                <p class="card-text">{{ .Summary | plainify | htmlUnescape }}</p>
                                <p class="card-text">{{ .Params.summary2 | plainify | htmlUnescape }}</p>
                                <p>
                                    {{ range .Params.tags }}
                                    <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}/" class="link-tag text-dark">#{{ . }}</a>
                                    {{ end }}                              
                                </p>
                            </div>
                        </div>
                    </div>
                    {{ end }}
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {{ range $paginator.Pagers }}
                        <li class="page-item {{ if eq $paginator.PageNumber .PageNumber }}active{{ end }}">
                          <a class="page-link" href="{{ .URL }}">{{.PageNumber}}</a>
                        </li>
                        {{ end }}              
                    </ul>
                </nav>
            </div>
        </div>
    </main>
{{ partial "footer.html" . }}

<style type="text/css">
    .cover{
      margin-top: -80px;
      height: 870px;
      background: rgba(0,0,0,0.2);
      background-image: url('{{.Site.BaseURL}}images/{{$cover.image}}');
      background-image: linear-gradient(rgba(0, 123, 251, 0.2), rgba(206, 204, 204, 0.0)), url('{{.Site.BaseURL}}images/{{$cover.image}}');
          background-position: center;
          background-attachment: fixed;
      background-size: cover;
      clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
      /*animation: breath 25s ease-in-out infinite;*/
    }
  
    @keyframes breath {
    0%   { background-size: 100% auto; }
    50% { background-size: 140% auto; }
    100% { background-size: 100% auto; }
  }
    .cover .sub-heading{
      opacity: .8;
      font-size: 1.2rem;
    } 
    @media screen and (max-width: 650px){
        .cover{
            margin-top: -20px;
            height: 720px;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
            background-size: 1100px;
            background-repeat:repeat;
      /*animation: breath 25s ease-in-out infinite;*/
    }
    }

  </style>