biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-06-28 01:40:46 +00:00
Code Issues Projects Releases Wiki Activity

how-it-works section finished

Browse Source
This commit is contained in:
Tancre
2020-10-15 22:35:24 +02:00
parent af96ccbf7e
commit 1524bffa31
94 changed files with 1429 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/scss/modules/_arrow.scss
View File

@ -13,7 +13,7 @@
@include atMedium{
position: relative;
bottom: -70px;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}
@ -35,15 +35,15 @@
@include atMedium{
position: relative;
bottom: -50px;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: -50px;
left: 50%;
bottom: -30px;
left: 70%;
transform: translateX(-50%);
}
}

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

@ -6,6 +6,10 @@
display: inline-block;
border-radius: 30px;
&--l-margin{
margin-left: 20px;
}
&--medium {
margin-bottom:1.5rem;

8
app/assets/scss/modules/_footer.scss Normal file
View File

@ -0,0 +1,8 @@
.footer{
position: absolute;
bottom: -40px;
width: 100%;
background-color: $myRed;
color: white;
text-align: center;
}

7
app/assets/scss/modules/_generic-content-container.scss
View File

@ -1,10 +1,11 @@
.generic-content-container{
&--t-b-margin{
margin-top: 5rem;
margin-bottom: 70px;
margin-top: 4rem;
margin-bottom: 2.5rem;
@include atLarge{
margin-top: 5rem;
margin-bottom: 0px;
}
}
@ -17,7 +18,7 @@
font-weight: 300;
line-height: 1.25;
margin: 0;
font-size: 1.2rem;
font-size: 1.1rem;
@include atMedium{
margin: 0 0 1.8rem 0;

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

@ -24,7 +24,7 @@
&__title {
font-weight: 400;
font-size: 1.7rem;
font-size: 1.6rem;
@include atMedium(){
font-size: 2.1rem;
@ -33,7 +33,7 @@
&__subtitle {
font-weight: 300;
font-size: 1.4rem;
font-size: 1.3rem;
@include atMedium(){
font-size: 1.6rem;

58
app/assets/scss/modules/_how-it-works.scss
View File

@ -1,5 +1,5 @@
.how-it-works{
margin: 50px 0px;
margin-bottom: 2.5rem;
strong {
font-weight: 800;
@ -14,10 +14,10 @@
}
&--atSmall-t-margin{
margin-top: 70px !important;
margin-top: 6rem !important;
@include atSmall{
margin-top: 20px;
@include atMedium{
margin-top: 4rem !important;
}
@include atLarge{
@ -44,8 +44,12 @@
}
&__last-section{
padding: 100px 0px 50px 0px;
padding: 3rem 0px 50px 0px;
background-color: rgba(white,0.9);
@include atLarge{
padding: 100px 0px 50px 0px;
}
}
p{
@ -72,11 +76,32 @@
}
&__img{
display: none;
&__title-small{
font-weight: 300;
font-size: 1.4rem;
margin-bottom: 45px;
@include atLarge{
@include atMedium(){
margin-top: 10px;
font-size: 2.1rem;
}
}
&__img{
// display: none;
// @include atLarge{
// display: inline-block;
// }
&--small-only{
display: inline-block;
margin: 10px 0px;
@include atLarge{
display: none;
}
}
}
@ -94,15 +119,24 @@
}
&__icon--2{
width: 130px;
width: 100px;
margin-right: .8rem;
margin-bottom: -45px;
margin-bottom: -35px;
}
&__icon--3{
width: 130px;
width: 100px;
margin-right: .8rem;
margin-bottom: -35px;
margin-bottom: -30px;
margin-top: 1.2rem;
@include atMedium{
margin-top: 3.2rem;
}
@include atLarge{
margin-top: 0rem;
}
}

6
app/assets/scss/modules/_large-hero.scss
View File

@ -8,7 +8,7 @@
}
&__text-content {
padding-top: 88px;
// padding-top: 88px;
position: absolute;
top: 50%;
left: 0px;
@ -24,7 +24,7 @@
&__title {
font-family: "CocogooseBold";
color: white;
font-size: 2.5rem;
font-size: 2.2rem;
margin: 0;
@include atSmall(){
@ -41,7 +41,7 @@
// font-family: "CocogooseNormal";
font-weight: 400;
color: white;
font-size: 1.4rem;
font-size: 1.3rem;
margin: 0;
@include atSmall(){

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

@ -22,12 +22,21 @@
}
&--t-padding{
padding-top: 1.2rem;
padding-top: 5.2rem;
@include atMedium(){
position: unset;
padding-top: 4.5rem;
}
&-larger{
padding-top: 5.2rem;
@include atMedium(){
position: unset;
padding-top: 6rem;
}
}
}
&--b-padding-small{

3
app/assets/scss/modules/_primary-nav.scss
View File

@ -2,7 +2,7 @@
padding-top: 10px;
@include atMedium(){
padding: 31px 0px;
padding: 22px 0px;
}
&--pull-right{
@ -22,6 +22,7 @@
list-style: none;
display: inline-block;
padding-right: 7px;
padding-top: 10px;
@include atMedium(){
float: left;

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

@ -2,6 +2,14 @@
@include clearfix();
&--large-only{
display: none;
@include atLarge{
display: inline-block;
}
}
&--gutters {
margin-right: -60px;
}

11
app/assets/scss/modules/_site-header.scss
View File

@ -23,19 +23,21 @@
}
&__language{
margin: 13px auto 5px auto;
position: absolute;
top: 10px;
left: -5px;
border-radius: 15px;
overflow: hidden;
width: 25px;
height: 25px;
@include atMedium(){
position: unset;
margin: 40px 20px 0px 0px;
float: right;
}
}
&__menu-icon{
width: 20px;
height: 19px;
@ -108,14 +110,17 @@
z-index: -10;
padding-top: 90px;
text-align: center;
display: none;
&--is-visible{
display: block;
transform: scale(1);
opacity: 1;
z-index: 1;
}
@include atMedium(){
display: inline;
opacity: 1;
z-index: 1;
padding-top: 0;
@ -125,7 +130,7 @@
&__logo{
position: absolute;
top: 0px;
top: -1px;
padding: 5px 15px;
left: 50%;
transform-origin: 50% 0%;

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

@ -1,6 +1,6 @@
.video-container {
position:relative;
padding-bottom:61.15%;
padding-bottom:63.15%;
height:0;
overflow:hidden;
box-shadow: -3px 3px 10px #000000ba;