assets/main/sass/layout/_wrapper.scss

   1 ///
   2 /// Massively 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 /* Wrapper */
   8
   9         #wrapper {
  10                 @include vendor('transition', 'opacity #{_duration(menu)} ease');
  11                 position: relative;
  12                 z-index: 1;
  13                 overflow: hidden;
  14
  15                 > .bg {
  16                         position: absolute;
  17                         top: 0;
  18                         left: 0;
  19                         width: 100%;
  20                         height: 100%;
  21                         background-color:               _palette(wrapper-bg);
  22                         background-image:               url('../../images/overlay.png'),        linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),        url('../../images/bg.jpg');
  23                         background-size:                auto,                                                           auto,                                                                                                           100% auto;
  24                         background-position:    center,                                                         center,                                                                                                         top center;
  25                         background-repeat:              repeat,                                                         no-repeat,                                                                                                      no-repeat;
  26                         background-attachment:  scroll,                                                         scroll,                                                                                                         scroll;
  27                         z-index: -1;
  28
  29                         &.fixed {
  30                                 position: fixed;
  31                                 width: 100vw;
  32                                 height: 100vh;
  33                         }
  34                 }
  35
  36                 &.fade-in {
  37                         &:before {
  38                                 @include vendor('pointer-events', 'none');
  39                                 @include vendor('transition', 'opacity 1s ease-in-out');
  40                                 @include vendor('transition-delay', '0.75s');
  41                                 background: _palette(invert, bg);
  42                                 content: '';
  43                                 display: block;
  44                                 height: 100%;
  45                                 left: 0;
  46                                 opacity: 0;
  47                                 position: fixed;
  48                                 top: 0;
  49                                 width: 100%;
  50                         }
  51
  52                         body.is-preload & {
  53                                 &:before {
  54                                         opacity: 1;
  55                                 }
  56                         }
  57                 }
  58
  59                 @include orientation(portrait) {
  60                         > .bg {
  61                                 background-size:        auto,                                                           auto,                                                                                                           auto 175%;
  62                         }
  63                 }
  64         }