From 6fe6345b13aceb1620b4bd257183dc37136ff6ef Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 18 Oct 2017 20:04:41 +0200 Subject: [PATCH] Refresh styling on /welcome --- src/styles/_join.sass | 267 +++++++++++++++++++++++++++++++++++++---- src/styles/_pages.sass | 130 -------------------- 2 files changed, 243 insertions(+), 154 deletions(-) diff --git a/src/styles/_join.sass b/src/styles/_join.sass index bb60a43a..fe392946 100644 --- a/src/styles/_join.sass +++ b/src/styles/_join.sass @@ -1,36 +1,255 @@ -.navbar-backdrop.join - background-color: white - +media-xs - background-size: initial .join position: relative + nav.navbar + background-color: white + + .navbar-brand + color: $color-text + + li a.navbar-item + color: $color-text + + .navbar-container + +container-behavior + #page-header - display: block - padding: 30px 0 150px 0 - font-size: .9em + min-height: 500px - .container - +media-sm - margin-left: 0 - - .page-title, .page-title-summary + .page-title, + .page-title-summary + line-height: 1.2em text-align: left - text-shadow: none + text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .5) - ul - margin-bottom: 25px - - li.special - color: $color-danger - - .page-header-cta-container - margin: 30px 0 50px 60px - justify-content: flex-start + .page-title-summary + font-size: 1.4em li.special color: $color-success font-weight: bold - .page-section-container .page-card-side - padding: 60px 25px + .page-card + &:nth-child(even) + background-color: white + + &-header + margin-bottom: 0 + + &-side + +media-xs + width: 100% + max-width: 100% + + &.text + +media-xs + padding-left: 50px + padding: + bottom: 150px + top: 150px + + &.right + background-color: $color-background-light + + .page-card-title, + .page-card-summary + padding-left: 25px + + .page-card-title:after + left: 25px + + .text + +media-xs + padding-left: 25px + + &.intro + +media-xs + margin-left: 50px + + .page-card-side + +media-sm + max-width: 500px + max-width: 600px + + padding: + bottom: 0 + top: 50px + + &+.page-card-header + padding-top: 0 + + .page-card-summary + font-size: 1.2em + + .page-card-image + align-items: center + display: flex + height: 100% + justify-content: center + + &.light + overflow: hidden + position: relative + + .learn + color: white + font-size: .8em + text-decoration: underline + + .page-card + &-title + color: white + font-weight: bold + + &:after + border-color: white + + &-summary + color: white + position: relative + text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .2) + z-index: 1 + + p + font-size: .9em + + a + color: white + text-decoration: underline + + a.page-card-cta + background: #ff4970 + border-radius: 3px + border: none + box-shadow: 1px 1px 0 rgba(black, .2) + font-size: .8em + font-weight: bold + margin-top: 25px + padding: 7px 20px + text-decoration: none + text-shadow: none + + &:hover + background: lighten(#ff4970, 5%) + + .page-card-image + img + +media-xs + display: none + max-width: initial + position: absolute + width: initial + z-index: 0 + + &.training + margin-top: 45px + + a.page-card-cta + background: #0082ff + + .page-card-image + img + right: 50px + top: 50% + transform: translateY(-50%) + + &.open-movies + .page-card-image + img + top: 50px + left: 50px + + &.services + .page-card-image + img + left: 50px + + &.subscribe + padding: 40px 0 + text-align: center + + span strong + color: $color-danger + + .page-card-side + width: 100% + max-width: 100% + + .page-card-title + line-height: 1.5em + color: white + text-align: center + padding-bottom: 15px + + &:after + border: none + + .page-card-summary + color: $color-text-light-primary + + .page-card-cta + text-align: center + font-size: 1.3em + padding: 7px 35px + margin-right: initial + border: thin solid rgba(white, .8) + border-radius: 3px + + + .training-other + color: $color-text-dark-secondary + font-size: .9em + padding: 30px + text-align: center + + a + color: $color-text-dark-secondary + + .pricing + +media-xs + padding-top: 30px + margin-bottom: 0 + padding-bottom: 100px + + .supported-by + img + max-width: 100% + + .assets + padding-bottom: 80px + + .flex + +media-xs + flex-direction: column + + display: flex + + .box + flex: 1 + margin: 20px + + .page-triplet-container + .triplet-card + +media-xs + margin-top: 20px + + .navbar + .nav-item-sign-in + a.navbar-item + background-color: $color-primary + border: none + border-radius: 3px + color: white + height: auto + font-weight: bold + margin-top: 5px + margin-left: 10px + padding: 10px 20px + + &:hover + background-color: lighten($color-primary, 10%) + box-shadow: none + +.container.wide-on-sm + +media-sm + width: 100% diff --git a/src/styles/_pages.sass b/src/styles/_pages.sass index 9ae0c074..ee0e37a0 100644 --- a/src/styles/_pages.sass +++ b/src/styles/_pages.sass @@ -353,35 +353,8 @@ $page-card-icon-size: 75px +position-center-translate - /* Subscribe specifics */ - &.subscribe - background-color: $color-background-nav - text-align: center - padding: 60px 0 - - .page-card-side - width: 100% - max-width: 100% - - .page-card-title - color: white - text-align: center - padding-bottom: 25px - - &:after - border: none - - .page-card-summary - color: $color-text-light-primary - - .page-card-cta - text-align: center - font-size: 1.5em - padding: 10px 40px - margin-right: initial a.page-card-cta - +button($color-primary, 3px, true) padding: 5px 30px margin-right: 25px font-size: 1em @@ -457,106 +430,3 @@ a.page-card-cta .page-card-header.dark &:after border: none - -.join.navbar-backdrop-overlay - background: linear-gradient(rgba(white, .3) 0%, transparent 60%) - -.join - span.text-background - +text-background(white, darken($color-primary, 30%), 2px, 5px 0) - - p - padding: 0 - margin-left: -10px - - ul - margin: 0 - padding: 0 - - li span.text-background - padding-left: 15px - position: relative - left: -10px - &:before - content: "ยท" - color: white - position: relative - left: -10px - - #page-header - padding: 0 0 0 20px - .page-title - font: - size: 2.8em - - .page-title-summary - font: - style: normal - size: 1.4em - weight: 400 - - .page-header-cta-container - margin: 0 - - .page-card - &:nth-child(even) - background-color: white - &.right - background-color: $color-background-light - - .page-card-title, - .page-card-summary - padding-left: 25px - - .page-card-title:after - left: 25px - - &.dark.right - .page-card-title, - .page-card-summary - padding-left: 0 - - .page-card-title:after - left: 0 - - &.oneofus - display: block - text-align: center - min-height: initial - padding: 25px - color: transparent - background-color: $color-background-light - border-top: thin solid $color-background - font: - size: 1.4em - - transition: color 350ms ease-in-out - - a, strong - color: transparent - transition: color 350ms ease-in-out - - &.active - color: $color-text-dark-primary - a - color: $color-primary - strong - color: $color-danger - - .page-card-header - margin-bottom: 0 - - .page-card-header.dark - margin-bottom: -50px - - &:after - border: none - - .page-card-side - +media-xs - width: 100% - max-width: 100% - - .page-card-image - img - border-radius: 3px