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

Merge branch 'about'

Browse Source
This commit is contained in:
Tancre
2020-09-30 18:53:01 +02:00
parent f8dae8f8bd 7a776a7295
commit 12c2dfab65
13 changed files with 543 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/scss/base/_variables.scss
View File

@ -0,0 +1,5 @@
$myGreen: #4BC90F;
$myLightGreen: #A5C90F;
$myDarkGreen: #6F9C3D;
$myOrange: #FF9F2F;
$myRed: #FF3D04;

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

@ -6,6 +6,14 @@
display: inline-block;
border-radius: 30px;
&--medium {
margin-bottom:1.5rem;
@include atSmall(){
font-size: 1.1rem;
}
}
&--large {
padding: 1.1rem 1.9rem;
@ -13,6 +21,4 @@
font-size: 1.25rem;
}
}
}

33
app/assets/scss/modules/_generic-content-container.scss Normal file
View File

@ -0,0 +1,33 @@
.generic-content-container{
&--t-b-margin{
margin-top: 5rem;
margin-bottom: 70px;
@include atLarge{
margin-top: 7rem;
margin-bottom: 0px;
}
}
&--t-center{
text-align: center;
}
p {
font-weight: 300;
line-height: 1.65;
margin: 0;
font-size: 1.2rem;
@include atMedium{
margin: 0 0 1.8rem 0;
font-size: 1.4rem;
}
}
p a {
font-weight: 700;
}
}

54
app/assets/scss/modules/_headline.scss Normal file
View File

@ -0,0 +1,54 @@
.headline{
margin:auto;
&--s-width {
max-width: 500px;
@include atMedium(){
max-width: 1000px;
}
}
&__title {
font-weight: 500;
font-size: 1.7rem;
@include atMedium(){
font-size: 2.1rem;
}
}
&__subtitle {
font-weight: 300;
font-size: 1.4rem;
@include atMedium(){
font-size: 1.8rem;
}
}
&--centered {
text-align: center;
}
&--lightGreen {
color: $myLightGreen;
}
&--orange {
color: $myOrange;
}
&--b-margin {
margin-bottom: 2.5rem;
@include atMedium(){
margin-bottom: 4.5rem;
}
}
a {
font-weight: 400;
}
}

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

@ -1,5 +1,5 @@
.large-hero {
border-bottom: 10px solid white;
border-bottom: 10px solid orange;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
position: relative;

85
app/assets/scss/modules/_page-section.scss Normal file
View File

@ -0,0 +1,85 @@
.page-section{
padding: 1.2rem 0;
position: relative;
@include atMedium(){
position: unset;
padding: 4.5rem 0;
}
// &--no-b-padding-until-medium{
// padding-bottom: 0;
// @include atMedium(){
// padding-bottom: 4.5rem;
// }
// }
// &--no-b-padding-until-large{
// padding-bottom: 0;
// @include atMedium(){
// padding-bottom: 4.5rem;
// }
// }
&--b-margin{
margin-bottom: 70px;
@include atMedium{
margin-bottom: -140px;
}
}
&--red{
background-color: $myRed;
color: #fff;
}
&--darkGreen{
background-color: $myDarkGreen;
color: #fff;
}
&--lightGreen{
background-color: $myLightGreen;
color: #fff;
}
&--arrow-down{
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 85px solid $myRed;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
top: 70px;
margin: auto;
left: 0;
transform: translateX(0%);
}
}
// &--testimonials{
// background: #e0e6ef;
// // @include atMedium(){
// // &.lazyloaded {
// // background: url('../../assets/images/testimonials-bg.jpg') top center no-repeat;
// // background-size: cover;
// // }
// // }
// }
}

92
app/assets/scss/modules/_rows.scss Normal file
View File

@ -0,0 +1,92 @@
.row{
@include clearfix();
&--t-padding{
padding-top: 80px;
}
&--gutters {
margin-right: -65px;
}
&--gutters-large {
margin-right: -100px;
}
&--gutters-small {
margin-right: -45px;
}
&--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-4 {
float: left;
width: 33.33%;
}
&__medium-4--larger{
width: 27%;
}
&__medium-6 {
float: left;
width: 50%;
}
&__medium-8 {
float: right;
width: 66.66%;
}
&__medium-8--smaller{
width: 63%;
}
}
/* Begin Equal Height Rules */
.flexbox &--equal-height-at-medium {
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
.flexbox &--equal-height-at-large {
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
}

24
app/assets/scss/modules/_video-container.scss Normal file
View File

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

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

@ -5,8 +5,12 @@
@import './base/mixins';
@import './modules/site-header';
@import './modules/primary-nav';
@import './modules/wrapper';
@import './modules/large-hero';
@import './modules/btn';
@import './modules/large-hero';
@import './modules/wrapper';
@import './modules/_page-section';
@import './modules/_headline';
@import './modules/_rows';
@import './modules/_generic-content-container';
@import './modules/_video-container';