assets/sass/layout/_banner.scss

   1 ///
   2 /// Forty 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 /* Banner */
   8
   9         #banner {
  10                 @include vendor('align-items', 'center');
  11                 @include vendor('background-image', 'url("../bg/bg2.jpg")');
  12                 @include vendor('display', 'flex');
  13                 @include padding(4em, 0, (2em, 0, 0, 0));
  14                 background-attachment: fixed;
  15                 background-position: center;
  16                 background-repeat: no-repeat;
  17                 background-size: cover;
  18                 border-bottom: 0 !important;
  19                 cursor: default;
  20                 height: 60vh;
  21                 margin-bottom: -5.25em;
  22                 max-height: 32em;
  23                 min-height: 22em;
  24                 position: relative;
  25                 top: -3.25em;
  26
  27                 &:after {
  28                         @include vendor('transition', 'opacity #{_duration(banner)} ease');
  29                         @include vendor('transition-delay', '0.75s');
  30                         @include vendor('pointer-events', 'none');
  31                         background-color: _palette(bg);
  32                         content: '';
  33                         display: block;
  34                         height: 100%;
  35                         left: 0;
  36                         opacity: 0.7;
  37                         position: absolute;
  38                         top: 0;
  39                         width: 100%;
  40                         z-index: 1;
  41                 }
  42
  43                 h1 {
  44                         font-size: 3.25em;
  45                 }
  46
  47                 > .inner {
  48                         @include vendor('transition', (
  49                                 'opacity 1.5s ease',
  50                                 'transform 0.5s ease-out',
  51                                 'filter 0.5s ease',
  52                                 '-webkit-filter 0.5s ease'
  53                         ));
  54                         padding: 0 !important;
  55                         position: relative;
  56                         z-index: 2;
  57
  58                         .image {
  59                                 display: none;
  60                         }
  61
  62                         header {
  63                                 width: auto;
  64
  65                                 > :first-child {
  66                                         width: auto;
  67
  68                                         &:after {
  69                                                 max-width: 100%;
  70                                         }
  71                                 }
  72                         }
  73
  74                         .content {
  75                                 @include vendor('display', 'flex');
  76                                 @include vendor('align-items', 'center');
  77                                 margin: 0 0 _size(element-margin) 0;
  78
  79                                 > * {
  80                                         margin-right: 1.5em;
  81                                         margin-bottom: 0;
  82                                 }
  83
  84                                 > :last-child {
  85                                         margin-right: 0;
  86                                 }
  87
  88                                 p {
  89                                         font-size: 0.7em;
  90                                         font-weight: _font(weight-bold);
  91                                         letter-spacing: _font(letter-spacing-alt);
  92                                         text-transform: uppercase;
  93                                 }
  94                         }
  95                 }
  96
  97                 &.major {
  98                         height: 75vh;
  99                         min-height: 30em;
 100                         max-height: 50em;
 101
 102                         &.alt {
 103                                 opacity: 0.75;
 104                         }
 105                 }
 106
 107                 &.style1 { &:after { background-color: _palette(accent1); } }
 108                 &.style2 { &:after { background-color: _palette(accent2); } }
 109                 &.style3 { &:after { background-color: _palette(accent3); } }
 110                 &.style4 { &:after { background-color: _palette(accent4); } }
 111                 &.style5 { &:after { background-color: _palette(accent5); } }
 112                 &.style6 { &:after { background-color: _palette(accent6); } }
 113
 114                 body.is-preload & {
 115                         &:after {
 116                                 opacity: 1.0;
 117                         }
 118
 119                         > .inner {
 120                                 @include vendor('filter', 'blur(0.125em)');
 121                                 @include vendor('transform', 'translateX(-0.5em)');
 122                                 opacity: 0;
 123                         }
 124                 }
 125
 126                 @include breakpoint('<=large') {
 127                         background-attachment: scroll;
 128                 }
 129
 130                 @include breakpoint('<=small') {
 131                         @include padding(3em, 0, (2em, 0, 0, 0));
 132                         height: auto;
 133                         margin-bottom: -2.75em;
 134                         max-height: none;
 135                         min-height: 0;
 136                         top: -2.75em;
 137
 138                         h1 {
 139                                 font-size: 2em;
 140                         }
 141
 142                         > .inner {
 143                                 .content {
 144                                         display: block;
 145
 146                                         > * {
 147                                                 margin-right: 0;
 148                                                 margin-bottom: _size(element-margin);
 149                                         }
 150                                 }
 151                         }
 152
 153                         &.major {
 154                                 height: auto;
 155                                 min-height: 0;
 156                                 max-height: none;
 157                         }
 158                 }
 159
 160                 @include breakpoint('<=xsmall') {
 161                         @include padding(4em, 0, (2em, 0, 0, 0));
 162
 163                         > .inner {
 164                                 .content {
 165                                         p {
 166                                                 br {
 167                                                         display: none;
 168                                                 }
 169                                         }
 170                                 }
 171                         }
 172
 173                         &.major {
 174                                 @include padding(6em, 0, (2em, 0, 0, 0));
 175                         }
 176                 }
 177         }