SHOW:
|
|
- or go back to the newest paste.
| 1 | /** | |
| 2 | * Large site headers act more like mastheads. They have a faux-fluid-height | |
| 3 | * which is controlled by the wrapping element inside it. | |
| 4 | * | |
| 5 | * 1. Mastheads will typically have dark backgrounds, so we need to make sure | |
| 6 | * the contrast is okay. This value is subject to change as the background | |
| 7 | * image changes. | |
| 8 | * 2. We need to delegate a lot of the masthead’s layout to its wrapper element | |
| 9 | * rather than the masthead itself: it is to this wrapper that most things | |
| 10 | * are positioned. | |
| 11 | * 3. The wrapper needs positioning context for us to lay our nav and masthead | |
| 12 | * text in. | |
| 13 | * 4. Faux-fluid-height technique: simply create the illusion of fluid height by | |
| 14 | * creating space via a percentage padding, and then position everything over | |
| 15 | * the top of that. This percentage gives us a 16:9 ratio. | |
| 16 | * 5. When the viewport is at 758px wide, our 16:9 ratio means that the masthead | |
| 17 | * is currently rendered at 480px high. Let’s… | |
| 18 | * 6. …seamlessly snip off the fluid feature at this height, and… | |
| 19 | * 7. …fix the height at 480px. This means that we should see no jumps in height | |
| 20 | * as the masthead moves from fluid to fixed. This actual value takes into | |
| 21 | * account the padding and the top border on the header itself. | |
| 22 | */ | |
| 23 | ||
| 24 | .page-head--masthead {
| |
| 25 | margin-bottom: 0; | |
| 26 | background: url(/img/css/masthead.jpg) center center #2e2620; | |
| 27 | @include vendor(background-size, cover); | |
| 28 | color: $color-masthead; /* [1] */ | |
| 29 | border-top-color: $color-masthead; | |
| 30 | border-bottom-width: 0; | |
| 31 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset; | |
| 32 | ||
| 33 | @include media-query(lap-and-up) {
| |
| 34 | background-image: url(/img/css/masthead-medium.jpg); | |
| 35 | } | |
| 36 | ||
| 37 | @include media-query(desk) {
| |
| 38 | background-image: url(/img/css/masthead-large.jpg); | |
| 39 | } | |
| 40 | ||
| 41 | > .wrapper { /* [2] */
| |
| 42 | position: relative; /* [3] */ | |
| 43 | padding-top: 56.25%; /* [4] */ | |
| 44 | ||
| 45 | @media screen and (min-width: 758px) { /* [5] */
| |
| 46 | padding-top: 0; /* [6] */ | |
| 47 | height: $header-max-height - double($spacing-unit) - $header-border-width; /* [7] */ | |
| 48 | } | |
| 49 | ||
| 50 | } | |
| 51 | ||
| 52 | } |
