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_light(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                         @media screen and (prefers-color-scheme: dark) {
  42                                 background-color: _palette_dark(bg);
  43                         }
  44                 }
  45
  46                 h1 {
  47                         font-size: 3.25em;
  48                 }
  49
  50                 > .inner {
  51                         @include vendor('transition', (
  52                                 'opacity 1.5s ease',
  53                                 'transform 0.5s ease-out',
  54                                 'filter 0.5s ease',
  55                                 '-webkit-filter 0.5s ease'
  56                         ));
  57                         padding: 0 !important;
  58                         position: relative;
  59                         z-index: 2;
  60
  61                         .image {
  62                                 display: none;
  63                         }
  64
  65                         header {
  66                                 width: auto;
  67
  68                                 > :first-child {
  69                                         width: auto;
  70
  71                                         &:after {
  72                                                 max-width: 100%;
  73                                         }
  74                                 }
  75                         }
  76
  77                         .content {
  78                                 @include vendor('display', 'flex');
  79                                 @include vendor('align-items', 'center');
  80                                 margin: 0 0 _size(element-margin) 0;
  81
  82                                 > * {
  83                                         margin-right: 1.5em;
  84                                         margin-bottom: 0;
  85                                 }
  86
  87                                 > :last-child {
  88                                         margin-right: 0;
  89                                 }
  90
  91                                 p {
  92                                         font-size: 0.7em;
  93                                         font-weight: _font(weight-bold);
  94                                         letter-spacing: _font(letter-spacing-alt);
  95                                         text-transform: uppercase;
  96                                 }
  97                         }
  98                 }
  99
 100                 &.major {
 101                         height: 75vh;
 102                         min-height: 30em;
 103                         max-height: 50em;
 104
 105                         &.alt {
 106                                 opacity: 0.75;
 107                         }
 108                 }
 109
 110                 &.style1 { &:after { background-color: _palette_light(accent1); } }
 111                 &.style2 { &:after { background-color: _palette_light(accent2); } }
 112                 &.style3 { &:after { background-color: _palette_light(accent3); } }
 113                 &.style4 { &:after { background-color: _palette_light(accent4); } }
 114                 &.style5 { &:after { background-color: _palette_light(accent5); } }
 115                 &.style6 { &:after { background-color: _palette_light(accent6); } }
 116
 117                 @media screen and (prefers-color-scheme: dark) {
 118                         &.style1 { &:after { background-color: _palette_dark(accent1); } }
 119                         &.style2 { &:after { background-color: _palette_dark(accent2); } }
 120                         &.style3 { &:after { background-color: _palette_dark(accent3); } }
 121                         &.style4 { &:after { background-color: _palette_dark(accent4); } }
 122                         &.style5 { &:after { background-color: _palette_dark(accent5); } }
 123                         &.style6 { &:after { background-color: _palette_dark(accent6); } }
 124                 }
 125
 126                 body.is-preload & {
 127                         &:after {
 128                                 opacity: 1.0;
 129                         }
 130
 131                         > .inner {
 132                                 @include vendor('filter', 'blur(0.125em)');
 133                                 @include vendor('transform', 'translateX(-0.5em)');
 134                                 opacity: 0;
 135                         }
 136                 }
 137
 138                 @include breakpoint('<=large') {
 139                         background-attachment: scroll;
 140                 }
 141
 142                 @include breakpoint('<=small') {
 143                         @include padding(3em, 0, (2em, 0, 0, 0));
 144                         height: auto;
 145                         margin-bottom: -2.75em;
 146                         max-height: none;
 147                         min-height: 0;
 148                         top: -2.75em;
 149
 150                         h1 {
 151                                 font-size: 2em;
 152                         }
 153
 154                         > .inner {
 155                                 .content {
 156                                         display: block;
 157
 158                                         > * {
 159                                                 margin-right: 0;
 160                                                 margin-bottom: _size(element-margin);
 161                                         }
 162                                 }
 163                         }
 164
 165                         &.major {
 166                                 height: auto;
 167                                 min-height: 0;
 168                                 max-height: none;
 169                         }
 170                 }
 171
 172                 @include breakpoint('<=xsmall') {
 173                         @include padding(4em, 0, (2em, 0, 0, 0));
 174
 175                         > .inner {
 176                                 .content {
 177                                         p {
 178                                                 br {
 179                                                         display: none;
 180                                                 }
 181                                         }
 182                                 }
 183                         }
 184
 185                         &.major {
 186                                 @include padding(6em, 0, (2em, 0, 0, 0));
 187                         }
 188                 }
 189         }