Responsive layout to homepage

This commit is contained in:
2020-06-09 13:24:46 +01:00
parent 89220fa36f
commit 8fa7c40eca
2 changed files with 43 additions and 41 deletions

View File

@@ -9,7 +9,7 @@
"js": "2.lazyload.1168fc21175de558d316.min.js" "js": "2.lazyload.1168fc21175de558d316.min.js"
}, },
"main": { "main": {
"css": "main.854425fe9410f0937f19.min.css", "css": "main.056eb67e3d086eb33a6f.min.css",
"js": "main.48637aff6f96e597ae05.min.js" "js": "main.48637aff6f96e597ae05.min.js"
}, },
"vendors~app": { "vendors~app": {

View File

@@ -1,59 +1,61 @@
{{ define "main" }} {{ define "main" }}
{{ .Scratch.Set "IsSingle" true }}
<!-- <main class="homepage container py-6" id="front-background"> -->
<img src="/images/front-wallpaper.svg" class="front-background"> <img src="/images/front-wallpaper.svg" class="front-background">
<main class="homepage container py-6"> <main class="homepage container py-6">
<div> <div class="hero row pt-3 pt-md-6">
<!-- Hero --> <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
<div class="hero row"> <div>
{{ .Scratch.Get "IsSingle" }} <h1 class="display-4">{{ .Site.Title }}</h1>
<div class="col position-relative py-lg-7{{ if not .Site.Params.homepageImage }} py-7{{ else }} pb-5{{ end }}"> {{- with .Site.Params.description -}}
</div>
<div>
<h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
{{- end -}}
</div>
</div>
<div class="col-0 col-md-6 d-flex">
{{- with .Site.Params.homepageImage -}} {{- with .Site.Params.homepageImage -}}
{{/* <div class="homepage-image" data-aos="zoom-in"> */}} {{/* <div class="homepage-image" data-aos="zoom-in"> */}}
<div class="homepage-image"> <div class="homepage-image d-none d-sm-block">
<img data-src="{{ . | relURL }}" class="img-fluid"> <img data-src="{{ . | relURL }}" class="img-fluid">
</div> </div>
{{- end -}} {{- end -}}
<h1 class="display-4">{{ .Site.Title }}</h1>
{{- with .Site.Params.description -}}
<h3 class="font-weight-normal" style="max-width: 50%;">{{ . | safeHTML }}</h3>
{{- end -}}
</div> </div>
</div> </div>
<div class="row">
<!-- Latest article --> <!-- Latest article -->
{{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}} {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
{{ $page := . }} {{ $page := . }}
<div class="latest row py-lg-5"> <div class="latest row py-lg-5">
<div class="col-lg-6 mb-3"> <div class="col-lg-6 mb-3">
{{- with .Resources.Match "images/banner.svg" -}} {{- with .Resources.Match "images/banner.svg" -}}
{{ range . }} {{ range . }}
{{- $image := . -}} {{- $image := . -}}
<a href="{{ $page.RelPermalink }}" class="d-block"> <a href="{{ $page.RelPermalink }}" class="d-block">
<img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}" data-aos="zoom-in"> <img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}" data-aos="zoom-in">
</a> </a>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</div> </div>
<div class="col-lg-6 mb-3"> <div class="col-lg-6 mb-3">
<h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5> <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
<h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2> <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
<div class="content"> <div class="content">
{{ $page.Summary }} {{ $page.Summary }}
</div>
</div> </div>
</div> </div>
</div> {{- end -}}
{{- end -}}
<!-- Articles --> <!-- Articles -->
<div class="articles row row-cols-1 row-cols-lg-3"> <div class="articles row row-cols-1 row-cols-lg-3">
{{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }} {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
<div class="col mb-3" data-aos="zoom-in"> <div class="col mb-3" data-aos="zoom-in">
{{ .Render "card" }} {{ .Render "card" }}
</div>
{{ end }}
</div> </div>
{{ end }}
</div> </div>
</div> </div>
</main> </main>