From 294e5b5690ac399d6f94b406f134e3f28b9134e2 Mon Sep 17 00:00:00 2001
From: Toshaan Bharvani <toshaan@vantosh.com>
Date: Tue, 25 Jan 2022 10:04:38 +0100
Subject: [PATCH] update home page as per internal dicussions

* change promo p to be html safe
* add promo call to action button range which content based
* change working groups section to button range which content based
* retab all scss files

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
---
 content/_index.md                             |   7 +-
 .../openpowerfoundation/assets/css/home.scss  | 143 ++++++++----------
 .../openpowerfoundation/assets/css/promo.scss | 106 +++++++------
 themes/openpowerfoundation/layouts/index.html |  14 +-
 4 files changed, 136 insertions(+), 134 deletions(-)

diff --git a/content/_index.md b/content/_index.md
index b9e6351..013d1e2 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -6,7 +6,9 @@ promo:
     - Open Developer Community for the POWER Architecture
     - <i>“The Most Open and High-Performance Processor Architecture and Ecosystem in the Industry”</i>
     - Create the Future with POWER
-  calltoaction: Join us
+  calltoaction:
+    - title: Join us
+      link: /join/
   image: promobg.png
 articles:
   - header: Open Innovation
@@ -44,6 +46,9 @@ sections:
     - title: Systems
       image: systems.jpg
       link: /tags/systems
+  buttons:
+    - title: Working Groups
+      link: /groups/
 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:
diff --git a/themes/openpowerfoundation/assets/css/home.scss b/themes/openpowerfoundation/assets/css/home.scss
index 63ea430..a92b7dd 100644
--- a/themes/openpowerfoundation/assets/css/home.scss
+++ b/themes/openpowerfoundation/assets/css/home.scss
@@ -1,84 +1,75 @@
 .home.promo__section {
-  min-height: 820px;
+	 min-height: 820px;
 }
