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