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