about main style

This commit is contained in:
Tancre
2020-10-09 14:48:01 +02:00
parent 0ae29ca91a
commit a731f1a2b8
14 changed files with 264 additions and 107 deletions

View File

@ -1,3 +1,7 @@
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
color: #333;
@ -6,4 +10,5 @@ body {
img{
max-width: 100%;
height: auto;
}
}

View File

@ -5,7 +5,6 @@
margin-bottom: 70px;
@include atLarge{
margin-top: 7rem;
margin-bottom: 0px;
}
}
@ -16,7 +15,7 @@
p {
font-weight: 300;
line-height: 1.65;
line-height: 1.25;
margin: 0;
font-size: 1.2rem;

View File

@ -1,8 +1,9 @@
.headline{
margin:auto;
&--l-margin{
&--lt-margin{
margin-left: 55px;
margin-top: -18px;
}
&--s-width {
@ -15,7 +16,7 @@
}
&__title {
font-weight: 500;
font-weight: 300;
font-size: 1.7rem;
@include atMedium(){

View File

@ -0,0 +1,62 @@
.how-it-works{
margin: 50px 0px;
strong {
font-weight: 800;
}
&--centered{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
transform: translateY(-50%);
text-align: center;
}
&--t-margin{
margin-top: -30px;
}
&__last-section{
padding: 100px 0px 50px 0px;
background-color: rgba(white,0.9);
}
p{
font-weight: 300;
line-height: 1.25;
margin: 0;
font-size: 1.2rem;
@include atMedium{
margin: 0 0 1.8rem 0;
font-size: 1.4rem;
}
}
&__title{
font-weight: 300;
font-size: 1.7rem;
margin-bottom: 45px;
@include atMedium(){
margin-top: 10px;
font-size: 2.1rem;
}
}
&__icon--foodcoop{
width: 255px;
margin-left: 60px;
}
&__icon--foodcoop2{
width: 100px;
margin-right: .8rem;
margin-bottom: -20px;
}
}

View File

@ -4,4 +4,11 @@
width: 255px;
margin-left: 60px;
}
&--foodcoop2{
float: left;
width: 100px;
margin-top: -33px;
margin-right: 20px;
}
}

View File

@ -24,7 +24,7 @@
&__title {
font-family: "CocogooseBold";
color: white;
font-size: 2.8rem;
font-size: 2.5rem;
margin: 0;
@include atSmall(){
@ -41,7 +41,7 @@
// font-family: "CocogooseNormal";
font-weight: 400;
color: white;
font-size: 1.5rem;
font-size: 1.4rem;
margin: 0;
@include atSmall(){

View File

@ -1,31 +1,33 @@
.page-section{
padding: 1.2rem 0;
position: relative;
&--tb-padding{
padding: 1.2rem 0;
@include atMedium(){
position: unset;
padding: 4.5rem 0;
@include atMedium(){
position: unset;
padding: 4.5rem 0;
}
}
&--t-padding{
padding-top: 1.2rem;
// &--no-b-padding-until-medium{
// padding-bottom: 0;
@include atMedium(){
position: unset;
padding-top: 4.5rem;
}
}
// @include atMedium(){
// padding-bottom: 4.5rem;
&--b-padding-small{
padding-bottom: 1rem;
// }
// }
@include atMedium(){
position: unset;
padding-top: 3.8rem;
}
}
// &--no-b-padding-until-large{
// padding-bottom: 0;
// @include atMedium(){
// padding-bottom: 4.5rem;
// }
// }
&--b-margin{
margin-bottom: 70px;
@ -79,6 +81,8 @@
}
// &--testimonials{
// background: #e0e6ef;

View File

@ -1,44 +1,16 @@
.row{
@include clearfix();
&--t-padding{
padding-top: 80px;
}
&--gutters {
margin-right: -65px;
}
&--gutters-large {
margin-right: -100px;
}
&--gutters-small {
margin-right: -45px;
margin-right: -60px;
}
&--gutters > div {
padding-right: 60px;
}
&--gutters-large > div {
padding-right: 100px;
}
&--gutters-small > div {
padding-right: 45px;
}
&__b-margin-until-medium{
margin-bottom: 1rem;
}
@include atLarge(){
&__b-margin-until-medium{
margin-bottom: 0rem;
}
&__medium-3--larger {
float: left;
@ -50,10 +22,6 @@
width: 33.33%;
}
&__medium-4--larger{
width: 27%;
}
&__medium-6 {
float: left;
width: 50%;
@ -64,10 +32,6 @@
width: 66.66%;
}
&__medium-8--smaller{
width: 63%;
}
&__medium-9--smaller {
float: right;
width: 70%;

View File

@ -10,6 +10,10 @@
max-width: 976px;
}
&--small{
max-width: 750px;
}
&--t-margins{
margin-top: 100px;
}

View File

@ -14,4 +14,6 @@
@import './modules/_generic-content-container';
@import './modules/_video-container';
@import './modules/_icon';
@import './modules/_how-it-works.scss';