assets/main/sass/layout/_intro.scss

   1 ///
   2 /// Massively 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 /* Intro */
   8
   9         #intro {
  10                 @include color-typography(invert);
  11                 @include color-button(invert);
  12                 @include padding(_size(padding) * 4, _size(padding) * 2);
  13                 @include vendor('align-items', 'center');
  14                 @include vendor('display', 'flex');
  15                 @include vendor('flex-direction', 'column');
  16                 @include vendor('justify-content', 'flex-end');
  17                 @include vendor('transition', (
  18                         'opacity 1s ease',
  19                         'transform 1s ease'
  20                 ));
  21                 position: relative;
  22                 cursor: default;
  23                 text-align: center;
  24                 z-index: 1;
  25                 min-height: 100vh;
  26
  27                 h1 {
  28                         font-size: 5rem;
  29                         line-height: 1;
  30                 }
  31
  32                 p {
  33                         font-size: 1.25rem;
  34                         font-style: italic;
  35                         margin-top: -0.25rem;
  36                         text-align: center;
  37                 }
  38
  39                 & + #header {
  40                         margin-top: -20rem;
  41
  42                         .logo {
  43                                 @include vendor('transform', 'translateY(2rem)');
  44                                 opacity: 0;
  45                                 visibility: hidden;
  46                         }
  47                 }
  48
  49                 &.hidden {
  50                         @include vendor('pointer-events', 'none');
  51                         @include vendor('transform', 'translateY(2rem)');
  52                         @include vendor('transition', (
  53                                 'opacity 0.5s ease',
  54                                 'transform 0.5s ease',
  55                                 'visibility 0.5s'
  56                         ));
  57                         opacity: 0;
  58                         visibility: hidden;
  59
  60                         & + #header {
  61                                 .logo {
  62                                         @include vendor('transform', 'translateY(0)');
  63                                         opacity: 1;
  64                                         visibility: visible;
  65                                 }
  66                         }
  67                 }
  68
  69                 body.is-preload & {
  70                         @include vendor('transform', 'translateY(2rem)');
  71                         opacity: 0;
  72
  73                         &:not(.hidden) {
  74                                 & + #header + #nav {
  75                                         @include vendor('transform', 'translateY(4rem)');
  76                                         opacity: 0;
  77                                 }
  78                         }
  79                 }
  80
  81                 @include breakpoint('<=medium') {
  82                         @include padding(_size(padding) * 2, _size(padding) * 2);
  83                         min-height: 90vh;
  84
  85                         p {
  86                                 br {
  87                                         display: none;
  88                                 }
  89                         }
  90
  91                         & + #header {
  92                                 margin-top: -14rem;
  93                         }
  94                 }
  95
  96                 @include breakpoint('<=small') {
  97                         @include padding(_size(padding) * 1.5, _size(padding) * 1);
  98                         min-height: 80vh;
  99
 100                         h1 {
 101                                 font-size: 3.25rem;
 102                                 line-height: 1.1;
 103                                 margin-bottom: _size(element-margin) * 0.5;
 104                         }
 105
 106                         p {
 107                                 font-size: 1rem;
 108                                 margin-top: 0rem;
 109                         }
 110
 111                         .actions {
 112                                 display: none;
 113                         }
 114                 }
 115         }