dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Hero.module.scss (1196B)

      1 @use 'sass:list';
      2 @use 'core/colors';
      3 @use 'core/responsive';
      4 @use 'core/vars';
      5 
      6 $xs-height: 10rem;
      7 $sm-height: 15rem;
      8 $md-height: 20rem;
      9 $lg-height: 25rem;
     10 $padding: 4rem 0;
     11 $body-padding: 0 (vars.$gap * 2);
     12 
     13 $_heights: (
     14   // key: (desktop-or-tablet, mobile)
     15   small: ($sm-height, $xs-height),
     16   medium: ($md-height, $sm-height),
     17   large: ($lg-height, $md-height),
     18 );
     19 
     20 @mixin _apply-height($n) {
     21   @each $key, $heights in $_heights {
     22     &.is-#{$key} {
     23       min-height: list.nth($heights, $n);
     24     }
     25   }
     26 }
     27 
     28 .hero {
     29   display: flex;
     30   flex-direction: column;
     31   position: relative;
     32   padding: $padding;
     33   overflow: hidden;
     34   justify-content: center;
     35 
     36   @include _apply-height(2);
     37 
     38   @include responsive.tablet(true) using ($max-width) {
     39     @include _apply-height(1);
     40   }
     41 
     42   @include colors.apply-themes using ($theme) {
     43     background-color: colors.get($theme, 'surface');
     44     color: colors.get($theme, 'on-surface');
     45 
     46     @include colors.container-sets($theme) using ($key, $color, $on-color) {
     47       &.is-#{$key} {
     48         background-color: $color;
     49         color: $on-color;
     50       }
     51     }
     52   }
     53 
     54   .hero-body {
     55     padding: $body-padding;
     56 
     57     :last-child {
     58       margin-bottom: 0;
     59     }
     60   }
     61 }