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
parent
8de4c037b5
commit
9c14c3768f
|
@ -1928,6 +1928,58 @@ body.td-search {
|
||||||
color: #ffffff !important;
|
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
|
// handle main page features on narrow viewports
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.features-container div.feature-box {
|
.features-container div.feature-box {
|
||||||
|
|
|
@ -1,32 +1,30 @@
|
||||||
{{ $caseStudiesSection := site.GetPage "case-studies" }}
|
{{- $caseStudiesSection := site.GetPage "case-studies" -}}
|
||||||
{{ if not $caseStudiesSection }}
|
{{- if not $caseStudiesSection -}}
|
||||||
{{ errorf "[%s] No case-studies section found. Create content/%s/case-studies/_index.md" $.Page.Lang $.Page.Lang }}
|
{{ 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 }}
|
{{ $caseStudiesPages := where $caseStudiesSection.Pages "Params.featured" true | first 4 }}
|
||||||
<section id="talkToUs">
|
<section class="case-studies">
|
||||||
<div class="main-section">
|
<h3><a href="{{ $caseStudiesSection.RelPermalink }}">{{ $caseStudiesSection.LinkTitle }}</a></h3>
|
||||||
<h3 style="text-align: center"><a href="{{ $caseStudiesSection.RelPermalink }}" style="color: #3371E3; font-weight: 400">{{ $caseStudiesSection.LinkTitle }}</a></h3>
|
<div class="case-study-list">
|
||||||
<div id="caseStudiesWrapper">
|
{{- range $caseStudiesPages -}}
|
||||||
{{ range $caseStudiesPages }}
|
|
||||||
{{ $dark := .Resources.GetMatch "**{dark_logo}*.svg" }}
|
{{ $dark := .Resources.GetMatch "**{dark_logo}*.svg" }}
|
||||||
{{ $logo := .Resources.GetMatch "**{featured_logo}*.svg" }}
|
{{ $logo := .Resources.GetMatch "**{featured_logo}*.svg" }}
|
||||||
|
|
||||||
{{ if not $logo }}
|
{{ if not $logo }}
|
||||||
{{ $logo = .Resources.GetMatch "**logo*.png" }}
|
{{ $logo = .Resources.GetMatch "**logo*.png" }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ if not $dark }}
|
{{- if not $dark -}}
|
||||||
{{ $dark = $logo }}
|
{{ $dark = $logo }}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
<div>
|
<div class="case-study-item">
|
||||||
<picture>
|
<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 }}">
|
<img src="{{ $logo.RelPermalink }}" alt="{{ .Title }}">
|
||||||
</picture>
|
</picture>
|
||||||
<p>"{{ .Params.quote | truncate 100 }}"</p>
|
<p>"{{ .Params.quote | truncate 100 }}"</p>
|
||||||
<a href="{{ .RelPermalink }}">{{ T "main_read_more" }}</a>
|
<a href="{{ .RelPermalink }}">{{ T "main_read_more" }}</a>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
|
|
Loading…
Reference in New Issue