assets/sass/components/_section.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 /* Section/Article */
   8
   9         section, article {
  10                 &.special {
  11                         text-align: center;
  12                 }
  13         }
  14
  15         header {
  16                 &.major {
  17                         width: -moz-max-content;
  18                         width: -webkit-max-content;
  19                         width: -ms-max-content;
  20                         width: max-content;
  21                         margin-bottom: _size(element-margin);
  22
  23                         > :first-child {
  24                                 margin-bottom: 0;
  25                                 width: calc(100% + 0.5em);
  26
  27                                 &:after {
  28                                         content: '';
  29                                         background-color: _palette_light(fg-bold);
  30                                         display: block;
  31                                         height: 2px;
  32                                         margin: 0.325em 0 0.5em 0;
  33                                         width: 100%;
  34                                         @media screen and (prefers-color-scheme: dark) {
  35                                                 background-color: _palette_dark(fg-bold);
  36                                         }
  37                                 }
  38                         }
  39
  40                         > p {
  41                                 font-size: 0.7em;
  42                                 font-weight: _font(weight-bold);
  43                                 letter-spacing: _font(letter-spacing-alt);
  44                                 margin-bottom: 0;
  45                                 text-transform: uppercase;
  46                         }
  47
  48                         body.is-ie & {
  49                                 > :first-child {
  50                                         &:after {
  51                                                 max-width: 9em;
  52                                         }
  53                                 }
  54
  55                                 > h1 {
  56                                         &:after {
  57                                                 max-width: 100% !important;
  58                                         }
  59                                 }
  60                         }
  61                 }
  62
  63                 @include breakpoint('<=small') {
  64                         &.major {
  65                                 > p {
  66                                         br {
  67                                                 display: none;
  68                                         }
  69                                 }
  70                         }
  71                 }
  72         }