Fix styles for case studies section
Tim Bannister
parent
fea8d974bb
commit
0d1755f311
|
|
@ -1,143 +0,0 @@
|
||||||
// SASS for Case Studies pages go here:
|
|
||||||
|
|
||||||
hr {
|
|
||||||
background-color: #303030;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 15px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subhead {
|
|
||||||
padding-bottom: 2% !important;
|
|
||||||
padding-top: 0.75em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
margin-left: 1.9%;
|
|
||||||
padding-right: 5%;
|
|
||||||
font-size: 16px !important;
|
|
||||||
padding-bottom: 2% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section1 {
|
|
||||||
margin-bottom: 3%;
|
|
||||||
|
|
||||||
.cols {
|
|
||||||
width: 80% !important;
|
|
||||||
margin-left: 6.8%;
|
|
||||||
padding-top: 1.5%;
|
|
||||||
|
|
||||||
.col1 {
|
|
||||||
width: 52% !important;
|
|
||||||
font-weight: 300 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col2 {
|
|
||||||
width: 46% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner2text {
|
|
||||||
width: 63%;
|
|
||||||
padding-top: 10%;
|
|
||||||
padding-left: 0% !important;
|
|
||||||
float: initial !important;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner3text,
|
|
||||||
.banner4text,
|
|
||||||
.banner5text {
|
|
||||||
width: 63%;
|
|
||||||
padding-left: 0% !important;
|
|
||||||
float: initial !important;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullcol {
|
|
||||||
float: initial !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body footer {
|
|
||||||
background-color: #585858 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section1 {
|
|
||||||
float: left !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner1 {
|
|
||||||
padding-left: 11.9% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner2 {
|
|
||||||
float: initial !important;
|
|
||||||
padding-bottom: 2% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
padding: 0% 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner4,
|
|
||||||
.banner3,
|
|
||||||
.banner5 {
|
|
||||||
float: initial !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 910px) {
|
|
||||||
.banner2text {
|
|
||||||
width: 47%;
|
|
||||||
padding-top: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
margin-left: 0%;
|
|
||||||
margin-bottom: 3%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subhead {
|
|
||||||
padding-bottom: 0% !important;
|
|
||||||
padding-top: 0% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner3 {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 780px) {
|
|
||||||
.section1 .cols {
|
|
||||||
width: 100% !important;
|
|
||||||
margin-left: 0%;
|
|
||||||
padding-top: 5%;
|
|
||||||
|
|
||||||
.col1,
|
|
||||||
.col2 {
|
|
||||||
width: 100% !important;
|
|
||||||
margin-left: 0% !important;
|
|
||||||
|
|
||||||
.fullcol {
|
|
||||||
width: 90% !important;
|
|
||||||
margin-left: 5% !important;
|
|
||||||
|
|
||||||
.banner1 {
|
|
||||||
padding-left: 10% !important;
|
|
||||||
margin-bottom: 6% !important;
|
|
||||||
|
|
||||||
.banner2text {
|
|
||||||
padding-top: 60% !important;
|
|
||||||
padding-bottom: 2% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -50,6 +50,35 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Gutter for sidebar splitter */
|
||||||
|
.gutter {
|
||||||
|
background-color: #eee;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gutter.gutter-horizontal {
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebarnav,
|
||||||
|
#maindoc {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#maindoc {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#sidebarnav {
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/* Complex table layout support */
|
/* Complex table layout support */
|
||||||
|
|
||||||
.td-content, body.td-content {
|
.td-content, body.td-content {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,280 @@
|
||||||
|
body.cid-casestudies {
|
||||||
|
h2 {
|
||||||
|
font-size: 3em;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #3366ff;
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1[id]:before,
|
||||||
|
h2[id]:before,
|
||||||
|
h4[id]:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p, .content li {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #606060;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote + h2,
|
||||||
|
.quote + .lead {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 76.2%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 2%;
|
||||||
|
margin-bottom: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-logo {
|
||||||
|
max-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheading {
|
||||||
|
display: block;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.4em;
|
||||||
|
margin-top: 0.75em;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 5%;
|
||||||
|
padding-left: 11.9%;
|
||||||
|
padding-right: 11.9%;
|
||||||
|
font-size: 1.2em;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-color: #666;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner * {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay:before{
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
z-index: 0;
|
||||||
|
background: linear-gradient(to right, #2635e4, #c72f6c);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
font-weight: 300;
|
||||||
|
color: #3366ff;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
padding-bottom: 2% !important;
|
||||||
|
padding-top: 2%;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 11.9%;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details .item {
|
||||||
|
margin-right: 2em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
right: 50%;
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
margin-left: -50vw;
|
||||||
|
margin-right: -50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .quote-text {
|
||||||
|
color: #fff;
|
||||||
|
padding-bottom: 5%;
|
||||||
|
width: 74%;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 1.4em;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .quote-text p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.4em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-author {
|
||||||
|
display: block;
|
||||||
|
margin-top: 3em;
|
||||||
|
font-size: 14px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #3366ff;
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube-quote-sm {
|
||||||
|
display: inline-block;
|
||||||
|
width: 380px;
|
||||||
|
height: 215px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube-quote-sm iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 910px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
font-size: 1em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-text {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-author {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.td-section.cid-casestudies {
|
||||||
|
/* skip color override used elsewhere */
|
||||||
|
.gridPage p:not(.announcement-main > p) {
|
||||||
|
color: initial;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#case-studies h2, h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 3em;
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#case-studies .case-studies {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
max-width: calc(clamp(40em, 20vw + 80em, 100vw - 4em));
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section, main > section:first-child {
|
||||||
|
padding-left: 10em;
|
||||||
|
padding-right: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-quote, .case-study-video {
|
||||||
|
max-width: calc(clamp(40em, 50vw + 20em, 100vw - 4em));
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
iframe {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-studies {
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-study {
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
flex-basis: 48%;
|
||||||
|
padding: 0 40px 0 242px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
min-height: 152px;
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
color: black;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
margin: initial;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-study:nth-child(9), .case-study:nth-child(10) {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-study img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 215px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#usersGrid {
|
||||||
|
max-width: calc(clamp(10em, 25cm + 80em, 100vw - 4em));
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
body.td-section.cid-casestudies {
|
||||||
|
.case-study {
|
||||||
|
width: initial;
|
||||||
|
flex-basis: 90vw;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<head{{- if hugo.IsProduction}} class="live-site"{{- end -}}>
|
<head{{- if hugo.IsProduction}} class="live-site"{{- end -}}>
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
|
{{ partial "css.html" . }}
|
||||||
</head>
|
</head>
|
||||||
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
|
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
|
||||||
<header>
|
<header>
|
||||||
|
|
|
||||||
|
|
@ -9,59 +9,50 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ $featured := (where $pages "Params.featured" true).ByWeight | first 4 }}
|
{{ $featured := (where $pages "Params.featured" true).ByWeight | first 4 }}
|
||||||
<section id="mainContent">
|
{{ partial "deprecation-warning.html" . }}
|
||||||
<div class="main-section">
|
<section id="case-studies">
|
||||||
<div class="content">
|
<h2>{{ .Title }}</h2>
|
||||||
{{ partial "deprecation-warning.html" . }}
|
<div class="case-studies">
|
||||||
<div class="case-studies">
|
{{ range $featured }}
|
||||||
{{ range $featured }}
|
{{ template "case-study-featured-block" (dict "ctx" $ "page" .) }}
|
||||||
{{ template "case-study-featured-block" (dict "ctx" $ "page" .) }}
|
{{ end }}
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
{{ $featuredVideos := where .Pages ".Params.video" "!=" nil }}
|
{{ $featuredVideos := where .Pages ".Params.video" "!=" nil }}
|
||||||
{{ with $featuredVideos }}
|
{{ with $featuredVideos }}
|
||||||
{{ with index $featuredVideos 0 }}
|
{{ with index $featuredVideos 0 }}
|
||||||
{{ $altText := .LinkTitle }}
|
{{ $altText := .LinkTitle }}
|
||||||
<section id="video">
|
<section id="video">
|
||||||
<div class="main-section">
|
<div class="video-quote">
|
||||||
<div>
|
<h4>"{{ .Params.quote | html }}"</h4>
|
||||||
<h4><i>"{{ .Params.quote | html }}"</i></h4>
|
|
||||||
{{ $img := .Resources.GetMatch "video.png" }}
|
{{ $img := .Resources.GetMatch "video.png" }}
|
||||||
{{ $small := .Resources.GetMatch "**small*.svg" }}
|
{{ $small := .Resources.GetMatch "**small*.svg" }}
|
||||||
{{ with $small }}<img height="60px" src="{{ .RelPermalink }}" alt="{{ $altText }}">{{ end }}
|
{{ with $small }}<img height="60px" src="{{ .RelPermalink }}" alt="{{ $altText }}">{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div style= "padding-left: 40px;"><button onclick="kub.showVideo()">{{ with $img }}<img src="{{ .RelPermalink }}" alt="Box video">{{ end }}<h6>Kubernetes at Box</h6></button></div>
|
<div class="case-study-video">
|
||||||
</div>
|
<iframe src="{{ .Params.video | safeURL }}" allowfullscreen title="{{ $altText }}"></iframe>
|
||||||
<div id="videoPlayer">
|
</div>
|
||||||
<iframe data-url="{{ .Params.video | safeURL }}" frameborder="0" allowfullscreen="true"></iframe>
|
</section>
|
||||||
<button id="closeButton"></button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<section id="users">
|
<section id="users">
|
||||||
<div class="main-section">
|
<h3>{{ .Title }}</h3>
|
||||||
<h3>{{ .Title }}</h3>
|
<div id="usersGrid">
|
||||||
<div id="usersGrid">
|
{{ range $pages.ByTitle }}
|
||||||
{{ range $pages.ByTitle }}
|
{{ $logo := .Resources.GetMatch "**{feature,logo}*.svg" }}
|
||||||
{{ $logo := .Resources.GetMatch "**{feature,logo}*.svg" }}
|
{{ if not $logo }}
|
||||||
{{ if not $logo }}
|
{{ $logo = .Resources.GetMatch "**logo*.png" }}
|
||||||
{{ $logo = .Resources.GetMatch "**logo*.png" }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ $p := . }}
|
||||||
{{ $p := . }}
|
<a target="_blank" href="{{ with $p.Params.content_url }}{{ . | safeURL }}{{ else }}{{ .RelPermalink }}{{ end }}">
|
||||||
<a target="_blank" href="{{ with $p.Params.content_url }}{{ . | safeURL }}{{ else }}{{ .RelPermalink }}{{ end }}">
|
{{ with $logo }}
|
||||||
{{ with $logo }}
|
<img src="{{ .RelPermalink }}" width="215px" height="127px" alt="{{ $p.LinkTitle }}">
|
||||||
<img src="{{ .RelPermalink }}" width="215px" height="127px" alt="{{ $p.LinkTitle }}">
|
{{ else }}
|
||||||
{{ else }}
|
{{ errorf "Case Studies: Missing logo for %s. Put a PNG or SVG with the word 'logo' in the filename into %q" $p.LinkTitle $p.File.Dir }}
|
||||||
{{ errorf "Case Studies: Missing logo for %s. Put a PNG or SVG with the word 'logo' in the filename into %q" $p.LinkTitle $p.File.Dir }}
|
{{ end }}
|
||||||
{{ end }}
|
</a>
|
||||||
</a>
|
{{ end }}
|
||||||
{{ end }}
|
<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img height="127px"src="/images/case-studies/story.svg" alt="{{ T "layouts_case_studies_list_tell" }}"></a>
|
||||||
<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img height="127px"src="/images/case-studies/story.svg" alt="{{ T "layouts_case_studies_list_tell" }}"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
|
|
@ -74,12 +65,8 @@
|
||||||
{{ with $logo }}<img src="{{ .RelPermalink }}" alt="{{ $altText }}">{{ end }}
|
{{ with $logo }}<img src="{{ .RelPermalink }}" alt="{{ $altText }}">{{ end }}
|
||||||
<p class="quote">"{{ .page.Params.quote | html }}"</p>
|
<p class="quote">"{{ .page.Params.quote | html }}"</p>
|
||||||
<a href="{{ .page.RelPermalink }}"{{ if $isForeignLanguage }} target="_blank"{{ end }}>
|
<a href="{{ .page.RelPermalink }}"{{ if $isForeignLanguage }} target="_blank"{{ end }}>
|
||||||
{{ if eq .ctx.Lang "hi" }}
|
{{ T "main_read_about"}} {{ .page.LinkTitle }}
|
||||||
{{ .page.LinkTitle }} {{ T "main_read_about"}}
|
</a>
|
||||||
{{ else }}
|
|
||||||
{{ T "main_read_about"}} {{ .page.LinkTitle }}
|
|
||||||
{{ end }}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ define "announcement" }}
|
{{ define "announcement" }}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html id="{{ .Params.cid }}" lang="{{ .Language }}" class="{{ .Params.class }}">
|
|
||||||
<head>
|
|
||||||
{{ partial "head.html" . }}
|
|
||||||
</head>
|
|
||||||
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
|
|
||||||
{{ partial "navbar.html" . }}
|
|
||||||
{{ partial "deprecation-warning.html" . }}
|
|
||||||
<div data-pagefind-body>
|
|
||||||
{{ block "main" . }}{{ end }}
|
|
||||||
</div>
|
|
||||||
{{ partialCached "footer.html" . }}
|
|
||||||
{{ partialCached "scripts.html" . }}
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,34 +1,32 @@
|
||||||
{{ define "main" }}
|
{{- define "main" -}}
|
||||||
{{ with .Params.content_url }}
|
<section class="case-study-header">
|
||||||
<meta http-equiv="refresh" content="0; URL='{{ . }}'" />
|
<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }});"{{ end }}>
|
||||||
{{ else }}
|
<h2>
|
||||||
{{ if .Params.new_case_study_styles }}
|
{{ .Params.title_prefix | default ( T "case_study_prefix" ) }}
|
||||||
<!-- Heading -->
|
{{- if isset .Params "heading_title_logo" -}}
|
||||||
<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }});"{{ end }}>
|
<img class="heading-logo" src="{{ .Params.heading_title_logo}}" />
|
||||||
<h1>
|
{{- else if isset .Params "heading_title_text" -}}
|
||||||
<span class="heading">{{ .Params.title_prefix | default ( T "case_study_prefix" ) }}</span>
|
{{- .Params.heading_title_text -}}
|
||||||
{{- if isset .Params "heading_title_logo" -}}
|
{{- end -}}
|
||||||
<img class="heading-logo" src="{{ .Params.heading_title_logo}}" />
|
</h2>
|
||||||
{{- else if isset .Params "heading_title_text" -}}
|
<span class="subheading">{{ .Params.subheading }}</span>
|
||||||
{{- .Params.heading_title_text -}}
|
</div>
|
||||||
{{- end -}}
|
<!-- Details -->
|
||||||
<span class="subheading">{{ .Params.subheading }}</span>
|
</section>
|
||||||
</h1>
|
<section class="case-study">
|
||||||
</div>
|
<div class="details">
|
||||||
<!-- Details -->
|
{{ range $detail := .Params.case_study_details }}
|
||||||
<div class="details">
|
{{ range $key, $value := $detail }}
|
||||||
{{ range $detail := .Params.case_study_details }}
|
<span class="item">{{ $key }} <strong>{{ $value }}</strong></span>
|
||||||
{{ range $key, $value := $detail }}
|
|
||||||
<span class="item">{{ $key }} <strong>{{ $value }}</strong></span>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
{{ end }}
|
||||||
<!-- Content -->
|
</div>
|
||||||
<div class="content">
|
<!-- Content -->
|
||||||
{{ .Content }}
|
<div class="content">
|
||||||
</div>
|
|
||||||
{{ else }}
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
{{ end }}
|
</div>
|
||||||
{{ end }}
|
</section>
|
||||||
|
{{- end -}}
|
||||||
|
{{ define "announcement" }}
|
||||||
|
<!-- skip announcement -->
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -2,49 +2,6 @@
|
||||||
|
|
||||||
{{ $inServerMode := hugo.IsServer }}
|
{{ $inServerMode := hugo.IsServer }}
|
||||||
|
|
||||||
<!--begin splitter-->
|
|
||||||
<style>
|
|
||||||
.gutter {
|
|
||||||
background-color: #eee;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gutter.gutter-horizontal {
|
|
||||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
|
|
||||||
cursor: col-resize;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebarnav,
|
|
||||||
#maindoc {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#maindoc {
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
#sidebarnav {
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!--end splitter-->
|
|
||||||
|
|
||||||
{{- if .Params.case_study_styles }}
|
|
||||||
{{ $cssOutput := "css/case-studies.css" }}
|
|
||||||
{{ $caseStudiesCSS := resources.Get "scss/_case-studies.scss" | css.Sass }}
|
|
||||||
{{ if $inServerMode }}
|
|
||||||
<link rel="stylesheet" href="{{ $caseStudiesCSS.RelPermalink }}">
|
|
||||||
{{ else }}
|
|
||||||
{{ $prodCaseStudiesCSS := $caseStudiesCSS | fingerprint }}
|
|
||||||
<link rel="stylesheet" href="{{ $prodCaseStudiesCSS.RelPermalink }}" integrity="{{ $prodCaseStudiesCSS.Data.Integrity }}">
|
|
||||||
{{ end }}
|
|
||||||
{{- end }}
|
|
||||||
|
|
||||||
{{- if or (eq .Params.class "gridPage") (eq .Params.class "gridPage gridPageHome") }}
|
{{- if or (eq .Params.class "gridPage") (eq .Params.class "gridPage gridPageHome") }}
|
||||||
<link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
|
<link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
@ -53,9 +10,18 @@
|
||||||
<link rel="stylesheet" href="{{ "css/training.css" | relURL }}">
|
<link rel="stylesheet" href="{{ "css/training.css" | relURL }}">
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
{{- if .Params.new_case_study_styles }}
|
{{- if .Params.case_study_styles }}
|
||||||
<link rel="stylesheet" href="{{ "css/new-case-studies.css" | relURL }}">
|
<link rel="stylesheet" href="{{ "css/case-studies.css" | relURL }}">
|
||||||
{{- end}}
|
{{- end}}
|
||||||
|
{{- if (eq .Section "case-studies") }}
|
||||||
|
{{ $caseStudiesCSS := resources.Get "scss/case_studies.scss" | css.Sass | resources.Copy "/css/case-studies.css" }}
|
||||||
|
{{ if $inServerMode }}
|
||||||
|
<link rel="stylesheet" href="{{ $caseStudiesCSS.RelPermalink }}">
|
||||||
|
{{ else }}
|
||||||
|
{{ $prodCaseStudiesCSS := $caseStudiesCSS | fingerprint }}
|
||||||
|
<link rel="stylesheet" href="{{ $prodCaseStudiesCSS.RelPermalink }}" integrity="{{ $prodCaseStudiesCSS.Data.Integrity }}">
|
||||||
|
{{ end }}
|
||||||
|
{{- end }}
|
||||||
|
|
||||||
{{- with .Params.css }}
|
{{- with .Params.css }}
|
||||||
{{- $extraCss := split . "," }}
|
{{- $extraCss := split . "," }}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
#caseStudyTitle {
|
|
||||||
margin-top: 1em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage .launch-content {
|
.gridPage .launch-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 20px auto 50px;
|
margin: 20px auto 50px;
|
||||||
|
|
@ -39,10 +35,6 @@
|
||||||
font-weight: 300 !important;
|
font-weight: 300 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gridPage .case-study .quote{
|
|
||||||
color: rgb(26,26,26);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage #mainContent {
|
.gridPage #mainContent {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -74,38 +66,6 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-studies {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study {
|
|
||||||
position: relative;
|
|
||||||
width: 50%;
|
|
||||||
padding: 0 40px 0 242px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
min-height: 152px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study:nth-child(9), .case-study:nth-child(10) {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width:215px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage #mainContent .content .case-study p {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.attrib {
|
p.attrib {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
@ -263,44 +223,6 @@ section.bullets .content {
|
||||||
line-height: 28px !important;
|
line-height: 28px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1024px){
|
|
||||||
.case-study {
|
|
||||||
padding: 0 10%;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study img {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study p.quote {
|
|
||||||
margin-top: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study p.attrib {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px){
|
|
||||||
.gridPage #video .main-section {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage #video .main-section > div {
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage #video .main-section > div + div {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage #video h3 {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px){
|
@media screen and (max-width: 768px){
|
||||||
.launch-card {
|
.launch-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -309,45 +231,3 @@ section.bullets .content {
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 640px){
|
|
||||||
.case-study {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study:nth-child(3) {
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-study img {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage .feature {
|
|
||||||
margin-top: 50px;
|
|
||||||
padding: 180px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage .feature img {
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px){
|
|
||||||
.gridPage #hero {
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gridPage #video .main-section > div {
|
|
||||||
width: 80%;
|
|
||||||
min-width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bullet {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue