miczyg
/
openpower.foundation
forked from website/openpower.foundation
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor home to be modular

Browse Source 
* change images from static to processed
* better content management

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
jamesk-patch-1
Toshaan Bharvani 2 years ago
parent f971ade705
commit 13f0358473
11 changed files with 214 additions and 281 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/images/home/openinnovation.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
assets/images/home/powerplay.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
assets/images/home/promobg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 MiB

BIN
assets/images/home/silicon.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
assets/images/home/software.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
assets/images/home/systems.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

100
content/_index.md
Unescape Escape View File

@ -1,65 +1,53 @@
--- ---
title: 'Home' title: Home
date: 2021-07-17 promo:
type: home header: OpenPOWER Foundation
layout: single p:

- Create the Future with POWER
promo-h1: OpenPOWER Foundation calltoaction: Join us
promo-p1: Create the Future with POWER image: promobg.jpg
promo-cta: Join us articles:

- header: Open Innovation
article-1: image: openinnovation.jpg
header: Open Innovation reverse: false
p-1: The OpenPOWER Foundation is the catalyst for technical collaboration today - fostering complete collaboration, accelerating innovation and driving resiliency across the industry. By combining a 20-year history of hardware and software expertise with a completely open ecosystem, The OpenPOWER Foundation is the only organization equipped with deep institutional knowledge and a straight forward approach to innovation. lead:
article-2: - title:
header: The POWER Play p: The OpenPOWER Foundation is the catalyst for technical collaboration today - fostering complete collaboration, accelerating innovation and driving resiliency across the industry. By combining a 20-year history of hardware and software expertise with a completely open ecosystem, The OpenPOWER Foundation is the only organization equipped with deep institutional knowledge and a straight forward approach to innovation.
lead-1: Industry Proven - header: The POWER Play
p-1: image: powerplay.jpg
By open sourcing and developing on the POWER ISA - one of the most sophisticated processor architectures reverse: true
available - the OpenPOWER Foundation is democratizing access and extending the reach of the RISC-based lead:
architecture. - title: Industry Proven
lead-2: Open for All p: >
p-2: By open sourcing and developing on the POWER ISA - one of the most sophisticated processor architectures available -
the OpenPOWER Foundation is democratizing access and extending the reach of the RISC-based architecture.'
- title: Open for All
p: >
With more than 350 members collaborating regularly, the entire semiconductor industry - from global With more than 350 members collaborating regularly, the entire semiconductor industry - from global
organizations with deep expertise to individual creators with a new lens - can innovate with choice and build organizations with deep expertise to individual creators with a new lens - can innovate with choice and build
and develop across the full Hardware and Software stack. and develop across the full Hardware and Software stack.
lead-3: Complete Equation - title: Complete Equation
p-3: p: >
Open development of this scale enables unprecedented customization across applications, operating systems and Open development of this scale enables unprecedented customization across applications, operating systems and firmware -
firmware - driving hundreds of innovations across artificial intelligence, supercomputing, hyperscale and driving hundreds of innovations across artificial intelligence, supercomputing, hyperscale and more.
more.

sections: sections:
section-1:
title: Build across the entire stack title: Build across the entire stack
article-1: section:
image: ./img/thumb-1.jpg - title: Software
text: Software image: software.jpg
url: / link: /tags/software
article-2: - title: Silicon
image: ./img/thumb-2.jpg image: silicon.jpg
text: Silicon link: /tags/silicon
url: / - title: Systems
article-3: image: systems.jpg
image: ./img/thumb-3.jpg link: /tags/systems
text: Systems dark:
url: / - With its open ecosystem approach, active participation from its global membership base and powerful foundation of the POWER ISA, the OpenPOWER Foundation is the premiere organization to facilitate truly effective collaboration and drive meaningful, accessible innovation across the open hardware industry.
section-dark: subscribe:
p-1: With its open ecosystem approach, active participation from its global membership base and powerful foundation of the POWER ISA, the OpenPOWER Foundation is the premiere organization to facilitate truly effective collaboration and drive meaningful, accessible innovation across the open hardware industry.
section-supporters:
title: Supporters of OpenPOWER
logos:
- title: image
image: 180x102.png
- title: image
image: 180x102.png
- title: image
image: 180x102.png
- title: image
image: 180x102.png

