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(fg-bold);
  30                                         display: block;
  31                                         height: 2px;
  32                                         margin: 0.325em 0 0.5em 0;
  33                                         width: 100%;
  34                                 }
  35                         }
  36
  37                         > p {
  38                                 font-size: 0.7em;
  39                                 font-weight: _font(weight-bold);
  40                                 letter-spacing: _font(letter-spacing-alt);
  41                                 margin-bottom: 0;
  42                                 text-transform: uppercase;
  43                         }
  44
  45                         body.is-ie & {
  46                                 > :first-child {
  47                                         &:after {
  48                                                 max-width: 9em;
  49                                         }
  50                                 }
  51
  52                                 > h1 {
  53                                         &:after {
  54                                                 max-width: 100% !important;
  55                                         }
  56                                 }
  57                         }
  58                 }
  59
  60                 @include breakpoint('<=small') {
  61                         &.major {
  62                                 > p {
  63                                         br {
  64                                                 display: none;
  65                                         }
  66                                 }
  67                         }
  68                 }
  69         }