mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2025-06-26 17:00:46 +00:00
about main style
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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(){
|
||||
|
62
app/assets/scss/modules/_how-it-works.scss
Normal file
62
app/assets/scss/modules/_how-it-works.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
@ -4,4 +4,11 @@
|
||||
width: 255px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
&--foodcoop2{
|
||||
float: left;
|
||||
width: 100px;
|
||||
margin-top: -33px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
@ -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(){
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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%;
|
||||
|
@ -10,6 +10,10 @@
|
||||
max-width: 976px;
|
||||
}
|
||||
|
||||
&--small{
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
&--t-margins{
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
@ -14,4 +14,6 @@
|
||||
@import './modules/_generic-content-container';
|
||||
@import './modules/_video-container';
|
||||
@import './modules/_icon';
|
||||
@import './modules/_how-it-works.scss';
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user