Merge pull request #50983 from lmktfy/20241027_ready_case_studies_shortcode_docsy

Ready case studies shortcode for Docsy

Author: k8s-ci-robot

assets/scss/_custom.scss

@@ -1928,6 +1928,58 @@ body.td-search {
   color: #ffffff !important;
 }
 
+body.td-home section.case-studies {
+   h2, h3 {
+     text-align: center;
+   }
+  .case-study-list {
+    display: flex;
+    flex-direction: row;
+    max-width: 80vw;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: stretch;
+    gap: clamp(1rem, 4em, 10vw);
+    > .case-study-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      text-align: center;
+      width: clamp(6rem, 20%, 50vw);
+      picture, picture img {
+        height: 4.8rem;  
+        text-align: center;
+      }
+      > a {
+        display: block;
+        text-align: right;
+      }
+    }
+    padding-bottom: 2em;
+  }
+  padding-top: 4rem;
+}
+
+@media screen and (max-width: 768px) {
+  .case-study-list {
+    justify-content: center;
+    flex-wrap: wrap;
+    > .case-study-item {
+      min-width: 34vw;
+    }
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .case-study-list {
+    > .case-study-item {
+     min-width: 51vw;
+    }
+  }
+}
+
+
+
 // handle main page features on narrow viewports
 @media screen and (max-width: 768px) {
   .features-container div.feature-box {

layouts/shortcodes/blocks/case-studies.html

@@ -1,32 +1,30 @@
-{{ $caseStudiesSection := site.GetPage "case-studies" }}
-{{ if not $caseStudiesSection }}
+{{- $caseStudiesSection := site.GetPage "case-studies" -}}
+{{- if not $caseStudiesSection -}}
 {{ errorf "[%s] No case-studies section found. Create content/%s/case-studies/_index.md"  $.Page.Lang $.Page.Lang }}
-{{ else }}
+{{- else -}}
 {{ $caseStudiesPages := where $caseStudiesSection.Pages "Params.featured" true | first 4 }}
-<section id="talkToUs">
-  <div class="main-section">
-    <h3  style="text-align: center"><a href="{{ $caseStudiesSection.RelPermalink }}" style="color: #3371E3; font-weight: 400">{{ $caseStudiesSection.LinkTitle }}</a></h3>
-    <div id="caseStudiesWrapper">
-      {{ range $caseStudiesPages }}
+<section class="case-studies">
+  <h3><a href="{{ $caseStudiesSection.RelPermalink }}">{{ $caseStudiesSection.LinkTitle }}</a></h3>
+  <div class="case-study-list">
+      {{- range $caseStudiesPages -}}
 			{{ $dark := .Resources.GetMatch "**{dark_logo}*.svg" }}
 			{{ $logo := .Resources.GetMatch "**{featured_logo}*.svg" }}
 
 			{{ if not $logo }}
 				{{ $logo = .Resources.GetMatch "**logo*.png" }}
 			{{ end }}
-			{{ if not $dark }}
-				{{ $dark =  $logo }}
-			{{ end }}
-	  <div>
+			{{- if not $dark -}}
+				{{ $dark = $logo }}
+			{{- end -}}
+	  <div class="case-study-item">
         <picture>
-	  	  <source srcset={{$dark.RelPermalink}} media="(prefers-color-scheme: dark)">
+	  	  <source srcset="{{$dark.RelPermalink}}" media="(prefers-color-scheme: dark)">
 	  	    <img src="{{ $logo.RelPermalink }}" alt="{{ .Title }}">
 		</picture>
         <p>"{{ .Params.quote | truncate 100 }}"</p>
         <a href="{{ .RelPermalink }}">{{ T "main_read_more" }}</a>
       </div>
-     {{ end }}  
-    </div>
+     {{- end -}}  
   </div>
 </section>
-{{ end }}
+{{- end -}}