From a1ec4f74ac2fd80b8739ceb5f58a314267359053 Mon Sep 17 00:00:00 2001
From: chaitanyakaranam <chaitanya.karanam@yahoo.com>
Date: Wed, 2 Oct 2019 16:16:27 +0530
Subject: [PATCH] Removed multiple occurances of main in case-studies page

Signed-off-by: chaitanyakaranam <chaitanya.karanam@yahoo.com>
---
 layouts/case-studies/list.html | 12 +++----
 static/css/gridpage.css        | 63 ++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/layouts/case-studies/list.html b/layouts/case-studies/list.html
index e0f4565a955d1..2dde241b72724 100644
--- a/layouts/case-studies/list.html
+++ b/layouts/case-studies/list.html
@@ -10,7 +10,7 @@
 {{ end }}  
 {{ $featured := (where $pages "Params.featured" true).ByWeight | first 4 }}
 <section id="mainContent">
-	<main>
+	<div class="main-section">
 		<div class="content">
 			<div class="case-studies">
 				{{ range $featured }}
@@ -18,13 +18,13 @@
 				{{ end }}
 			</div>
 		</div>
-	</main>
+	</div>
 </section>
 {{ $featuredVideos := where .Pages ".Params.video" "!=" nil }}
 {{ with $featuredVideos }}
 {{ with index $featuredVideos 0 }}
 <section id="video">
-	<main>
+	<div class="main-section">
 		<div>
 			<h4><i>"{{ .Params.quote | html }}"</i></h4>
 			{{ $img := .Resources.GetMatch "video.png" }}
@@ -32,7 +32,7 @@ <h4><i>"{{ .Params.quote | html }}"</i></h4>
 			{{ with $small }}<img src="{{ .RelPermalink }}" alt="{{ .Title }}">{{ end }}
 		</div>
 		<div style= "padding-left: 40px;"><button onclick="kub.showVideo()">{{ with $img }}<img src="{{ .RelPermalink }}" alt="Box video">{{ end }}<h6>Kubernetes at Box</h6></button></div>
-	</main>
+	</div>
 	<div id="videoPlayer">
 		<iframe data-url="{{ .Params.video | safeURL }}" frameborder="0" allowfullscreen="true"></iframe>
 		<button id="closeButton"></button>
@@ -41,7 +41,7 @@ <h4><i>"{{ .Params.quote | html }}"</i></h4>
 {{ end }}
 {{ end }}
 <section id="users">
-	<main>
+	<div class="main-section">
 		<h3>{{ .Title }}</h3>
 		<div id="usersGrid">
 			{{ range $pages.ByTitle }}
@@ -53,7 +53,7 @@ <h3>{{ .Title }}</h3>
 			{{ end }}
 			<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img src="/images/case_studies/story.png" alt="{{ T "layouts_case_studies_list_tell" }}"></a>
 		</div>
-	</main>
+	</div>
 </section>
 {{ .Content }}
 {{ end }}
diff --git a/static/css/gridpage.css b/static/css/gridpage.css
index 19e74934ef55b..09c369ec6f458 100644
--- a/static/css/gridpage.css
+++ b/static/css/gridpage.css
@@ -43,6 +43,10 @@
     max-width: 1100px !important;
 }
 
+.gridPage .main-section {
+    max-width: 1100px !important;
+}
+
 .gridPage .content {
     position: relative;
     margin: 0 auto 50px;
@@ -126,6 +130,28 @@ p.attrib {
     max-width: 100%;
 }
 
+.gridPage #video .main-section {
+    position: relative;
+    max-width: 900px !important;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 20px;
+}
+
+.gridPage #video .main-section > div {
+    width: 50%;
+}
+
+.gridPage #video .main-section #zulilyLogo {
+    width: 100px;
+}
+
+.gridPage #video .main-section img {
+    max-width: 100%;
+}
+
 .gridPage #video h3 {
     font-size: 32px;
     font-weight: 300;
@@ -162,6 +188,15 @@ p.attrib {
     margin-bottom: 20px;
 }
 
+.gridPage #users .main-section {
+    max-width: 1150px !important;
+}
+
+.gridPage #users .main-section h3 {
+    padding-left: 20px;
+    margin-bottom: 20px;
+}
+
 .gridPage #usersGrid {
     position: relative;
     display: flex;
@@ -216,6 +251,12 @@ section.bullets main {
     padding: 50px 0;
 }
 
+section.bullets .main-section {
+    position: relative;
+    max-width: 1100px;
+    padding: 50px 0;
+}
+
 section.bullets .content {
     position: relative;
     display: flex;
@@ -287,6 +328,23 @@ section.bullets .content {
     .gridPage #video h3 {
         max-width: 100%;
     }
+
+    .gridPage #video .main-section {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .gridPage #video .main-section > div {
+        width: 400px;
+    }
+
+    .gridPage #video .main-section > div + div {
+        margin-top: 30px;
+    }
+
+    .gridPage #video h3 {
+        max-width: 100%;
+    }
 }
 
 @media screen and (max-width: 640px){
@@ -326,6 +384,11 @@ section.bullets .content {
         min-width: 280px;
     }
 
+    .gridPage #video .main-section > div {
+        width: 80%;
+        min-width: 280px;
+    }
+
     .bullet {
         width: 100%;
     }