SHARE
TWEET

Untitled

a guest Sep 7th, 2014 330 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top