whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new case study stylesheet (#17334)

Browse Source 
* Add new case study stylesheet

We will be adding a bunch of new case studies with an updated design (a lot of it is just simplified). I created this new file, and for the new case studies we will add
this updated code at the top from now on:

---
case_study_styles: true
cid: caseStudies
css: /css/new_case_studies.css
---

So just replacing the old css file with this one. Let me know if that is not going to work the way I think it will, thank you!

* update name

* update file name
This commit is contained in:
Alex Contini
2019-11-07 16:19:43 -05:00
committed by Kubernetes Prow Robot
parent 85f8246dca
commit 76787f76e4
1 changed files with 340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/case-studies-gradient.css
+340
View File
@@ -0,0 +1,340 @@
.article {
width:100%;
border:1px solid grey;
display: inline-block;
vertical-align: top;
position: relative;
color:white;
font-family:"Roboto", sans-serif;
font-weight:300;
color:#ffffff;
padding-top:8%;
padding-bottom:0.5%;
padding-left:8%;
font-size:1.2em;
background:linear-gradient(to right, #2635e4, #c72f6c);
background-size:100% auto;
background-repeat:no-repeat;
}
.image {
}
.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.8;
}
.article * {
position: relative;
/* hack */
}
a {color:white !important;}
#caseStudyTitle {
margin-top: 1em !important;
font-family:"Roboto", sans-serif;
}
p {
font-family:"Roboto", sans-serif;
padding-bottom:1%;
padding-top:1%;
}
.header_logo {
width:23%;
margin-bottom:-0.6%;
margin-left:10px;
}
a {
text-decoration:none;
color:#3366ff;
}
body {
margin:0;
}
h1 {
font-family:"Roboto", sans-serif;
font-weight:bold;
letter-spacing:0.025em;
font-size:42px;
padding-bottom:0px;
}
.subhead {
font-size:26px;
font-weight:300;
line-height:40px;
padding-bottom:2%;
padding-right:10%;
width:80%;
padding-top:0%;
}
.banner1 {
font-family:"Roboto", sans-serif;
font-weight:300;
color:#ffffff;
padding-top:12%;
padding-bottom:0.5%;
padding-left:10%;
font-size:32px;
background-size:100% auto;
}
.greybanner {
font-family:"Roboto", sans-serif;
font-weight:300;
color:#ffffff;
padding-left:5%;
padding-right:5%;
padding-top:4%;
padding-bottom:2%;
font-size:24px;
letter-spacing:0.03em;
line-height:34px;
background-size:100% auto;
background-color:#666666;
}
.quotetext {
font-family:"Roboto", sans-serif;
font-weight:300;
color:#ffffff;
padding-top:5%;
margin-top:0;
padding-bottom:2%;
width:60%;
font-size:1.2em;
line-height:1.4em;
letter-spacing:0.03em;
padding-right:20%;
text-align:center;
margin:0 auto;
}
.greyquotetext {
font-family:"Roboto", sans-serif;
font-weight:300;
color:#ffffff;
width:75%;
text-align:center;
margin:0 auto;
}
h2 {
font-family:"Roboto", sans-serif;
font-weight:300;
font-size:24px;
line-height:34px;
color:#3366ff;
}
.quote {
font-family:"Roboto", sans-serif;
font-weight:300;
font-size:22px;
line-height:32px;
color:#3366ff;
}
.details {
font-family:"Roboto", sans-serif;
font-weight:300;
font-size:18px;
color:#3366ff;
letter-spacing:0.03em;
padding-bottom:1.5%;
padding-top:2%;
padding-left:8%;
}
hr {
border-bottom:0px solid;
width:100%;
opacity:0.3;
background-color:#999999;
height:1px;
}
.col1 {
font-family:"Roboto", sans-serif;
font-weight:100;
color:#606060;
line-height:20px;
letter-spacing:0.03em;
font-size:14px;
}
.col2 {
font-family:"Roboto", sans-serif;
font-weight:300;
line-height:20px;
color:#606060;
letter-spacing:0.03em;
font-size:14px;
}
.fullcol {
width:77%;
margin-left:11%;
margin-right:10%;
margin-top:4%;
margin-bottom:4%;
font-family:"Roboto", sans-serif;
font-weight:300;
line-height:22px;
color:#606060;
letter-spacing:0.03em;
font-size:14px;
}
.cols {
width:80%;
margin-left:8%;
margin-top:3%;
margin-bottom:4%;
font-family:"Roboto", sans-serif;
font-weight:300;
}
h4 {
font-family:"Roboto", sans-serif;
font-weight:400;
letter-spacing:0.9;
font-size:20px;
padding-bottom:0px;
}
.video {
text-align: center;
height: auto;
}
@media screen and (max-width: 910px) {
.quotetext{
width:85%;
margin-left:%;
font-size:1em;
}
.greyquotetext{
width:85%;
margin-left:%;
font-size:0.8em;
line-height:1.4em;
}
h1 {
font-family: "Roboto", sans-serif;
font-weight: bold;
line-height: 36px;
letter-spacing: 0.03em;
font-size: 30px !important;
padding-bottom: 0px;
width: 80%;
}
.header_logo {
width: 35%;
margin-bottom: -.5%;
margin-left: 10px;
}
.subhead {
font-size: 18px;
font-weight: 100;
line-height: 27px;
}
.details {
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 16px;
color: #3366ff;
letter-spacing: 0.03em;
padding-bottom: 2%;
line-height: 28px;
padding-top: 1em;
padding-left: 10%;
}
.logo {
width: 8%;
}
.col1 {
width: 95%;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #606060;
line-height: 20px;
letter-spacing: 0.03em;
font-size: 14px;
}
.col2 {
width: 95%;
padding-top: 2%;
padding-bottom: 5%;
font-family: "Roboto", sans-serif;
font-weight: 300;
line-height: 20px;
color: #606060;
letter-spacing: 0.03em;
font-size: 14px;
}
.fullcol {
margin-top: 6%;
margin-bottom: 8%;
}
h2 {
line-height: 26px;
font-size: 18px;
}
.quote {
font-size: 18px;
line-height: 24px;
}
.logo {
width: 35%;
}
}
@media screen and (max-width: 580px){
.header_logo {
width:60%;
margin-bottom:1%;
margin-left:0%;
margin-top:2%;
}
}