kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Ready case studies shortcode for Docsy 

This changes the HTML on the site landing page(s), not the rendering
within the Case Studies section.

Co-authored-by: Dmitry Shurupov <dmitry.shurupov@palark.com>
pull/50983/head
Tim Bannister 2024-10-27 16:18:34 +00:00
parent 8de4c037b5
commit 9c14c3768f
No known key found for this signature in database
GPG Key ID: 9BF3452DD26C1742
2 changed files with 66 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/scss/_custom.scss
View File

@ -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 {

30
layouts/shortcodes/blocks/case-studies.html
View File

@ -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 -}}