assets/main/sass/layout/_banner.scss

   1 ///
   2 /// Editorial 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 padding(6em, 0);
  11                 @include vendor('display', 'flex');
  12
  13                 h1 {
  14                         margin-top: -0.125em;
  15                 }
  16
  17                 .content {
  18                         @include vendor('flex-grow', '1');
  19                         @include vendor('flex-shrink', '1');
  20                         width: 50%;
  21                 }
  22
  23                 .image {
  24                         @include vendor('flex-grow', '0');
  25                         @include vendor('flex-shrink', '0');
  26                         display: block;
  27                         margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
  28                         width: 50%;
  29
  30                         img {
  31                                 height: 100%;
  32                                 -moz-object-fit: cover;
  33                                 -webkit-object-fit: cover;
  34                                 -ms-object-fit: cover;
  35                                 object-fit: cover;
  36                                 -moz-object-position: center;
  37                                 -webkit-object-position: center;
  38                                 -ms-object-position: center;
  39                                 object-position: center;
  40                                 width: 100%;
  41                         }
  42                 }
  43
  44                 @include orientation(portrait) {
  45                         @include vendor('flex-direction', 'column-reverse');
  46
  47                         h1 {
  48                                 br {
  49                                         display: none;
  50                                 }
  51                         }
  52
  53                         .content {
  54                                 @include vendor('flex-grow', '0');
  55                                 @include vendor('flex-shrink', '0');
  56                                 width: 100%;
  57                         }
  58
  59                         .image {
  60                                 @include vendor('flex-grow', '0');
  61                                 @include vendor('flex-shrink', '0');
  62                                 margin: 0 0 (_size(element-margin) * 2) 0;
  63                                 height: 25em;
  64                                 max-height: 50vh;
  65                                 min-height: 18em;
  66                                 width: 100%;
  67                         }
  68
  69                         @include breakpoint('<=xsmall') {
  70                                 .image {
  71                                         max-height: 35vh;
  72                                 }
  73                         }
  74                 }
  75         }