Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Large site headers act more like mastheads. They have a faux-fluid-height
- * which is controlled by the wrapping element inside it.
- *
- * 1. Mastheads will typically have dark backgrounds, so we need to make sure
- * the contrast is okay. This value is subject to change as the background
- * image changes.
- * 2. We need to delegate a lot of the masthead’s layout to its wrapper element
- * rather than the masthead itself: it is to this wrapper that most things
- * are positioned.
- * 3. The wrapper needs positioning context for us to lay our nav and masthead
- * text in.
- * 4. Faux-fluid-height technique: simply create the illusion of fluid height by
- * creating space via a percentage padding, and then position everything over
- * the top of that. This percentage gives us a 16:9 ratio.
- * 5. When the viewport is at 758px wide, our 16:9 ratio means that the masthead
- * is currently rendered at 480px high. Let’s…
- * 6. …seamlessly snip off the fluid feature at this height, and…
- * 7. …fix the height at 480px. This means that we should see no jumps in height
- * as the masthead moves from fluid to fixed. This actual value takes into
- * account the padding and the top border on the header itself.
- */
- .page-head--masthead {
- margin-bottom: 0;
- background: url(/img/css/masthead.jpg) center center #2e2620;
- @include vendor(background-size, cover);
- color: $color-masthead; /* [1] */
- border-top-color: $color-masthead;
- border-bottom-width: 0;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
- @include media-query(lap-and-up) {
- background-image: url(/img/css/masthead-medium.jpg);
- }
- @include media-query(desk) {
- background-image: url(/img/css/masthead-large.jpg);
- }
- > .wrapper { /* [2] */
- position: relative; /* [3] */
- padding-top: 56.25%; /* [4] */
- @media screen and (min-width: 758px) { /* [5] */
- padding-top: 0; /* [6] */
- height: $header-max-height - double($spacing-unit) - $header-border-width; /* [7] */
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement