biobulkbende
/
biobulkbende.org
mirror of https://github.com/biobulkbende/biobulkbende.org.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

about first part

This commit is contained in:
Tancre 2020-10-07 16:19:57 +02:00
parent 12c2dfab65
commit e9b2412f50
11 changed files with 98 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/media/images/foodcoop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

4
app/assets/scss/modules/_headline.scss
View File

@ -1,6 +1,10 @@
.headline{
margin:auto;
&--l-margin{
margin-left: 55px;
}
&--s-width {
max-width: 500px;

7
app/assets/scss/modules/_icon.scss Normal file
View File

@ -0,0 +1,7 @@
.icon{
&--foodcoop{
width: 255px;
margin-left: 60px;
}
}

10
app/assets/scss/modules/_page-section.scss
View File

@ -61,9 +61,17 @@
left: 50%;
transform: translateX(-50%);
@include atSmall{
position: relative;
top: -10px;
margin: auto;
left: 0;
transform: translateX(0%);
}
@include atMedium{
position: relative;
top: 70px;
top: 20px;
margin: auto;
left: 0;
transform: translateX(0%);

10
app/assets/scss/modules/_rows.scss
View File

@ -40,6 +40,11 @@
margin-bottom: 0rem;
}
&__medium-3--larger {
float: left;
width: 30%;
}
&__medium-4 {
float: left;
width: 33.33%;
@ -63,6 +68,11 @@
width: 63%;
}
&__medium-9--smaller {
float: right;
width: 70%;
}
}
/* Begin Equal Height Rules */

18
app/assets/scss/modules/_video-container.scss
View File

@ -1,21 +1,29 @@
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
padding-bottom:61.15%;
height:0;
overflow:hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-bottom: 15px;
margin-right: -18px;
margin-left: -18px;
@include atSmall{
padding-bottom:60%;
}
@include atMedium{
padding-bottom:59%;
}
@include atLarge{
margin-right: 0px;
padding-bottom:56.25%;
margin-right: 0px;
margin-left: 0px;
}
}
.video-container iframe, .video-container object, .video-container embed {
.video-container video{
position:absolute;
top:0;
left:0;

4
app/assets/scss/modules/_wrapper.scss
View File

@ -9,4 +9,8 @@
&--medium{
max-width: 976px;
}
&--t-margins{
margin-top: 100px;
}
}

1
app/assets/scss/style.scss
View File

@ -13,4 +13,5 @@
@import './modules/_rows';
@import './modules/_generic-content-container';
@import './modules/_video-container';
@import './modules/_icon';

28
app/index.html
View File

@ -76,7 +76,10 @@
<div class="row row--gutters">
<div class="row__medium-8 row__medium-8--smaller">
<div class="video-container">
<iframe class="content--video--right" width="560" height="315" src="https://www.youtube-nocookie.com/embed/XnC3sBJRwv0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<video class="content--video--right" width="560" height="315" controls>
<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row__medium-4 row__medium-4--larger">
@ -93,21 +96,24 @@
<!-- HOW IT WORKS -->
<div id="how-it-works" class="page-section page-section--darkGreen">
<div class="wrapper">
<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__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 class="wrapper wrapper--t-margins">
<div class="row">
<div class="row__medium-9 row__medium-9--smaller">
<div class="headline headline--l-margin">
<h2 class="headline__title ">What is a foodcoop?</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>
</div>
</div>
<div class="row__medium-3 row__medium-3--larger">
<img class="icon icon--foodcoop" src="./assets/media/images/foodcoop.png">
</div>
</div>
</div>
</div>
<div id="how-it-works-2" class="page-section page-section--lightGreen">
<div class="wrapper">
<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__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="wrapper">
</div>
</div>
<!-- AGENDA -->

38
app/temp/styles/style.css
View File

@ -567,6 +567,8 @@ img {
margin-right: auto; }
.wrapper--medium {
max-width: 976px; }
.wrapper--t-margins {
margin-top: 100px; }
.page-section {
padding: 1.2rem 0;
@ -599,16 +601,25 @@ img {
bottom: -60px;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 530px) {
.page-section--arrow-down {
position: relative;
top: -10px;
margin: auto;
left: 0;
transform: translateX(0%); } }
@media (min-width: 800px) {
.page-section--arrow-down {
position: relative;
top: 70px;
top: 20px;
margin: auto;
left: 0;
transform: translateX(0%); } }
.headline {
margin: auto; }
.headline--l-margin {
margin-left: 55px; }
.headline--s-width {
max-width: 500px; }
@media (min-width: 800px) {
@ -665,6 +676,9 @@ img {
@media (min-width: 1200px) {
.row__b-margin-until-medium {
margin-bottom: 0rem; }
.row__medium-3--larger {
float: left;
width: 30%; }
.row__medium-4 {
float: left;
width: 33.33%; }
@ -677,7 +691,10 @@ img {
float: right;
width: 66.66%; }
.row__medium-8--smaller {
width: 63%; } }
width: 63%; }
.row__medium-9--smaller {
float: right;
width: 70%; } }
@media (min-width: 800px) {
.flexbox .row--equal-height-at-medium {
display: flex; } }
@ -717,24 +734,33 @@ img {
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
padding-bottom: 61.15%;
height: 0;
overflow: hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-bottom: 15px;
margin-right: -18px;
margin-left: -18px; }
@media (min-width: 530px) {
.video-container {
padding-bottom: 60%; } }
@media (min-width: 800px) {
.video-container {
padding-bottom: 59%; } }
@media (min-width: 1200px) {
.video-container {
padding-bottom: 56.25%;
margin-right: 0px;
margin-left: 0px; } }
.video-container iframe, .video-container object, .video-container embed {
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.icon--foodcoop {
width: 255px;
margin-left: 60px; }
/*# sourceMappingURL=style.css.map */

2
app/temp/styles/style.css.map
View File

File diff suppressed because one or more lines are too long