-main { 
-    &.home {
-    @media screen and (max-width: $lg) {
-      padding-top:50px;
-      padding-bottom: 0;
-    }
-
-    @media screen and (min-width: $lg) and (max-width: $xl) {
-      padding-top:70px;
-    }
-  }
+main {
+	&.home {
+		@media screen and (max-width: $lg) {
+			padding-top: 50px;
+			padding-bottom: 0;
+		}
+		@media screen and (min-width: $lg) and (max-width: $xl) {
+			padding-top: 70px;
+		}
+	}
 }
-
 .post__article {
-  position: relative; 
-  &:not(:last-child) {
-    margin-bottom: 0.75rem;
-  }
+	position: relative; 
+	&:not(:last-child) {
+		margin-bottom: 0.75rem;
+	}
 }
 .post__title {
-  display: block;
-  margin-top: 1em;
-  &::before {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    content: ''; 
-  }
+	display: block;
+	margin-top: 1em;
+	&::before {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		content: '';
+	}
 }
 .teaser {
-  &__section {
-    padding: 5.625rem 0; 
-    &._dark {
-      color: #fff;
-      background-color: #1b1c1f; 
-
-      @media screen and (max-width: $lg) {
-        padding: 3.5rem 0; 
-      }
-    
-      @media screen and (min-width: $lg) and (max-width: $xl) {
-        padding: 4.4rem 0; 
-      }
-    }
-    &._navy {
-      background-color: #acc8fa; 
-    }
-  }
-  &__title {
-    margin-bottom: 1em; 
-
-    @media screen and (max-width: $lg) {
-      margin-top: 0.6em;
-    }
-  
-    @media screen and (min-width: $lg) and (max-width: $xl) {
-      margin-top: 0.8em;
-    }
-    
-  }
-  &__form {
-    margin-top: 4.1em;
-
-    @media screen and (max-width: $lg) {
-      margin-top: 2em;
-    }
-  
-    @media screen and (min-width: $lg) and (max-width: $xl) {
-      margin-top: 3em;
-    }
-  }
-  &__info {
-    margin: 3.75rem 0;
-    padding: 3.75rem 0;
-    border-width: 1px;
-    border-style: solid none;
-    border-color: #1b1c1f;
-  }
- }
+	&__section {
+		padding: 5.625rem 0;
+		&._dark {
+			color: #fff;
+			background-color: #1b1c1f;
+			@media screen and (max-width: $lg) {
+				padding: 3.5rem 0;
+			}
+			@media screen and (min-width: $lg) and (max-width: $xl) {
+				padding: 4.4rem 0;
+			}
+		}
+		&._navy {
+			background-color: #acc8fa;
+		}
+	}
+	&__title {
+		margin-bottom: 1em;
+		@media screen and (max-width: $lg) {
+			margin-top: 0.6em;
+		}
+		@media screen and (min-width: $lg) and (max-width: $xl) {
+			margin-top: 0.8em;
+		}
+	}
+	&__form {
+		margin-top: 4.1em;
+		@media screen and (max-width: $lg) {
+			margin-top: 2em;
+		}
+		@media screen and (min-width: $lg) and (max-width: $xl) {
+			margin-top: 3em;
+		}
+	}
+	&__info {
+		margin: 3.75rem 0;
+		padding: 3.75rem 0;
+		border-width: 1px;
+		border-style: solid none;
+		border-color: #1b1c1f;
+	}
+}
diff --git a/themes/openpowerfoundation/assets/css/promo.scss b/themes/openpowerfoundation/assets/css/promo.scss
index 13ba28e..2aae4e5 100644
--- a/themes/openpowerfoundation/assets/css/promo.scss
+++ b/themes/openpowerfoundation/assets/css/promo.scss
@@ -1,55 +1,53 @@
 .promo {
-  &__section {
-    position: relative;
-    padding-top: 150px;
-    @media screen and (max-width: $lg) {
-      min-height:460px;
-    }
-
-    @media screen and (min-width: $lg) and (max-width: $xl) {
-      min-height:580px;
-    }
-
-    color: #fff;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: cover; 
-    &::before {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      content: '';
-      background-color: rgba(24, 38, 54, 0.4); 
-    }  
-  }
-  &__container {
-    position: relative; 
-    margin-bottom: 70px;
-    @media screen and (max-width: $lg) {
-      padding-top:17.5vw;
-    }
-
-    @media screen and (min-width: $lg) and (max-width: $xl) {
-      padding-top:10vw;
-    }
-
-    .promo-wrapper {
-      width: 50%;
-      @media screen and (max-width: $lg) {
-        width:100%;
-      }
-
-    }
-
-  }
-  &__title {
-    &._large {
-    font-size: calc(1.525rem + 3.3vw); 
-    @media (min-width: 1200px) {
-        font-size: 4rem; 
-      } 
-    }
-  }
-}    
\ No newline at end of file
+	&__section {
+		position: relative;
+		padding-top: 150px;
+		@media screen and (max-width: $lg) {
+			min-height: 460px;
+		}
+		@media screen and (min-width: $lg) and (max-width: $xl) {
+			min-height: 580px;
+		}
+		color: #fff;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+		background-size: cover;
+		&::before {
+			position: absolute;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			content: '';
+			background-color: rgba(24, 38, 54, 0.4);
+		}
+	}
+	&__container {
+		position: relative;
+		margin-bottom: 70px;
+		font-size: 1.5rem;
+		@media screen and (max-width: $lg) {
+			padding-top: 17.5vw;
+		}
+		@media screen and (min-width: $lg) and (max-width: $xl) {
+			padding-top: 10vw;
+		}
+		.promo-wrapper {
+			width: 50%;
+			@media screen and (max-width: $lg) {
+				width: 100%;
+			}
+		}
+		p {
+			margin-bottom: 0;
+		}
+	}
+	&__title {
+		&._large {
+			font-size: calc(1.525rem + 3.3vw);
+			@media (min-width: 1200px) {
+				font-size: 4rem;
+			}
+		}
+	}
+}
diff --git a/themes/openpowerfoundation/layouts/index.html b/themes/openpowerfoundation/layouts/index.html
index dd1b9fb..3b6c19a 100644
--- a/themes/openpowerfoundation/layouts/index.html
+++ b/themes/openpowerfoundation/layouts/index.html
@@ -8,9 +8,13 @@
 <div class="promo__container container text-center">
 	<h1>{{ .Param "promo.header" }}</h1>
 	{{ range .Param "promo.p" }}
-		<p>{{ . }}</p>
+		<p>{{ . | safeHTML }}</p>
+	{{ end }}
+	<p>
+	{{ range .Param "promo.calltoaction" }}
+		<a class="btn btn-light btn-outline-primary" href="{{ .link | relURL }}">{{ .title }}</a>
 	{{ end }}
-	<p><a class="btn btn-light btn-outline-primary" href="{{ "/join/" | relURL }}">{{ .Param "promo.calltoaction" }}</a></p>
+	</p>
 </div>
 </section>
 <main id="main" class="main home" >
@@ -50,7 +54,11 @@
 			<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>
+	<p class="text-center mt-3 mt-lg-0">
+	{{ range .Param "sections.buttons" }}
+		<a class="btn btn-outline-primary" href="{{ .link | relURL }}">{{ .title }}</a>
+	{{ end }}
+	</p>
 </div>
 </section>
 <section class="teaser__section _dark">