assets/sass/components/_spotlights.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 /* Spotlights */
   8
   9         .spotlights {
  10                 border-top: 0 !important;
  11
  12                 & + * {
  13                         border-top: 0 !important;
  14                 }
  15
  16                 > section {
  17                         @include vendor('display', 'flex');
  18                         @include vendor('flex-direction', 'row');
  19                         background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
  20
  21                         > .image {
  22                                 background-position: center center;
  23                                 background-size: cover;
  24                                 border-radius: 0;
  25                                 display: block;
  26                                 position: relative;
  27                                 width: 30%;
  28
  29                                 img {
  30                                         border-radius: 0;
  31                                         display: block;
  32                                         width: 100%;
  33                                 }
  34
  35                                 &:before {
  36                                         background: transparentize(_palette(bg), 0.1);
  37                                         content: '';
  38                                         display: block;
  39                                         height: 100%;
  40                                         left: 0;
  41                                         opacity: 0;
  42                                         position: absolute;
  43                                         top: 0;
  44                                         width: 100%;
  45                                 }
  46                         }
  47
  48                         > .content {
  49                                 @include vendor('display', 'flex');
  50                                 @include vendor('flex-direction', 'column');
  51                                 @include vendor('justify-content', 'center');
  52                                 @include vendor('align-items', 'center');
  53                                 @include padding(2em, 3em);
  54                                 width: 70%;
  55
  56                                 > .inner {
  57                                         margin: 0 auto;
  58                                         max-width: 100%;
  59                                         width: _size(inner);
  60                                 }
  61                         }
  62
  63                         &:nth-child(2n) {
  64                                 @include vendor('flex-direction', 'row-reverse');
  65                                 background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
  66
  67                                 > .content {
  68                                         @include vendor('align-items', 'flex-end');
  69                                 }
  70                         }
  71                 }
  72
  73                 @include breakpoint('<=xlarge') {
  74                         > section {
  75                                 > .image {
  76                                         width: 40%;
  77                                 }
  78
  79                                 > .content {
  80                                         width: 60%;
  81                                 }
  82                         }
  83                 }
  84
  85                 @include breakpoint('<=large') {
  86                         > section {
  87                                 > .image {
  88                                         width: 45%;
  89                                 }
  90
  91                                 > .content {
  92                                         width: 55%;
  93                                 }
  94                         }
  95                 }
  96
  97                 @include breakpoint('<=medium') {
  98                         > section {
  99                                 display: block;
 100
 101                                 > .image {
 102                                         width: 100%;
 103                                 }
 104
 105                                 > .content {
 106                                         @include padding(4em, 3em);
 107                                         width: 100%;
 108                                 }
 109                         }
 110                 }
 111
 112                 @include breakpoint('<=small') {
 113                         > section {
 114                                 > .content {
 115                                         @include padding(3em, 1.5em);
 116                                 }
 117                         }
 118                 }
 119         }