@import "global"; .cover { width: 100%; background-size: cover; .meta-large [class*="icon"] { padding-left: 5px; padding-right: 5px; } } .cover-simple { width: 100%; } .cover-full { height: 100vh; font-size: 1.2em; } @media (max-width: $mobile-width-threshold) { .cover { padding: $spacing-vertical $spacing-vertical * 2 / 3; } .cover-title { font-size: 2.8em; margin-bottom: $spacing-vertical; } .cover-subtitle { font-size: 1.2em; } } @media (min-width: $mobile-width-threshold) { .cover-title { font-size: 4.0em; &.cover-title-tile { font-size: 2.8em; max-width: 660px; margin-left: auto; margin-right: auto; } } .cover-subtitle { font-size: 1.4em; } } @media (max-width: $max-content-width) and (min-width: $mobile-width-threshold) { .cover { padding: $spacing-vertical * 1.5 $spacing-vertical * 2; } .cover-column { padding-left: $spacing-vertical * 0.5; padding-right: $spacing-vertical * 0.5; } } @media (min-width: $max-content-width) { .cover { padding: $spacing-vertical * 1.5 $spacing-vertical * 3; } .cover-column { padding-left: $spacing-vertical * 1.5; padding-right: $spacing-vertical * 1.5; } } .cover-stretch-wrap { @include display-flex(); @include flex-direction(column); > .cover { @include flex(1); } } .cover-center { @include flex-direction(column); @include absolute-center(); } .cover-dark { color: #ddd; .cover-title { color: white; } } .cover-light { color: #444; .cover-title { color: #111; } } .cover-light-alt { color: #333; .cover-title { color: #000; } } .cover-dark-grad { //@include linear-gradient(darken($color-primary, 5), lighten($color-primary, 5)); background-color: $color-primary; } .cover-light-alt-grad { //@include linear-gradient(darken($color-light-alt, 5), lighten($color-light-alt, 5)); background-color: $color-light-alt; } .cover-title, .cover-subtitle { &:not(.cover-title-flat) { text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); } } .cover-title { line-height: 1.4; } .cover-subtitle { margin: $spacing-vertical 0 $spacing-vertical; }