Clean up the Hero

This commit is contained in:
2023-11-06 17:35:32 +00:00
parent bf23c864b4
commit 19c84d0c9a
6 changed files with 34 additions and 67 deletions

View File

@@ -12,21 +12,31 @@
{{ block "hero" . }}
<section id="hero">
{{ $img := resources.Get (default "/images/hero-bg.jpg" .Params.hero_image) }}
{{ $img = $img.Resize "1256x jpg" }}
<div class="hero is-medium" style="background-image: linear-gradient(-249deg, #53071b, #d41246), url({{ $img.RelPermalink }});">
<div class="hero has-primary-gradient">
<div class="hero-body">
<div class="container">
{{ block "hero-content" . }}
<div class="columns _is-centered is-vcentered has-text-white has-text-centered-mobile">
<div class="column is-full-tablet _is-offset-one-quarter-tablet">
<h1 class="title is-1 has-text-white">{{ block "title" . }}{{ end }}</h1>
<p class="subtitle has-text-white">{{ block "subtitle" . }}{{ end }}</p>
<p></p>
<p></p>
<div class="columns is-centered ">
<div class="column is-four-fifths">
<div class="columns is-vcentered has-text-centered-mobile">
<div class="column is-half">
{{ block "hero-content" . }}
<h1 class="title is-1 has-text-white">{{ .Title }}</h1>
<p class="subtitle has-text-white">{{ .Params.subtitle }}</p>
{{ end }}
</div>
<div class="column">
{{ block "hero-image" . }}
{{ if .Params.hero_image }}
<img class="hero-img" src="{{ .Params.hero_image }}">
{{ end }}
{{ end }}
</div>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>

View File

@@ -1,22 +1,14 @@
{{ define "hero-content" }}
<div class="columns _is-centered is-vcentered has-text-white has-text-centered-mobile">
<h1 class="title is-1 has-text-white">{{ .Title }}</h1>
<p class="subtitle has-text-white">{{ .Params.subtitle }}</p>
<div class="column is-full-tablet _is-offset-one-quarter-tablet is-half-desktop">
<h1 class="title is-1 has-text-white">{{ .Title }}</h1>
<p class="subtitle"></p>
<p>{{ .Params.subtitle }}</p>
<p></p>
<div class="columns _is-desktop">
<div class="column is-mobile is-multiline is-fullwidth-mobile is-half-tablet">
<a class="button is-primary is-medium is-fullwidth has-box-shadow" href="/about">Learn more</a>
</div>
<div class="column is-mobile is-multiline is-fullwidth-mobile is-half-tablet">
<a class="button is-primary is-medium is-fullwidth has-box-shadow is-inverted _is-outlined"
href="/membership">Become a member</a>
</div>
</div>
<div class="columns _is-desktop">
<div class="column is-mobile is-multiline is-fullwidth-mobile is-half-tablet">
<a class="button is-primary is-medium is-fullwidth has-box-shadow" href="/about">Learn more</a>
</div>
<div class="column is-mobile is-multiline is-fullwidth-mobile is-half-tablet">
<a class="button is-primary is-medium is-fullwidth has-box-shadow is-inverted _is-outlined"
href="/membership">Become a member</a>
</div>
</div>

View File

@@ -1,35 +0,0 @@
{{ define "hero" }}
<section id="hero">
<div class="hero has-primary-gradient">
<div class="hero-body">
<div class="container">
<div class="columns is-centered ">
<div class="column is-four-fifths">
<div class="columns is-vcentered has-text-centered-mobile">
<div class="column is-half">
<h1 class="title is-1 has-text-white">{{ .Title }}</h1>
<p class="subtitle has-text-white">{{ .Params.subtitle }}</p>
</div>
<div class="column">
<img class="hero-img" src="/images/hero-img.svg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ define "content" }}
{{ .Content }}
{{ end }}
{{ define "cta" }}
<p></p>
{{ end }}