_bg.scss (1616B)
1 /// 2 /// Dimension by HTML5 UP 3 /// html5up.net | @ajlkn 4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 /// 6 7 /* BG */ 8 9 #bg { 10 @include vendor('transform', 'scale(1.0)'); 11 -webkit-backface-visibility: hidden; 12 position: fixed; 13 top: 0; 14 left: 0; 15 width: 100%; 16 height: 100vh; 17 z-index: 1; 18 19 &:before, &:after { 20 content: ''; 21 display: block; 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 100%; 26 height: 100%; 27 } 28 29 &:before { 30 @include vendor('transition', 'background-color #{_duration(bg)} ease-in-out'); 31 @include vendor('transition-delay', '#{_duration(intro)}'); 32 background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}), 33 url('../../images/overlay.png'); 34 background-size: auto, 35 256px 256px; 36 background-position: center, 37 center; 38 background-repeat: no-repeat, 39 repeat; 40 z-index: 2; 41 } 42 43 &:after { 44 @include vendor('transform', 'scale(1.125)'); 45 @include vendor('transition', ( 46 'transform #{_duration(article)} ease-in-out', 47 'filter #{_duration(article)} ease-in-out' 48 )); 49 background-image: url('../../images/bg.jpg'); 50 background-position: center; 51 background-size: cover; 52 background-repeat: no-repeat; 53 z-index: 1; 54 } 55 56 body.is-article-visible & { 57 &:after { 58 @include vendor('transform', 'scale(1.0825)'); 59 @include vendor('filter', 'blur(0.2rem)'); 60 } 61 } 62 63 body.is-preload & { 64 &:before { 65 background-color: _palette(bg-alt); 66 } 67 } 68 }