Isolate new design stylesheets
This commit is contained in:
Mathieu Magnin
gregoirenovel
parent
14bfda2e26
commit
8af72f7b9a
22 changed files with 27 additions and 24 deletions
308
app/assets/stylesheets/new_design/landing.scss
Normal file
308
app/assets/stylesheets/new_design/landing.scss
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
@import "constants";
|
||||
@import "colors";
|
||||
@import "mixins";
|
||||
@import "placeholders";
|
||||
|
||||
.landing {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.landing-panel {
|
||||
@include vertical-padding(60px);
|
||||
}
|
||||
|
||||
.landing-panel-inner-content {
|
||||
@extend %page-width-container;
|
||||
}
|
||||
|
||||
$landing-breakpoint: 1040px;
|
||||
|
||||
.hero-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 500px;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.hero-tagline-em {
|
||||
color: $blue;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
max-width: 500px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1030px) {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-button {
|
||||
@include horizontal-padding(30px);
|
||||
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 60px;
|
||||
background-color: $blue;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
margin-top: 30px;
|
||||
|
||||
&:hover {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
background-color: $light-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-phone-cta {
|
||||
color: $grey;
|
||||
text-align: center;
|
||||
width: 293px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.landing-panel-title {
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.features-panel {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
.features-panel-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.features {
|
||||
@extend %horizontal-list;
|
||||
width: 100%;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
@extend %horizontal-list-item;
|
||||
width: 320px;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
margin: 15px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.feature-text-em {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.feature-image {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.quotes {
|
||||
@extend %horizontal-list;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
@extend %horizontal-list-item;
|
||||
max-width: 500px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-quotation-mark {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
font-size: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.quote-content-wrapper {
|
||||
margin-left: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quote-author-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.numbers-panel {
|
||||
background-color: $light-grey;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
@extend %horizontal-list;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.number {
|
||||
@extend %horizontal-list-item;
|
||||
width: 320px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $landing-breakpoint) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.number-value {
|
||||
color: $blue;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.number-label {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
$users-breakpoint: 950px;
|
||||
|
||||
.users {
|
||||
@extend %horizontal-list;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $users-breakpoint) {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
@extend %horizontal-list-item;
|
||||
width: 170px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: $users-breakpoint) {
|
||||
margin: 0 15px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-image {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
background-color: $blue;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.cta-panel-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cta-panel-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.cta-panel-explanation {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
$cta-panel-button-border-size: 2px;
|
||||
|
||||
.cta-panel-button {
|
||||
@include horizontal-padding(30px);
|
||||
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 100px;
|
||||
border: $cta-panel-button-border-size solid #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-panel-phone-cta {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
width: 293px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue