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 */
|
||||
|
||||
.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 -}}
|
||||
<head{{- if hugo.IsProduction}} class="live-site"{{- end -}}>
|
||||
{{ partial "head.html" . }}
|
||||
{{ partial "css.html" . }}
|
||||
</head>
|
||||
<body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -9,59 +9,50 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $featured := (where $pages "Params.featured" true).ByWeight | first 4 }}
|
||||
<section id="mainContent">
|
||||
<div class="main-section">
|
||||
<div class="content">
|
||||
{{ partial "deprecation-warning.html" . }}
|
||||
<div class="case-studies">
|
||||
{{ range $featured }}
|
||||
{{ template "case-study-featured-block" (dict "ctx" $ "page" .) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "deprecation-warning.html" . }}
|
||||
<section id="case-studies">
|
||||
<h2>{{ .Title }}</h2>
|
||||
<div class="case-studies">
|
||||
{{ range $featured }}
|
||||
{{ template "case-study-featured-block" (dict "ctx" $ "page" .) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
{{ $featuredVideos := where .Pages ".Params.video" "!=" nil }}
|
||||
{{ with $featuredVideos }}
|
||||
{{ with index $featuredVideos 0 }}
|
||||
{{ $altText := .LinkTitle }}
|
||||
<section id="video">
|
||||
<div class="main-section">
|
||||
<div>
|
||||
<h4><i>"{{ .Params.quote | html }}"</i></h4>
|
||||
<section id="video">
|
||||
<div class="video-quote">
|
||||
<h4>"{{ .Params.quote | html }}"</h4>
|
||||
{{ $img := .Resources.GetMatch "video.png" }}
|
||||
{{ $small := .Resources.GetMatch "**small*.svg" }}
|
||||
{{ with $small }}<img height="60px" src="{{ .RelPermalink }}" alt="{{ $altText }}">{{ end }}
|
||||
</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>
|
||||
<div id="videoPlayer">
|
||||
<iframe data-url="{{ .Params.video | safeURL }}" frameborder="0" allowfullscreen="true"></iframe>
|
||||
<button id="closeButton"></button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="case-study-video">
|
||||
<iframe src="{{ .Params.video | safeURL }}" allowfullscreen title="{{ $altText }}"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<section id="users">
|
||||
<div class="main-section">
|
||||
<h3>{{ .Title }}</h3>
|
||||
<div id="usersGrid">
|
||||
{{ range $pages.ByTitle }}
|
||||
{{ $logo := .Resources.GetMatch "**{feature,logo}*.svg" }}
|
||||
{{ if not $logo }}
|
||||
{{ $logo = .Resources.GetMatch "**logo*.png" }}
|
||||
{{ end }}
|
||||
{{ $p := . }}
|
||||
<a target="_blank" href="{{ with $p.Params.content_url }}{{ . | safeURL }}{{ else }}{{ .RelPermalink }}{{ end }}">
|
||||
{{ with $logo }}
|
||||
<img src="{{ .RelPermalink }}" width="215px" height="127px" alt="{{ $p.LinkTitle }}">
|
||||
{{ 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 }}
|
||||
{{ end }}
|
||||
</a>
|
||||
{{ 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>
|
||||
</div>
|
||||
<h3>{{ .Title }}</h3>
|
||||
<div id="usersGrid">
|
||||
{{ range $pages.ByTitle }}
|
||||
{{ $logo := .Resources.GetMatch "**{feature,logo}*.svg" }}
|
||||
{{ if not $logo }}
|
||||
{{ $logo = .Resources.GetMatch "**logo*.png" }}
|
||||
{{ end }}
|
||||
{{ $p := . }}
|
||||
<a target="_blank" href="{{ with $p.Params.content_url }}{{ . | safeURL }}{{ else }}{{ .RelPermalink }}{{ end }}">
|
||||
{{ with $logo }}
|
||||
<img src="{{ .RelPermalink }}" width="215px" height="127px" alt="{{ $p.LinkTitle }}">
|
||||
{{ 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 }}
|
||||
{{ end }}
|
||||
</a>
|
||||
{{ 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>
|
||||
</div>
|
||||
</section>
|
||||
{{ .Content }}
|
||||
|
|
@ -74,12 +65,8 @@
|
|||
{{ with $logo }}<img src="{{ .RelPermalink }}" alt="{{ $altText }}">{{ end }}
|
||||
<p class="quote">"{{ .page.Params.quote | html }}"</p>
|
||||
<a href="{{ .page.RelPermalink }}"{{ if $isForeignLanguage }} target="_blank"{{ end }}>
|
||||
{{ if eq .ctx.Lang "hi" }}
|
||||
{{ .page.LinkTitle }} {{ T "main_read_about"}}
|
||||
{{ else }}
|
||||
{{ T "main_read_about"}} {{ .page.LinkTitle }}
|
||||
{{ end }}
|
||||
</a>
|
||||
{{ T "main_read_about"}} {{ .page.LinkTitle }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ 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" }}
|
||||
{{ with .Params.content_url }}
|
||||
<meta http-equiv="refresh" content="0; URL='{{ . }}'" />
|
||||
{{ else }}
|
||||
{{ 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 ( T "case_study_prefix" ) }}</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 }}
|
||||
{{- define "main" -}}
|
||||
<section class="case-study-header">
|
||||
<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }});"{{ end }}>
|
||||
<h2>
|
||||
{{ .Params.title_prefix | default ( T "case_study_prefix" ) }}
|
||||
{{- 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 -}}
|
||||
</h2>
|
||||
<span class="subheading">{{ .Params.subheading }}</span>
|
||||
</div>
|
||||
<!-- Details -->
|
||||
</section>
|
||||
<section class="case-study">
|
||||
<div class="details">
|
||||
{{ range $detail := .Params.case_study_details }}
|
||||
{{ range $key, $value := $detail }}
|
||||
<span class="item">{{ $key }} <strong>{{ $value }}</strong></span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{- end -}}
|
||||
{{ define "announcement" }}
|
||||
<!-- skip announcement -->
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -2,49 +2,6 @@
|
|||
|
||||
{{ $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") }}
|
||||
<link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
|
||||
{{- end }}
|
||||
|
|
@ -53,9 +10,18 @@
|
|||
<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 }}">
|
||||
{{- if .Params.case_study_styles }}
|
||||
<link rel="stylesheet" href="{{ "css/case-studies.css" | relURL }}">
|
||||
{{- 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 }}
|
||||
{{- $extraCss := split . "," }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
#caseStudyTitle {
|
||||
margin-top: 1em !important;
|
||||
}
|
||||
|
||||
.gridPage .launch-content {
|
||||
position: relative;
|
||||
margin: 20px auto 50px;
|
||||
|
|
@ -39,10 +35,6 @@
|
|||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.gridPage .case-study .quote{
|
||||
color: rgb(26,26,26);
|
||||
}
|
||||
|
||||
.gridPage #mainContent {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -74,38 +66,6 @@
|
|||
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 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -263,44 +223,6 @@ section.bullets .content {
|
|||
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){
|
||||
.launch-card {
|
||||
width: 100%;
|
||||
|
|
@ -309,45 +231,3 @@ section.bullets .content {
|
|||
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