refactor home to be modular

* change images from static to processed
* better content management

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>

content/_index.md

@@ -1,65 +1,53 @@
 ---
-title: 'Home'
-date: 2021-07-17
-type: home
-layout: single
-
-promo-h1: OpenPOWER Foundation
-promo-p1: Create the Future with POWER
-promo-cta: Join us
-
-article-1:
-  header: Open Innovation
-  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.
-article-2:
-  header: The POWER Play
-  lead-1: Industry Proven
-  p-1:
-    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.
-  lead-2: Open for All
-  p-2:
-    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
-    and develop across the full Hardware and Software stack.
-  lead-3: Complete Equation
-  p-3:
-    Open development of this scale enables unprecedented customization across applications, operating systems and
-    firmware - driving hundreds of innovations across artificial intelligence, supercomputing, hyperscale and
-    more.
-
+title: Home
+promo:
+  header: OpenPOWER Foundation
+  p:
+    - Create the Future with POWER
+  calltoaction: Join us
+  image: promobg.jpg
+articles:
+  - header: Open Innovation
+    image: openinnovation.jpg
+    reverse: false
+    lead:
+      - title:
+        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.
+  - header: The POWER Play
+    image: powerplay.jpg
+    reverse: true
+    lead:
+      - title: Industry Proven
+        p: >
+          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
+          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.
+      - title: Complete Equation
+        p: >
+          Open development of this scale enables unprecedented customization across applications, operating systems and firmware -
+          driving hundreds of innovations across artificial intelligence, supercomputing, hyperscale and more.
 sections:
-  section-1:
-    title: Build across the entire stack
-    article-1:
-      image: ./img/thumb-1.jpg
-      text: Software
-      url: /
-    article-2:
-      image: ./img/thumb-2.jpg
-      text: Silicon
-      url: /
-    article-3:
-      image: ./img/thumb-3.jpg
-      text: Systems
-      url: /
-  section-dark:
-    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.
-    p-1: Sign up with your email address to receive news and updates.
+  title: Build across the entire stack
+  section:
+    - title: Software
+      image: software.jpg
+      link: /tags/software
+    - title: Silicon
+      image: silicon.jpg
+      link: /tags/silicon
+    - title: Systems
+      image: systems.jpg
+      link: /tags/systems
+dark:
+  - 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.
+subscribe:
+  title: Subscribe to the OpenPOWER newsletter.
+  p:
+    - Sign up with your email address to receive news and updates.
+date: 2022-01-03
 draft: false
 ---

themes/openpowerfoundation/assets/css/main.css

@@ -4941,24 +4941,30 @@ textarea.form-control-lg {
     display: none !important; } }
 
 #main:not(.groups) {
-  padding-top: 140px;
+	padding-top: 100px;
 }
 .main {
-  padding: 3.75rem 0; 
-  padding-top: 100px; }
+	padding: 3.75rem 0;
+	padding-top: 10px;
+}
 
 .social__list {
-  display: flex; }
-
+	display: flex;
+}
 .social__item {
-  display: block;
-  width: 28px;
-  height: 28px;
-  border-radius: 0.25rem;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: 50% auto;
-  background-color: #fff; }
+	display: block;
+	width: 32px;
+	height: 32px;
+	border-radius: 0.25rem;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size: 50% auto;
+	background-color: #fff;
+}
+.social__item i {
+	padding-left: 5px;
+	color: #2566f4;
+}
   .social__item:not(:last-child) {
     margin-right: .5em; }
   .social__item._tw {

themes/openpowerfoundation/assets/css/pages.scss

@@ -60,112 +60,87 @@ color: black;
 }
 
 // Join
-
 .join {
-
-  .membership-data {
-
-    table {
-    margin:auto;
-    width:100%;
-
-    tr {
-
-      td {
-        padding: 10px;  
-      }
-
-
-      &:nth-child(odd) {
-        background-color: $white;
-      }
-
-      &:nth-child(even) {
-        background-color: $lightgrey;
-      }
-
-      th {
-        padding: 10px;  
-        background-color: #dfecf5; 
-
-        &:nth-of-type(1) {
-          width: 20%;
-        }
-        &:nth-of-type(2) {
-          width: 15%;
-        }
-
-        &:nth-of-type(3) {
-          width: 25%;
-        }
-
-        &:nth-of-type(4) {
-          width: 35%;
-        }
-      }
-    }
-  }
-}
-
-.benefits-data {
-
-  table {
-    margin:auto;
-    width:100%;
-
-    tr {
-
-      td {
-        padding:10px; 
-        position: relative; 
-
-        span {
-          position: absolute;
-          width: 225px;
-          display: block;
-          top: 10px;
-          left: 10px;
-        }
-      }
-
-      &:nth-child(odd) {
-        background-color: $white;
-      }
-
-      &:nth-child(even) {
-        background-color: $lightgrey;
-      }
-         
-       th {
-          padding:10px;  
-          background-color: #dfecf5; 
-
-          &:nth-of-type(1) {
-              width: 60%;
-          }
-          &:nth-of-type(2) {
-            width: 8%;
-          }
-
-          &:nth-of-type(3) {
-            width: 8%;
-          }
-
-          &:nth-of-type(4) {
-            width: 8%;
-          }
-       
-          &:nth-of-type(5) {
-            width: 8%;
-          }
-      
-          &:nth-of-type(6) {
-            width: 8%;
-          }
-        } 
-      }
-    }
-  }
+	.membership-data {
+		table {
+			margin:auto;
+			width:100%;
+			tr {
+				td {
+					padding: 10px;
+				}
+				&:nth-child(odd) {
+					background-color: $white;
+				}
+				&:nth-child(even) {
+					background-color: $lightgrey;
+				}
+				th {
+					padding: 10px;
+					background-color: #dfecf5;
+					&:nth-of-type(1) {
+						width: 15%;
+					}
+					&:nth-of-type(2) {
+					width: 20%;
+					}
+					&:nth-of-type(3) {
+						width: 5%;
+					}
+					&:nth-of-type(4) {
+						width: 35%;
+					}
+				}
+			}
+		}
+	}
+	.benefits-data {
+		table {
+			margin:auto;
+			width:100%;
+			tr {
+				td {
+					padding: 10px;
+					position: relative;
+					span {
+						position: absolute;
+						width: 225px;
+						display: block;
+						top: 10px;
+						left: 10px;
+					}
+				}
+				&:nth-child(odd) {
+					background-color: $white;
+				}
+				&:nth-child(even) {
+					background-color: $lightgrey;
+				}
+				th {
+					padding:10px;
+					background-color: #dfecf5;
+					&:nth-of-type(1) {
+						width: 60%;
+					}
+					&:nth-of-type(2) {
+						width: 8%;
+					}
+					&:nth-of-type(3) {
+						width: 8%;
+					}
+					&:nth-of-type(4) {
+						width: 8%;
+					}
+					&:nth-of-type(5) {
+						width: 8%;
+					}
+					&:nth-of-type(6) {
+						width: 8%;
+					}
+				}
+			}
+		}
+	}
 }
 
 // Board of Directors

themes/openpowerfoundation/layouts/index.html

@@ -1,83 +1,69 @@
 {{ partial "header.html" . }}
-
 {{ partial "navbar.html" . }}
