From 76787f76e45c89e6066097469dba0b6c8ab541b8 Mon Sep 17 00:00:00 2001 From: Alex Contini Date: Thu, 7 Nov 2019 16:19:43 -0500 Subject: [PATCH] Add new case study stylesheet (#17334) * 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 --- static/css/case-studies-gradient.css | 340 +++++++++++++++++++++++++++ 1 file changed, 340 insertions(+) create mode 100644 static/css/case-studies-gradient.css diff --git a/static/css/case-studies-gradient.css b/static/css/case-studies-gradient.css new file mode 100644 index 0000000000..b840f155c0 --- /dev/null +++ b/static/css/case-studies-gradient.css @@ -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%; + + } +}