Merge pull request #23708 from habibrosyad/gh-23660

Improve maintainability of Case Studies styling

layouts/case-studies/single.html

@@ -2,6 +2,33 @@
 {{ with .Params.content_url }}
 <meta http-equiv="refresh" content="0; URL='{{ . }}'" />
 {{ else }}
-	{{ .Content }}
+	{{ if .Params.new_case_study_styles }}
+		<!-- Heading -->
+		<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }})"{{ end }}>
+			<h1>
+				<span class="heading">{{ .Params.title_prefix | default "CASE STUDY:" }}</span>
+				{{- if isset .Params "heading_title_logo" -}}
+					<img class="heading-logo" src="{{ .Params.heading_title_logo}}" />
+				{{- else if isset .Params "heading_title_text" -}}
+					{{- .Params.heading_title_text -}}
+				{{- end -}}
+				<span class="subheading">{{ .Params.subheading }}</span>
+			</h1>
+		</div>
+		<!-- Details -->
+		<div class="details">
+			{{ range $detail := .Params.case_study_details }}
+				{{ range $key, $value := $detail }}
+					<span class="item">{{ $key }} <strong>{{ $value }}</strong></span>
+				{{ end }}
+			{{ end }}
+		</div>
+		<!-- Content -->
+		<div class="content">
+			{{ .Content }}
+		</div>
+	{{ else }}
+		{{ .Content }}
+	{{ end }}
 {{ end }}
 {{ end }}

layouts/partials/css.html

@@ -27,6 +27,10 @@
   <link rel="stylesheet" href="{{ "css/training.css" | relURL }}">
 {{- end }}
 
+{{- if .Params.new_case_study_styles }}
+  <link rel="stylesheet" href="{{ "css/new-case-studies.css" | relURL }}">
+{{- end}}
+
 {{- with .Params.css }}
   {{- $extraCss := split . "," }}
   {{- range $extraCss }}

layouts/shortcodes/case-studies/lead.html

@@ -0,0 +1 @@
+<div class="lead">{{ .Inner }}</div>

layouts/shortcodes/case-studies/quote.html

@@ -0,0 +1,12 @@
+{{ if .Get "image" }}
+<div class="quote banner {{ if $.Page.Params.use_gradient_overlay }}overlay{{ end }}" style="background-image: url({{ .Get "image" }})">
+{{ else }}
+<div class="quote banner">
+{{ end }}
+  <p class="quote-text">
+    {{ .Inner }}
+    {{ if .Get "author" }}
+      <span class="quote-author">&mdash; {{ .Get "author" }}</span>
+    {{ end }}
+  </p>
+</div>