-
-{{ partial "home-promo.html" . }}
-
-  <main id="main" class="main home" >
-  <div class="container">
-    <div class="row">
-      <div class="col-md-6 mb-4 mb-lg-5">
-        <img class="img-fluid" src="./img/thumb-4.jpg" width="600" height="420" alt="">
-      </div>
-      <div class="col-md-6 mb-3 mb-lg-5">
-        <h2>{{ .Param "article-1.header" }}</h2>
-        <p><b>{{ .Param "article-1.lead-1" }}</b> {{ .Param "article-1.p-1" }}</p>
-        <p><b>{{ .Param "article-1.lead-2" }}</b> {{ .Param "article-1.p-2" }}</p>
-      </div>
-    </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>
+{{ $promobackgroundimagename := .Param "promo.image" }}
+{{ $promobackgroundimagelocation := (printf "%s/%s" "images/home/" $promobackgroundimagename) }}
+{{ $promobackgroundimageresource := resources.Get $promobackgroundimagelocation }}
+{{ $promobackgroundimage := $promobackgroundimageresource.Resize "3840x2160 webp" }}
+<section class="home promo__section d-flex flex-column justify-content-center" style="background-image:url({{ $promobackgroundimage.RelPermalink }})" >
+<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">
+			{{ $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 class="col-md-6 mb-3 mb-lg-5">
+			<h2>{{ .header }}</h2>
+			{{ range .lead }}
+				<p><b>{{ .title }}</b><br>{{ .p }}</p>
+			{{ end }}
+		</div>
+	</div>
+{{ end }}
+</div>
 </main>
 <section class="teaser__section pt-0 pb-3 pb-lg-5">
-  <div class="container">
-    <h2 class="teaser__title text-lg-center">{{ .Param "sections.section-1.title" }}</h2>
-    <div class="row text-center">
-
-          <!-- {{ 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" }}
-                <img class="img-fluid" src="{{  $image.RelPermalink }}" width="390" height="390" alt="">
-                {{ end }}
-              </div><a class="post__title" 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="/">{{ .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 class="container">
+	<h2 class="teaser__title text-lg-center">{{ .Param "sections.title" }}</h2>
+	<div class="row text-center">
+	{{ range .Param "sections.section" }}
+		<article class="post__article col-md-4">
+			<div class="post__thumb">
+				{{ $sectionimagename := .image }}
+				{{ $sectionimagelocation := (printf "%s/%s" "images/home/" $sectionimagename) }}
+				{{ $sectionimageresource := resources.Get $sectionimagelocation }}
+				{{ $sectionimage := $sectionimageresource.Resize "390x390 webp" }}
+				<img class="img-fluid" src="{{ $sectionimage.RelPermalink }}" width="390" height="390" alt="{{ .title }}">
+			</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 class="teaser__section _dark">
-  <div class="container text-center">
-    <p class="h2 mb-4">{{ .Param "sections.section-dark.p-1" }}</p>
-  </div>
+<div class="container text-center">
+{{ range .Param "dark" }}
+	<p class="h2 mb-4">{{ . }}</p>
+{{ end }}
+</div>
 </section>
 <section class="teaser__section py-4 py-lg-5 my-lg-5">
-  <div class="container">
-    <h2 class="teaser__title text-center">{{ .Param "sections.section-supporters.title" }}</h2>
-    <div class="row justify-content-center">
+<div class="container">
+	<h2 class="teaser__title text-center">{{ .Param "sections.section-supporters.title" }}</h2>
+	<div class="row justify-content-center">
 	{{ range where .Site.RegularPages "Section" "members" }}
 		{{ $level := .Param "level" }}
 		{{ if eq $level "platinum" }}
@@ -92,29 +78,15 @@
 			{{ end }}
 		{{ end }}
 	{{ end }}
-
-    </div>
-  </div>
+	</div>
+</div>
 </section>
 <section class="teaser__section _navy  py-4 py-lg-5 my-lg-5">
-  <div class="container text-center pb-4 pb-lg-0">
-    <h2 class="teaser__title">{{ .Param "sections.section-subscribe.title" }}</h2>
-    <p>{{ .Param "sections.section-subscribe.p-1" }}</p>
-    <form class="teaser__form row justify-content-center" action="/" method="post">
-      <div class="col-md-2 pb-3 pb-lg-0">
-        <input class="form-control" name="" type="text" placeholder="First Name" value="">
-      </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>
+<div class="container text-center pb-4 pb-lg-0">
+	<h2 class="teaser__title">{{ .Param "subscribe.title" }}</h2>
+	{{ range .Param "subscribe.p" }}
+		<p>{{ . }}</p>
+	{{ end }}
+</div>
 </section>
-
 {{ partial "footer.html" . }}

themes/openpowerfoundation/layouts/partials/home-promo.html

@@ -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>