biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-06-26 08:50:47 +00:00
Code Issues Projects Releases Wiki Activity

embedded video from vimeo + fixes css video

Browse Source
This commit is contained in:
Tancre
2020-11-25 11:56:26 +01:00
parent 8367b55f04
commit cf5eb9813d
8 changed files with 370 additions and 1139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,85 +1,84 @@
.arrow{
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
.arrow {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
&--about{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
&--about {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}
@include atMedium {
position: relative;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
}
}
@include atLarge {
position: relative;
bottom: -55px;
left: 50%;
transform: translateX(-50%);
}
}
&--how-it-works-1{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
&--how-it-works-1 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atMedium {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: 0px;
left: 70%;
transform: translateX(-50%);
}
}
@include atLarge {
position: relative;
bottom: 0px;
left: 70%;
transform: translateX(-50%);
}
}
&--how-it-works-2{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
&--how-it-works-2 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atMedium {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}
@include atLarge {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}
&--red{
border-top: 85px solid $myRed;
}
&--red {
border-top: 85px solid $myRed;
}
&--darkGreen{
border-top: 85px solid $myDarkGreen;
}
&--darkGreen {
border-top: 85px solid $myDarkGreen;
}
&--lightGreen{
border-top: 85px solid $myLightGreen;
}
}
&--lightGreen {
border-top: 85px solid $myLightGreen;
}
}

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

@ -1,74 +1,70 @@
.row{
.row {
@include clearfix();
@include clearfix();
&--large-only {
display: none;
&--large-only{
display: none;
@include atLarge {
display: inline-block;
}
}
@include atLarge{
display: inline-block;
}
}
&--gutters {
margin-right: -60px;
margin-bottom: 15px;
}
&--gutters {
margin-right: -60px;
}
&--gutters > div {
padding-right: 60px;
}
&--gutters > div {
padding-right: 60px;
}
@include atLarge() {
&__medium-3--larger {
float: left;
width: 30%;
}
@include atLarge(){
&__medium-4 {
float: left;
width: 33.33%;
}
&__medium-3--larger {
float: left;
width: 30%;
}
&__medium-6 {
float: left;
width: 50%;
}
&__medium-4 {
float: left;
width: 33.33%;
}
&__medium-8 {
float: right;
width: 66.66%;
}
&__medium-6 {
float: left;
width: 50%;
}
&__medium-9--smaller {
float: right;
width: 70%;
}
}
&__medium-8 {
float: right;
width: 66.66%;
}
/* Begin Equal Height Rules */
.flexbox &--equal-height-at-medium {
@include atMedium() {
display: flex;
}
&__medium-9--smaller {
float: right;
width: 70%;
}
& > div {
float: none;
display: flex;
}
}
}
/* Begin Equal Height Rules */
.flexbox &--equal-height-at-medium {
.flexbox &--equal-height-at-large {
@include atMedium() {
display: flex;
}
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
.flexbox &--equal-height-at-large {
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
}
& > div {
float: none;
display: flex;
}
}
}

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

@ -1,32 +1,31 @@
.video-container {
position:relative;
padding-bottom:63.15%;
height:0;
overflow:hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-right: -18px;
margin-left: -18px;
position: relative;
padding-bottom: 63.15%;
height: 0;
overflow: hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-right: -18px;
margin-left: -18px;
@include atSmall{
padding-bottom:60%;
}
@include atSmall {
padding-bottom: 60%;
}
@include atMedium{
padding-bottom:59%;
}
@include atMedium {
padding-bottom: 59%;
}
@include atLarge{
padding-bottom:56.25%;
margin-right: 0px;
margin-left: 0px;
}
@include atLarge {
padding-bottom: 54.5%;
margin-right: 0px;
margin-left: 0px;
}
}
.video-container video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}