refactor group page

* process group images
* better layout
* hero promo adjustment

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
remotes/1693381142243034077/jamesk-patch-1
Toshaan Bharvani 3 years ago
parent 9b5384c2bf
commit e3454808c3

Binary file not shown.

After

Width:  |  Height:  |  Size: 423 KiB

@ -1,9 +1,11 @@
--- ---
title: 'Workgroup Overview' title: 'Workgroup Overview'
date: 2021-03-06 image: promo.jpg
promo:
header: Our Working Groups
p:
- A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
- A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
date: 2022-01-03
draft: false draft: false

promo-h1: Our Working Groups
promo-p1: A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
promo-p2: A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
--- ---

@ -5,12 +5,10 @@ main {
padding-top:50px; padding-top:50px;
padding-bottom: 40px; padding-bottom: 40px;
} }

@media screen and (min-width: $lg) and (max-width: $xl) { @media screen and (min-width: $lg) and (max-width: $xl) {
padding-top:70px; padding-top:70px;
padding-bottom: 40px; padding-bottom: 40px;
} }

@media screen and (min-width: $xl) { @media screen and (min-width: $xl) {
padding-bottom: 50px; padding-bottom: 50px;
} }
@ -45,4 +43,4 @@ main {
} }


#workgroupsingle { #workgroupsingle {
} }

@ -1,95 +1,39 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}

{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}

{{ $promobackgroundimagename := .Param "image" }}
{{ partial "groups-promo.html" . }} {{ $promobackgroundimagelocation := (printf "%s/%s" "images/groups/" $promobackgroundimagename) }}

{{ $promobackgroundimageresource := resources.Get $promobackgroundimagelocation }}
<main id="main" class="main groups"> {{ $promobackgroundimage := $promobackgroundimageresource.Resize "1440x820 webp" }}
<div class="container"> <section class="promo__section groups d-flex" style="background-image:url({{ $promobackgroundimage.RelPermalink }})">
<div class="row"> <div class="promo__container container">
{{ range (.Data.Pages.ByParam "wgtype").Reverse }} <div class="d-flex justify-content-start">
{{ $imagename := .Param "image" }} <div class="promo-wrapper p-3 p-lg-0">
{{ $imagelocation := (printf "%s/%s" "images/" $imagename) }} <h1>{{ .Param "promo.header" }}</h1>
{{ $imageresource := resources.Get $imagelocation }} {{ range (.Param "promo.p") }}
<article class="post__article col-md-4"> <p>{{ . | safeHTML }}</p>
{{ if $imageresource }}
<div class="post__thumb">
{{ $image := $imageresource.Fit "390x390" }}
<img class="img-fluid" src="{{ $image.RelPermalink }}" width="390" height="390" alt="">
</div>
{{ end }}
<a class="post__title btn btn-outline-primary" href="{{ .Permalink }}">{{ .Title }}</a>
</article>

{{ end }}
<!-- <article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-1.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-2.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-3.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-1.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-2.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-3.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article> -->
</div>
</div>
</main>
<!-- <main id="main">

<section id="more-features" class="section-bg">
<div class="container-fluid">
<div class="section-header">
<h3 class="section-title">{{ .Title }}</h3>
<span class="section-divider"></span>

</div>
{{ if .Content }}
<div class="row">
<div class="col-lg-2">&nbsp;</div>
<div class="col-lg-8">
<p class="section-description">{{ .Content }}</p>
</div>
<div class="col-lg-2">&nbsp;</div>
</div>
{{ end }}
<div class="row">&nbsp;</div>
<div class="row">
{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
{{ $color := "transparent" }}
{{ $data := index $.Site.Data }}
{{ $wgtype := .Param "wgtype" }}
{{ range $data.workgroups }}
{{ if eq $wgtype .id }}
{{ $color = .color }}
{{ end }}
{{ end }} {{ end }}
<div class="col-lg-4">
<div class="box wow fadeInBottom" style="border: 2px solid {{ $color }};">
<h4 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
<p class="description">{{ .Summary }}</p>
</div>
</div>
{{ end }}
</div> </div>
</div> </div>
</div>
</section> </section>

<main id="main" class="main groups">
</main> --> <div class="container">

<div class="row">
{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
<article class="post__article col-md-4">
{{ if $imageresource }}
<div class="post__thumb">
{{ $image := $imageresource.Fit "390x390 webp" }}
<img class="img-fluid" src="{{ $image.RelPermalink }}" width="390" height="390" alt="">
</div>
{{ end }}
<a class="post__title btn btn-outline-primary" href="{{ .Permalink }}">{{ .Title }}</a>
</article>
{{ end }}
</div>
</div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

@ -1,9 +1,6 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}

{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}

<main id="main"> <main id="main">

<section id="workgroupsingle"> <section id="workgroupsingle">
<div id="workgroupsingle" class="container-fluid"> <div id="workgroupsingle" class="container-fluid">
<div class="section-header"> <div class="section-header">
@ -133,7 +130,5 @@
</div> </div>
</div> </div>
</section> </section>

</main> </main>

{{ partial "footer.html" . }} {{ partial "footer.html" . }}

@ -1,12 +0,0 @@
<section class="promo__section groups d-flex"
style="background-image:url(../img/promo-1.jpg)">
<div class="promo__container container">
<div class="d-flex justify-content-start">
<div class="promo-wrapper p-3 p-lg-0">
<h1>{{ .Param "promo-h1" }}</h1>
<p>{{ .Param "promo-p1" | safeHTML }}</p>
<p>{{ .Param "promo-p2" | safeHTML }}</p>
</div>
</div>
</div>
</section>
Loading…
Cancel
Save