basspistol.com/assets/css/noscript20200518-rev1.scss

---
---
@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: _palette(bg);
  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: _palette(bg);
    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;
}