setto.basspistol.com/assets/css/noscript20200710.scss

258 lines
4.7 KiB
SCSS
Raw Normal View History

2020-07-24 14:34:09 +02:00
---
---
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import 'libs/fonts';
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Banner (transitions) */
.banner {
// Mixin.
@mixin transition-banner($event) {
$x: null;
$y: null;
@if ($event == 'load') {
$x: 'body.is-preload &';
$y: _duration(on-load);
}
@else if ($event == 'scroll') {
$x: '&.is-inactive';
$y: _duration(on-scroll);
}
// Content.
&.on#{$event}-content-fade-up {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-down {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-left {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-right {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-in {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
// Image.
&.on#{$event}-image-fade-up {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-down {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-left {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-right {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-in {
.image {
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
img {
opacity: 1;
}
}
}
}
}
// On Load.
@include transition-banner('load');
// On Scroll.
@include transition-banner('scroll');
}
// Set's customizations
@import 'set';
@import 'player';
.logo {
position: fixed;
top: 20px;
right: 20px;
width: 50%;
height: 10%;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: 95% 95%;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;
box-shadow: 0 0 10px 1px _palette(border-alt);
}
@media only screen and (min-width: 769px) {
.logo {
position: fixed;
top: 20px;
right: 20px;
width: 20%;
height: 10%;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: 95% 95%;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;
box-shadow: 0 0 10px 1px _palette(border-alt);
}
}
// Player link
#mainwrap {
display: none;
}
#noJSalbum {
display: unset;
}