mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2024-12-25 12:45:23 +00:00
about main style
This commit is contained in:
parent
0ae29ca91a
commit
a731f1a2b8
Binary file not shown.
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.4 KiB |
@ -1,3 +1,7 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
color: #333;
|
color: #333;
|
||||||
@ -7,3 +11,4 @@ img{
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,7 +5,6 @@
|
|||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
|
|
||||||
@include atLarge{
|
@include atLarge{
|
||||||
margin-top: 7rem;
|
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -16,7 +15,7 @@
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.65;
|
line-height: 1.25;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
|
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
.headline{
|
.headline{
|
||||||
margin:auto;
|
margin:auto;
|
||||||
|
|
||||||
&--l-margin{
|
&--lt-margin{
|
||||||
margin-left: 55px;
|
margin-left: 55px;
|
||||||
|
margin-top: -18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--s-width {
|
&--s-width {
|
||||||
@ -15,7 +16,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-weight: 500;
|
font-weight: 300;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
|
|
||||||
@include atMedium(){
|
@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;
|
width: 255px;
|
||||||
margin-left: 60px;
|
margin-left: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--foodcoop2{
|
||||||
|
float: left;
|
||||||
|
width: 100px;
|
||||||
|
margin-top: -33px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
@ -24,7 +24,7 @@
|
|||||||
&__title {
|
&__title {
|
||||||
font-family: "CocogooseBold";
|
font-family: "CocogooseBold";
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 2.8rem;
|
font-size: 2.5rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@include atSmall(){
|
@include atSmall(){
|
||||||
@ -41,7 +41,7 @@
|
|||||||
// font-family: "CocogooseNormal";
|
// font-family: "CocogooseNormal";
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.5rem;
|
font-size: 1.4rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@include atSmall(){
|
@include atSmall(){
|
||||||
|
@ -1,31 +1,33 @@
|
|||||||
.page-section{
|
.page-section{
|
||||||
padding: 1.2rem 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&--tb-padding{
|
||||||
|
padding: 1.2rem 0;
|
||||||
|
|
||||||
@include atMedium(){
|
@include atMedium(){
|
||||||
position: unset;
|
position: unset;
|
||||||
padding: 4.5rem 0;
|
padding: 4.5rem 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--t-padding{
|
||||||
|
padding-top: 1.2rem;
|
||||||
|
|
||||||
// &--no-b-padding-until-medium{
|
@include atMedium(){
|
||||||
// padding-bottom: 0;
|
position: unset;
|
||||||
|
padding-top: 4.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// @include atMedium(){
|
&--b-padding-small{
|
||||||
// padding-bottom: 4.5rem;
|
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{
|
&--b-margin{
|
||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
@ -79,6 +81,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// &--testimonials{
|
// &--testimonials{
|
||||||
// background: #e0e6ef;
|
// background: #e0e6ef;
|
||||||
|
|
||||||
|
@ -2,44 +2,16 @@
|
|||||||
|
|
||||||
@include clearfix();
|
@include clearfix();
|
||||||
|
|
||||||
&--t-padding{
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--gutters {
|
&--gutters {
|
||||||
margin-right: -65px;
|
margin-right: -60px;
|
||||||
}
|
|
||||||
|
|
||||||
&--gutters-large {
|
|
||||||
margin-right: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--gutters-small {
|
|
||||||
margin-right: -45px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--gutters > div {
|
&--gutters > div {
|
||||||
padding-right: 60px;
|
padding-right: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--gutters-large > div {
|
|
||||||
padding-right: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--gutters-small > div {
|
|
||||||
padding-right: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__b-margin-until-medium{
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include atLarge(){
|
@include atLarge(){
|
||||||
|
|
||||||
&__b-margin-until-medium{
|
|
||||||
margin-bottom: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__medium-3--larger {
|
&__medium-3--larger {
|
||||||
float: left;
|
float: left;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
@ -50,10 +22,6 @@
|
|||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__medium-4--larger{
|
|
||||||
width: 27%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__medium-6 {
|
&__medium-6 {
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
@ -64,10 +32,6 @@
|
|||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__medium-8--smaller{
|
|
||||||
width: 63%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__medium-9--smaller {
|
&__medium-9--smaller {
|
||||||
float: right;
|
float: right;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
@ -10,6 +10,10 @@
|
|||||||
max-width: 976px;
|
max-width: 976px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--small{
|
||||||
|
max-width: 750px;
|
||||||
|
}
|
||||||
|
|
||||||
&--t-margins{
|
&--t-margins{
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
}
|
}
|
||||||
|
@ -14,4 +14,6 @@
|
|||||||
@import './modules/_generic-content-container';
|
@import './modules/_generic-content-container';
|
||||||
@import './modules/_video-container';
|
@import './modules/_video-container';
|
||||||
@import './modules/_icon';
|
@import './modules/_icon';
|
||||||
|
@import './modules/_how-it-works.scss';
|
||||||
|
|
||||||
|
|
||||||
|
@ -67,14 +67,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ABOUT US -->
|
<!-- ABOUT US -->
|
||||||
<div id="about-us" class="page-section page-section--red page-section--b-margin">
|
<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="headline headline--s-width headline--centered headline--b-margin">
|
<div class="headline headline--s-width headline--centered headline--b-margin">
|
||||||
<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
|
<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
|
||||||
<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
|
<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="row row--gutters">
|
<div class="row row--gutters">
|
||||||
<div class="row__medium-8 row__medium-8--smaller">
|
<div class="row__medium-8">
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
<video class="content--video--right" width="560" height="315" controls>
|
<video class="content--video--right" width="560" height="315" controls>
|
||||||
<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
|
<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
|
||||||
@ -82,7 +82,7 @@
|
|||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row__medium-4 row__medium-4--larger">
|
<div class="row__medium-4">
|
||||||
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
|
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
|
||||||
<a href="#" class="btn btn--medium">Join us!</a>
|
<a href="#" class="btn btn--medium">Join us!</a>
|
||||||
<p>We are happy to have new members at the moment. Join us now or simply drop by on our next pickup day and say hello! </p>
|
<p>We are happy to have new members at the moment. Join us now or simply drop by on our next pickup day and say hello! </p>
|
||||||
@ -95,24 +95,86 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- HOW IT WORKS -->
|
<!-- HOW IT WORKS -->
|
||||||
<div id="how-it-works" class="page-section page-section--darkGreen">
|
<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding">
|
||||||
<div class="wrapper wrapper--t-margins">
|
<div class="wrapper wrapper--t-margins">
|
||||||
<div class="row">
|
<div class="row row--gutters">
|
||||||
<div class="row__medium-3 row__medium-3--larger">
|
<div class="row__medium-3--larger">
|
||||||
<img class="icon icon--foodcoop" src="./assets/media/images/foodcoop.png">
|
<img class="how-it-works__icon how-it-works__icon--foodcoop" src="./assets/media/images/foodcoop.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="row__medium-9 row__medium-9--smaller">
|
<div class="row__medium-9--smaller">
|
||||||
<div class="headline headline--l-margin">
|
<div class="headline headline--lt-margin">
|
||||||
<h2 class="headline__title ">What is a foodcoop?</h2>
|
<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2>
|
||||||
<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-yourself supermarket.</h2>
|
<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. <br> A collective do-it-yourself supermarket.</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="how-it-works-2" class="page-section page-section--lightGreen">
|
<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding page-section--b-padding-small">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<div class="how-it-works">
|
||||||
|
<div class="row row--gutters">
|
||||||
|
<div class="row__medium-6">
|
||||||
|
<img src="./assets/media/images/pickup_day_short.png">
|
||||||
|
</div>
|
||||||
|
<div class="row__medium-6">
|
||||||
|
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Become a <strong>Member</strong> </h2>
|
||||||
|
<p>If you’re a member of our BioBulkBende, you have access to great organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros, and contribute a bit of your time and energy to keep our co-op running.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="how-it-works">
|
||||||
|
<div class="row row--gutters">
|
||||||
|
<div class="row__medium-6">
|
||||||
|
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Join a <strong>Work Group</strong> </h2>
|
||||||
|
<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, you have to join a work group.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row__medium-6">
|
||||||
|
<img src="./assets/media/images/pickup_day_short.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="how-it-works">
|
||||||
|
<div class="row row--gutters">
|
||||||
|
<div class="row__medium-6">
|
||||||
|
<img src="./assets/media/images/pickup_day_short.png">
|
||||||
|
</div>
|
||||||
|
<div class="row__medium-6">
|
||||||
|
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Order your <strong>Food</strong> </h2>
|
||||||
|
<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div >
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="how-it-works-3" class="page-section">
|
||||||
|
<picture>
|
||||||
|
<source srcset="./assets/media/images/veg_large_cropped.png 1920w" media="(min-width: 1380px)">
|
||||||
|
<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
|
||||||
|
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
|
||||||
|
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||||||
|
</picture>
|
||||||
|
|
||||||
|
<div class="how-it-works">
|
||||||
|
<div class="how-it-works--centered how-it-works--t-margin">
|
||||||
|
<div class="wrapper wrapper--white wrapper--medium">
|
||||||
|
<div class="how-it-works__last-section">
|
||||||
|
<div class="wrapper wrapper--small">
|
||||||
|
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"><strong>Pick-up day</strong></h2>
|
||||||
|
<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
|
||||||
|
<p><a href="#" class="btn btn--large"><b>Join us!</b></a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -320,6 +320,9 @@ template {
|
|||||||
font-family: "CocogooseExtra";
|
font-family: "CocogooseExtra";
|
||||||
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
|
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
color: #333; }
|
color: #333; }
|
||||||
@ -525,7 +528,7 @@ img {
|
|||||||
.large-hero__title {
|
.large-hero__title {
|
||||||
font-family: "CocogooseBold";
|
font-family: "CocogooseBold";
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 2.8rem;
|
font-size: 2.5rem;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
@media (min-width: 530px) {
|
@media (min-width: 530px) {
|
||||||
.large-hero__title {
|
.large-hero__title {
|
||||||
@ -536,7 +539,7 @@ img {
|
|||||||
.large-hero__subtitle {
|
.large-hero__subtitle {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.5rem;
|
font-size: 1.4rem;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
@media (min-width: 530px) {
|
@media (min-width: 530px) {
|
||||||
.large-hero__subtitle {
|
.large-hero__subtitle {
|
||||||
@ -567,16 +570,31 @@ img {
|
|||||||
margin-right: auto; }
|
margin-right: auto; }
|
||||||
.wrapper--medium {
|
.wrapper--medium {
|
||||||
max-width: 976px; }
|
max-width: 976px; }
|
||||||
|
.wrapper--small {
|
||||||
|
max-width: 750px; }
|
||||||
.wrapper--t-margins {
|
.wrapper--t-margins {
|
||||||
margin-top: 100px; }
|
margin-top: 100px; }
|
||||||
|
|
||||||
.page-section {
|
.page-section {
|
||||||
padding: 1.2rem 0;
|
|
||||||
position: relative; }
|
position: relative; }
|
||||||
@media (min-width: 800px) {
|
.page-section--tb-padding {
|
||||||
.page-section {
|
padding: 1.2rem 0; }
|
||||||
position: unset;
|
@media (min-width: 800px) {
|
||||||
padding: 4.5rem 0; } }
|
.page-section--tb-padding {
|
||||||
|
position: unset;
|
||||||
|
padding: 4.5rem 0; } }
|
||||||
|
.page-section--t-padding {
|
||||||
|
padding-top: 1.2rem; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.page-section--t-padding {
|
||||||
|
position: unset;
|
||||||
|
padding-top: 4.5rem; } }
|
||||||
|
.page-section--b-padding-small {
|
||||||
|
padding-bottom: 1rem; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.page-section--b-padding-small {
|
||||||
|
position: unset;
|
||||||
|
padding-top: 3.8rem; } }
|
||||||
.page-section--b-margin {
|
.page-section--b-margin {
|
||||||
margin-bottom: 70px; }
|
margin-bottom: 70px; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
@ -618,15 +636,16 @@ img {
|
|||||||
|
|
||||||
.headline {
|
.headline {
|
||||||
margin: auto; }
|
margin: auto; }
|
||||||
.headline--l-margin {
|
.headline--lt-margin {
|
||||||
margin-left: 55px; }
|
margin-left: 55px;
|
||||||
|
margin-top: -18px; }
|
||||||
.headline--s-width {
|
.headline--s-width {
|
||||||
max-width: 500px; }
|
max-width: 500px; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
.headline--s-width {
|
.headline--s-width {
|
||||||
max-width: 1000px; } }
|
max-width: 1000px; } }
|
||||||
.headline__title {
|
.headline__title {
|
||||||
font-weight: 500;
|
font-weight: 300;
|
||||||
font-size: 1.7rem; }
|
font-size: 1.7rem; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
.headline__title {
|
.headline__title {
|
||||||
@ -657,41 +676,23 @@ img {
|
|||||||
content: "";
|
content: "";
|
||||||
clear: both;
|
clear: both;
|
||||||
display: table; }
|
display: table; }
|
||||||
.row--t-padding {
|
|
||||||
padding-top: 80px; }
|
|
||||||
.row--gutters {
|
.row--gutters {
|
||||||
margin-right: -65px; }
|
margin-right: -60px; }
|
||||||
.row--gutters-large {
|
|
||||||
margin-right: -100px; }
|
|
||||||
.row--gutters-small {
|
|
||||||
margin-right: -45px; }
|
|
||||||
.row--gutters > div {
|
.row--gutters > div {
|
||||||
padding-right: 60px; }
|
padding-right: 60px; }
|
||||||
.row--gutters-large > div {
|
|
||||||
padding-right: 100px; }
|
|
||||||
.row--gutters-small > div {
|
|
||||||
padding-right: 45px; }
|
|
||||||
.row__b-margin-until-medium {
|
|
||||||
margin-bottom: 1rem; }
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
.row__b-margin-until-medium {
|
|
||||||
margin-bottom: 0rem; }
|
|
||||||
.row__medium-3--larger {
|
.row__medium-3--larger {
|
||||||
float: left;
|
float: left;
|
||||||
width: 30%; }
|
width: 30%; }
|
||||||
.row__medium-4 {
|
.row__medium-4 {
|
||||||
float: left;
|
float: left;
|
||||||
width: 33.33%; }
|
width: 33.33%; }
|
||||||
.row__medium-4--larger {
|
|
||||||
width: 27%; }
|
|
||||||
.row__medium-6 {
|
.row__medium-6 {
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%; }
|
width: 50%; }
|
||||||
.row__medium-8 {
|
.row__medium-8 {
|
||||||
float: right;
|
float: right;
|
||||||
width: 66.66%; }
|
width: 66.66%; }
|
||||||
.row__medium-8--smaller {
|
|
||||||
width: 63%; }
|
|
||||||
.row__medium-9--smaller {
|
.row__medium-9--smaller {
|
||||||
float: right;
|
float: right;
|
||||||
width: 70%; } }
|
width: 70%; } }
|
||||||
@ -713,7 +714,6 @@ img {
|
|||||||
margin-bottom: 70px; }
|
margin-bottom: 70px; }
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
.generic-content-container--t-b-margin {
|
.generic-content-container--t-b-margin {
|
||||||
margin-top: 7rem;
|
|
||||||
margin-bottom: 0px; } }
|
margin-bottom: 0px; } }
|
||||||
|
|
||||||
.generic-content-container--t-center {
|
.generic-content-container--t-center {
|
||||||
@ -721,7 +721,7 @@ img {
|
|||||||
|
|
||||||
.generic-content-container p {
|
.generic-content-container p {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.65;
|
line-height: 1.25;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.2rem; }
|
font-size: 1.2rem; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
@ -763,4 +763,51 @@ img {
|
|||||||
width: 255px;
|
width: 255px;
|
||||||
margin-left: 60px; }
|
margin-left: 60px; }
|
||||||
|
|
||||||
|
.icon--foodcoop2 {
|
||||||
|
float: left;
|
||||||
|
width: 100px;
|
||||||
|
margin-top: -33px;
|
||||||
|
margin-right: 20px; }
|
||||||
|
|
||||||
|
.how-it-works {
|
||||||
|
margin: 50px 0px; }
|
||||||
|
.how-it-works strong {
|
||||||
|
font-weight: 800; }
|
||||||
|
.how-it-works--centered {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: center; }
|
||||||
|
.how-it-works--t-margin {
|
||||||
|
margin-top: -30px; }
|
||||||
|
.how-it-works__last-section {
|
||||||
|
padding: 100px 0px 50px 0px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9); }
|
||||||
|
.how-it-works p {
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.2rem; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.how-it-works p {
|
||||||
|
margin: 0 0 1.8rem 0;
|
||||||
|
font-size: 1.4rem; } }
|
||||||
|
.how-it-works__title {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
margin-bottom: 45px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.how-it-works__title {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 2.1rem; } }
|
||||||
|
.how-it-works__icon--foodcoop {
|
||||||
|
width: 255px;
|
||||||
|
margin-left: 60px; }
|
||||||
|
.how-it-works__icon--foodcoop2 {
|
||||||
|
width: 100px;
|
||||||
|
margin-right: .8rem;
|
||||||
|
margin-bottom: -20px; }
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user