From 45fe526284936668c196c572ec471ff30daa50aa Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 3 Mar 2017 17:15:48 +0000 Subject: [PATCH] Styles for the feature page. --- .../stylesheets/app/review-features-page.less | 231 ++++++++++++++++++ services/web/public/stylesheets/style.less | 1 + 2 files changed, 232 insertions(+) create mode 100644 services/web/public/stylesheets/app/review-features-page.less diff --git a/services/web/public/stylesheets/app/review-features-page.less b/services/web/public/stylesheets/app/review-features-page.less new file mode 100644 index 0000000000..1206da62df --- /dev/null +++ b/services/web/public/stylesheets/app/review-features-page.less @@ -0,0 +1,231 @@ +@rfp-h1-size: 2.442em; +@rfp-h2-size: 1.953em; +@rfp-h3-size: 1.563em; +@rfp-lead-size: 1.25em; + +@rfp-sl-red: @red; +@rfp-rp-blue: @rp-type-blue; + +@rfp-rp-blue-light: #F8F9FD; +@rfp-rp-blue-dark: shade(@rfp-rp-blue, 50%); +@rfp-rp-blue-darker: shade(@rfp-rp-blue, 65%); +@rfp-rp-blue-darkest: shade(@rfp-rp-blue, 75%); + +.rfp-main { + background-color: @rfp-rp-blue-dark; + color: #FFF; + font-size: 18px; +} + // Typographical scale and basics. + .rfp-h1 { + font-size: @rfp-h1-size; + margin-bottom: 2em; + color: inherit; + } + .rfp-h1-main { + color: #505050; + } + .rfp-h2 { + font-size: @rfp-h2-size; + margin-bottom: 2em; + color: inherit; + .rfp-section-feature-alt & { + color: @rfp-rp-blue-dark; + } + } + .rfp-h3 { + font-size: @rfp-h3-size; + margin-bottom: 2em; + color: inherit; + } + .rfp-lead { + font-size: @rfp-lead-size; + margin-bottom: 2em; + max-width: 30em; + margin-left: auto; + margin-right: auto; + font-weight: 300; + } + .rfp-lead-strong { + font-weight: 700; + } + .rfp-p { + margin-bottom: 2em; + max-width: 30em; + margin-left: auto; + margin-right: auto; + font-weight: 300; + .rfp-section-feature & { + margin-left: initial; + } + .rfp-section-feature-alt & { + margin-left: auto; + margin-right: initial; + } + } + .rfp-highlight, + .rfp-highlight-brand { + font-weight: 700; + } + .rfp-highlight-brand { + color: @rfp-sl-red; + } + // Sections + .rfp-section { + padding: 60px; + text-align: center; + } + .rfp-section-masthead { + background-image: linear-gradient(to right, fade(#FFF, 90%), fade(#FFF, 90%)), url(/img/feature-page/full-editor.png); + //color: @rfp-sl-red; + background-size: cover; + background-position: center; + color: #505050; + } + .rfp-section-blockquote { + padding-top: 30px; + padding-bottom: 30px; + background-color: @rfp-sl-red; + } + .rfp-section-feature { + color: #FFF; + text-align: left; + } + .rfp-section-feature-alt { + text-align: right; + color: @rfp-rp-blue-dark; + background-color: @rfp-rp-blue-light; + } + .rfp-section-testimonials { + background-color: @rfp-rp-blue-darkest; + } + .rfp-section-final { + background-color: @rfp-rp-blue-darker; + } + // Elements + .rfp-quote-section { + display: flex; + } + .rfp-quote { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 0 0 50%; + font-size: @rfp-lead-size; + background-color: #FFF; + color: @rfp-rp-blue-dark; + margin-right: 20px; + padding: 20px 40px; + border-left: 0; + max-width: 30em; + font-size: @rfp-lead-size; + quotes: "\201C" "\201D"; + // Override weird Boostrap default. + p { + display: block; + } + &:last-of-type { + margin-right: 0; + } + &::before { + content: none; + } + } + .rfp-quote-main { + display: flex; + max-width: none; + border-left: 0; + margin: 0 auto; + padding: 0; + quotes: "\201C" "\201D"; + font-size: @rfp-lead-size; + // Override weird Boostrap default. + p { + display: block; + } + &::before { + content: none; + } + } + .rfp-quoted-text { + position: relative; + display: inline-block; + font-family: @font-family-serif; + font-style: italic; + text-align: left; + margin: 0 0 40px 0; + &::before { + content: open-quote; + display: block; + position: absolute; + font-family: @font-family-serif; + font-size: @rfp-lead-size; + line-height: inherit; + color: inherit; + left: -0.75em; + } + .rfp-quote-main & { + flex: 1 1 70%; + margin: auto 40px auto auto; + } + } + .rfp-quoted-person { + display: inline-block; + font-size: .8em; + .rfp-quote-main & { + display: flex; + align-items: center; + flex: 0 0 30%; + } + } + .rfp-quote-person-photo { + border-radius: 3em; + width: 6em; + margin-bottom: 20px; + .rfp-quote-main & { + margin-bottom: 0; + margin-right: 20px; + } + } + .rfp-cta-container { + max-width: 40em; + margin: 0 auto; + padding: 40px; + background-color: #FFF; + color: @rfp-rp-blue-dark; + } + .rfp-cta { + display: inline-block; + background-color: @rfp-sl-red; + color: #FFF; + font-size: @rfp-h3-size; + padding: .75em 1.5em; + &:hover, + &:focus { + color: #FFF; + text-decoration: none; + outline: 0; + .rfp-cta-main { + transform: translate(0, -30%); + } + .rfp-cta-extra { + opacity: 1; + transform: translate(-50%, -40%); + } + } + } + .rfp-cta-main { + display: block; + transition: transform 0.25s; + transform: translate(0, 0, 0); + } + .rfp-cta-extra { + display: block; + position: absolute; + left: 50%; + text-transform: uppercase; + transition: opacity 0.25s, transform 0.25s; + transform: translate(-50%, 100%); + opacity: 0; + font-size: 0.5em; + } \ No newline at end of file diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less index 61d5199773..2ab13566ad 100755 --- a/services/web/public/stylesheets/style.less +++ b/services/web/public/stylesheets/style.less @@ -78,6 +78,7 @@ @import "app/subscription.less"; @import "app/sprites.less"; @import "app/invite.less"; +@import "app/review-features-page.less"; @import "../js/libs/pdfListView/TextLayer.css"; @import "../js/libs/pdfListView/AnnotationsLayer.css";