Merge pull request #49598 from shurup/css-improve-case-studies

Improve the  styles for case studies' pages

Author: k8s-ci-robot

assets/scss/case_studies.scss

@@ -70,6 +70,10 @@ body.cid-casestudies {
     background-repeat: no-repeat;
   }
 
+  .banner h2 {
+	color: #fff;
+  }
+
   .banner * {
     position: relative;
   }
@@ -213,15 +217,16 @@ body.td-section.cid-casestudies {
   }
 
   .video-quote, .case-study-video {
-     max-width: calc(clamp(40em, 50vw + 20em, 100vw - 4em));
-     margin-left: auto;
-     margin-right: auto;
+     width: 50%;
      padding-top: 1em;
      padding-bottom: 1em;
+     box-sizing: border-box;
+     text-align: center;
      iframe {
        display: block;
        margin-left: auto;
-       margin-top: 1.5em;
+       width: 90%;
+       aspect-ratio: 16 / 9;
      }
   }
 
@@ -269,12 +274,17 @@ body.td-section.cid-casestudies {
   }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1200px) {
   body.td-section.cid-casestudies {
     .case-study {
        width: initial;
        flex-basis: 90vw;
        margin-bottom: 40px;
     }
+
+    .video-quote, .case-study-video {
+       width: initial;
+       flex-basis: 90%;
+    }
   }
 }

layouts/case-studies/single.html

@@ -2,7 +2,7 @@
 <section class="case-study-header">
 	<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }});"{{ end }}>
 		<h2>
-			{{ .Params.title_prefix | default ( T "case_study_prefix" ) }}
+			{{- .Params.title_prefix | default ( T "case_study_prefix" ) -}}&nbsp;
 			{{- if isset .Params "heading_title_logo" -}}
 				<img class="heading-logo" src="{{ .Params.heading_title_logo}}" />
 			{{- else if isset .Params "heading_title_text" -}}

static/css/gridpage.css

@@ -74,6 +74,9 @@ p.attrib {
     background: #f9f9f9;
     height: auto;
     /*height: 340px;*/
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
 }
 
 .gridPage #video .main-section {