diff --git a/sass/theme/_child_theme.scss b/sass/theme/_child_theme.scss index 7fd49b5..8ce73df 100644 --- a/sass/theme/_child_theme.scss +++ b/sass/theme/_child_theme.scss @@ -1,13 +1,6 @@ -@import 'scanlines'; @import 'underlines'; @import 'sliders'; -//#wrapper-navbar { -.navbar-brand { - @include scan-crt(true); - @include scan-moving(false); - @extend .scanlines; -} .navbar-toggler { width: 100%; } diff --git a/sass/theme/_scanlines.scss b/sass/theme/_scanlines.scss deleted file mode 100644 index 852ce39..0000000 --- a/sass/theme/_scanlines.scss +++ /dev/null @@ -1,102 +0,0 @@ -/* REGULAR SCANLINES SETTINGS */ - -// width of 1 scanline (min.: 1px) -$scan-width: 2px; - -// emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false) -$scan-crt: true; - -// frames-per-second (should be > 1), only applies if $scan-crt: true; -$scan-fps: 60; - -// scanline-color (rgba) -$scan-color: rgba(#000, .3); - -// set z-index on 8, like in ♥ 8-bits ♥, or… -// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE); -$scan-z-index: 2147483648; - -/* MOVING SCANLINE SETTINGS */ - -// moving scanline (true, false) -$scan-moving-line: true; - -// opacity of the moving scanline -$scan-opacity: .75; - -/* MIXINS */ - -// apply CRT animation: @include scan-crt($scan-crt); -@mixin scan-crt($scan-crt) { - @if $scan-crt == true { - animation: scanlines 1s steps($scan-fps) infinite; - } - @else { animation: none; } -} - -// apply CRT animation: @include scan-crt($scan-crt); -@mixin scan-moving($scan-moving-line) { - @if $scan-moving-line == true { - animation: scanline 6s linear infinite; - } - @else { animation: none; } -} - -/* CSS .scanlines CLASS */ - -.scanlines { - position: relative; - overflow: hidden; // only to animate the unique scanline - - &:before, - &:after { - display: block; - pointer-events: none; - content: ''; - position: absolute; - } - - // unique scanline travelling on the screen - &:before { - // position: absolute; - // bottom: 100%; - width: 100%; - height: $scan-width * 1; - z-index: $scan-z-index + 1; - background: $scan-color; - opacity: $scan-opacity; - // animation: scanline 6s linear infinite; - @include scan-moving($scan-moving-line); - } - - // the scanlines, so! - &:after { - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $scan-z-index; - background: linear-gradient( - to bottom, - transparent 50%, - $scan-color 51% - ); - background-size: 100% $scan-width*2; - @include scan-crt($scan-crt); - } -} - -/* ANIMATE UNIQUE SCANLINE */ -@keyframes scanline { - 0% { - transform: translate3d(0,200000%,0); - // bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; } - } -} - -@keyframes scanlines { - 0% { - background-position: 0 50%; - // bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; } - } -}