section-subscribe:
title: Subscribe to the OpenPOWER newsletter. title: Subscribe to the OpenPOWER newsletter.
p-1: Sign up with your email address to receive news and updates. p:
- Sign up with your email address to receive news and updates.
date: 2022-01-03
draft: false draft: false
--- ---

20
themes/openpowerfoundation/assets/css/main.css
Unescape Escape View File

@ -4941,24 +4941,30 @@ textarea.form-control-lg {
display: none !important; } } display: none !important; } }


#main:not(.groups) { #main:not(.groups) {
padding-top: 140px; padding-top: 100px;
} }
.main { .main {
padding: 3.75rem 0; padding: 3.75rem 0;
padding-top: 100px; } padding-top: 10px;
}


.social__list { .social__list {
display: flex; } display: flex;

}
.social__item { .social__item {
display: block; display: block;
width: 28px; width: 32px;
height: 28px; height: 32px;
border-radius: 0.25rem; border-radius: 0.25rem;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 50% auto; background-size: 50% auto;
background-color: #fff; } background-color: #fff;
}
.social__item i {
padding-left: 5px;
color: #2566f4;
}
.social__item:not(:last-child) { .social__item:not(:last-child) {
margin-right: .5em; } margin-right: .5em; }
.social__item._tw { .social__item._tw {

37
themes/openpowerfoundation/assets/css/pages.scss
Unescape Escape View File

@ -60,65 +60,48 @@ color: black;
} }


// Join // Join

.join { .join {

.membership-data { .membership-data {

table { table {
margin:auto; margin:auto;
width:100%; width:100%;

tr { tr {

td { td {
padding: 10px; padding: 10px;
} }


&:nth-child(odd) { &:nth-child(odd) {
background-color: $white; background-color: $white;
} }

&:nth-child(even) { &:nth-child(even) {
background-color: $lightgrey; background-color: $lightgrey;
} }

th { th {
padding: 10px; padding: 10px;
background-color: #dfecf5; background-color: #dfecf5;

&:nth-of-type(1) { &:nth-of-type(1) {
width: 20%; width: 15%;
} }
&:nth-of-type(2) { &:nth-of-type(2) {
width: 15%; width: 20%;
} }

&:nth-of-type(3) { &:nth-of-type(3) {
width: 25%; width: 5%;
} }

&:nth-of-type(4) { &:nth-of-type(4) {
width: 35%; width: 35%;
} }
} }
} }
} }
} }

.benefits-data {
.benefits-data {

table { table {
margin:auto; margin:auto;
width:100%; width:100%;

tr { tr {

td { td {
padding:10px; padding: 10px;
position: relative; position: relative;

span { span {
position: absolute; position: absolute;
width: 225px; width: 225px;
@ -127,38 +110,30 @@ color: black;
left: 10px; left: 10px;
} }
} }

&:nth-child(odd) { &:nth-child(odd) {
background-color: $white; background-color: $white;
} }

&:nth-child(even) { &:nth-child(even) {
background-color: $lightgrey; background-color: $lightgrey;
} }
th { th {
padding:10px; padding:10px;
background-color: #dfecf5; background-color: #dfecf5;

&:nth-of-type(1) { &:nth-of-type(1) {
width: 60%; width: 60%;
} }
&:nth-of-type(2) { &:nth-of-type(2) {
width: 8%; width: 8%;
} }

&:nth-of-type(3) { &:nth-of-type(3) {
width: 8%; width: 8%;
} }

&:nth-of-type(4) { &:nth-of-type(4) {
width: 8%; width: 8%;
} }
&:nth-of-type(5) { &:nth-of-type(5) {
width: 8%; width: 8%;
} }
&:nth-of-type(6) { &:nth-of-type(6) {
width: 8%; width: 8%;
} }

136
themes/openpowerfoundation/layouts/index.html
Unescape Escape View File

@ -1,81 +1,67 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}

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

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

{{ $promobackgroundimageresource := resources.Get $promobackgroundimagelocation }}
<main id="main" class="main home" > {{ $promobackgroundimage := $promobackgroundimageresource.Resize "3840x2160 webp" }}
<div class="container"> <section class="home promo__section d-flex flex-column justify-content-center" style="background-image:url({{ $promobackgroundimage.RelPermalink }})" >
<div class="row"> <div class="promo__container container text-center">
<h1>{{ .Param "promo.header" }}</h1>
{{ range .Param "promo.p" }}
<p>{{ . }}</p>
{{ end }}
<p><a class="btn btn-light btn-outline-primary" href="{{ "/join/" | relURL }}">{{ .Param "promo.calltoaction" }}</a></p>
</div>
</section>
<main id="main" class="main home" >
<div class="container">
{{ range .Params.articles }}
<div class="row {{ if .reverse }}flex-md-row-reverse{{ end }}">
<div class="col-md-6 mb-4 mb-lg-5"> <div class="col-md-6 mb-4 mb-lg-5">
<img class="img-fluid" src="./img/thumb-4.jpg" width="600" height="420" alt=""> {{ $articleimagename := .image }}
{{ $articleimagelocation := (printf "%s/%s" "images/home/" $articleimagename) }}
{{ $articleimageresource := resources.Get $articleimagelocation }}
{{ $articleimage := $articleimageresource.Resize "600x400 webp" }}
<img class="img-fluid" src="{{ $articleimage.RelPermalink }}" width="600" height="400" alt="{{ .header }}">
</div> </div>
<div class="col-md-6 mb-3 mb-lg-5"> <div class="col-md-6 mb-3 mb-lg-5">
<h2>{{ .Param "article-1.header" }}</h2> <h2>{{ .header }}</h2>
<p><b>{{ .Param "article-1.lead-1" }}</b> {{ .Param "article-1.p-1" }}</p> {{ range .lead }}
<p><b>{{ .Param "article-1.lead-2" }}</b> {{ .Param "article-1.p-2" }}</p> <p><b>{{ .title }}</b><br>{{ .p }}</p>
</div> {{ end }}
</div>
<div class="row flex-md-row-reverse">
<div class="col-md-6 mb-4 mb-lg-5">
<img class="img-fluid" src="./img/thumb-5.jpg" width="600" height="420" alt="">
</div>
<div class="col-md-6 mb-0">
<h2>{{ .Param "article-2.header" }}</h2>
<h3>{{ .Param "article-2.lead-1" }}</h3>
<p>{{ .Param "article-2.p-1" }}</p>
<h3>{{ .Param "article-2.lead-2" }}</h3>
<p>{{ .Param "article-2.p-2" }}</p>
<h3>{{ .Param "article-2.lead-3" }}</h3>
<p>{{ .Param "article-2.p-3" }}</p>
</div>
</div> </div>
</div> </div>
{{ end }}
</div>
</main> </main>
<section class="teaser__section pt-0 pb-3 pb-lg-5"> <section class="teaser__section pt-0 pb-3 pb-lg-5">
<div class="container"> <div class="container">
<h2 class="teaser__title text-lg-center">{{ .Param "sections.section-1.title" }}</h2> <h2 class="teaser__title text-lg-center">{{ .Param "sections.title" }}</h2>
<div class="row text-center"> <div class="row text-center">

{{ range .Param "sections.section" }}
<!-- {{ 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"> <article class="post__article col-md-4">
{{ if $imageresource }}
<div class="post__thumb"> <div class="post__thumb">
{{ $image := $imageresource.Fit "390x390" }} {{ $sectionimagename := .image }}
<img class="img-fluid" src="{{ $image.RelPermalink }}" width="390" height="390" alt=""> {{ $sectionimagelocation := (printf "%s/%s" "images/home/" $sectionimagename) }}
{{ end }} {{ $sectionimageresource := resources.Get $sectionimagelocation }}
</div><a class="post__title" href="{{ .Permalink }}">{{ .Title }}</a> {{ $sectionimage := $sectionimageresource.Resize "390x390 webp" }}
</article> <img class="img-fluid" src="{{ $sectionimage.RelPermalink }}" width="390" height="390" alt="{{ .title }}">
{{ 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="/">{{ .Param "sections.section-1.article-1.text" }}</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="/">{{ .Param "sections.section-1.article-2.text" }}</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="/">{{ .Param "sections.section-1.article-3.text" }}</a>
</article>
</div>
<p class="text-center mt-3 mt-lg-0">
<a class="btn btn-outline-primary" href="{{ "/groups/" | relURL }}">Working Groups</a>
</p>
</div> </div>
<a class="post__title" href="{{ .link }}">{{ .title }}</a>
</article>
{{ end }}
<p class="text-center mt-3 mt-lg-0"><a class="btn btn-outline-primary" href="{{ "/groups/" | relURL }}">Working Groups</a></p>
</div>
</section> </section>
<section class="teaser__section _dark"> <section class="teaser__section _dark">
<div class="container text-center"> <div class="container text-center">
<p class="h2 mb-4">{{ .Param "sections.section-dark.p-1" }}</p> {{ range .Param "dark" }}
</div> <p class="h2 mb-4">{{ . }}</p>
{{ end }}
</div>
</section> </section>
<section class="teaser__section py-4 py-lg-5 my-lg-5"> <section class="teaser__section py-4 py-lg-5 my-lg-5">
<div class="container"> <div class="container">
<h2 class="teaser__title text-center">{{ .Param "sections.section-supporters.title" }}</h2> <h2 class="teaser__title text-center">{{ .Param "sections.section-supporters.title" }}</h2>
<div class="row justify-content-center"> <div class="row justify-content-center">
{{ range where .Site.RegularPages "Section" "members" }} {{ range where .Site.RegularPages "Section" "members" }}
@ -92,29 +78,15 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}

</div>
</div> </div>
</div>
</section> </section>
<section class="teaser__section _navy py-4 py-lg-5 my-lg-5"> <section class="teaser__section _navy py-4 py-lg-5 my-lg-5">
<div class="container text-center pb-4 pb-lg-0"> <div class="container text-center pb-4 pb-lg-0">
<h2 class="teaser__title">{{ .Param "sections.section-subscribe.title" }}</h2> <h2 class="teaser__title">{{ .Param "subscribe.title" }}</h2>
<p>{{ .Param "sections.section-subscribe.p-1" }}</p> {{ range .Param "subscribe.p" }}
<form class="teaser__form row justify-content-center" action="/" method="post"> <p>{{ . }}</p>
<div class="col-md-2 pb-3 pb-lg-0"> {{ end }}
<input class="form-control" name="" type="text" placeholder="First Name" value=""> </div>
</div>
<div class="col-md-2 pb-3 pb-lg-0">
<input class="form-control" name="" type="text" placeholder="Last Name" value="">
</div>
<div class="col-md-2 pb-3 pb-lg-0">
<input class="form-control" name="" type="text" placeholder="Email" value="">
</div>
<div class="col-md-2">
<input class="btn btn-outline-primary mt-4 mt-md-0" type="submit" value="Submit">
</div>
</form>
</div>
</section> </section>

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

8
themes/openpowerfoundation/layouts/partials/home-promo.html
Unescape Escape View File

@ -1,8 +0,0 @@
<section class="home promo__section d-flex flex-column justify-content-center"
style="background-image:url(./img/hero_homepage.jpg)" >
<div class="promo__container container text-center">
<h1>{{ .Param "promo-h1" }}</h1>
<p>{{ .Param "promo-p1" }}</p>
<p><a class="btn btn-light btn-outline-primary" href="{{ "/join/" | relURL }}">{{ .Param "promo-cta" }}</a></p>
</div>
</section>
Write Preview
Loading…
Cancel
Save