|
2 | 2 | #PAGE-HEAD |
3 | 3 | \*------------------------------------*/ |
4 | 4 |
|
5 | | -$header-border-width: 6px; |
6 | | -$header-max-height: 480px; |
7 | | - |
8 | 5 | /** |
9 | 6 | * The site’s main page-head can have two different states: |
10 | 7 | * |
@@ -42,83 +39,3 @@ $header-max-height: 480px; |
42 | 39 |
|
43 | 40 |
|
44 | 41 |
|
45 | | - |
46 | | -/** |
47 | | - * Large site headers act more like mastheads. They have a faux-fluid-height |
48 | | - * which is controlled by the wrapping element inside it. |
49 | | - * |
50 | | - * 1. Mastheads will typically have dark backgrounds, so we need to make sure |
51 | | - * the contrast is okay. This value is subject to change as the background |
52 | | - * image changes. |
53 | | - * 2. We need to delegate a lot of the masthead’s layout to its wrapper element |
54 | | - * rather than the masthead itself: it is to this wrapper that most things |
55 | | - * are positioned. |
56 | | - * 3. The wrapper needs positioning context for us to lay our nav and masthead |
57 | | - * text in. |
58 | | - * 4. Faux-fluid-height technique: simply create the illusion of fluid height by |
59 | | - * creating space via a percentage padding, and then position everything over |
60 | | - * the top of that. This percentage gives us a 16:9 ratio. |
61 | | - * 5. When the viewport is at 758px wide, our 16:9 ratio means that the masthead |
62 | | - * is currently rendered at 480px high. Let’s… |
63 | | - * 6. …seamlessly snip off the fluid feature at this height, and… |
64 | | - * 7. …fix the height at 480px. This means that we should see no jumps in height |
65 | | - * as the masthead moves from fluid to fixed. This actual value takes into |
66 | | - * account the padding and the top border on the header itself. |
67 | | - */ |
68 | | -.page-head--masthead { |
69 | | - |
70 | | - // Optional Base64 version instead of a gradient. |
71 | | - $bg-grad: linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%); |
72 | | - $bg-grad: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAmQWRvYmUAZMAAAAABAwAVBAMGCg0AAAICAAACpgAAAzEAAAO5/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wgARCAALABADAREAAhEBAxEB/8QAswABAQAAAAAAAAAAAAAAAAAACAcBAQADAAAAAAAAAAAAAAAAAAUBBAYQAAECBgIDAAAAAAAAAAAAAAIAAwETBDQFBhEyFBYHEQAABAQFAgcBAAAAAAAAAAABEQIDEgQUBQBBIhMVITUxMkJTJDQlBhIAAQMDAwUAAAAAAAAAAAAAAQAxEhFBAvDBA5Gh8TJSEwACAgEDBAMBAQAAAAAAAAABEQAhMUFRYfBxgZGh0eGx8f/aAAwDAQACEQMRAAABIJaIutSiMk7MtIZ//9oACAEBAAEFAvtFQORf23C0+Jd3iZ7ttfX/2gAIAQIAAQUCF0H0EDFY/jx4Xf8A/9oACAEDAAEFApRtp6AKpuHrb//aAAgBAgIGPwKvHkCKeVTN6nsi3suR5ae09l//2gAIAQMCBj8CjkDKqEGiOqDtbZcfzprwX//aAAgBAQEGPwL+NtNtFqbfVakuAzLmAOT0+8gBQCFEKCFnPwTiQTKpeBty2SdYt95DwcupsVTqGFISn4odIBIh6kOLR3Xssp9Omq4KN6Kmy2vc9ZRQ5YtR7OxybZ15UkUGo9v9PjIfOWkjh1Y//9oACAEBAwE/IQzU4QJMiWMLKuHEQEIQwd1BBgCcgs+sNdO8Q/8AOpMxIf/aAAgBAgMBPyEqFDBIwDlnhc4hA1qVsSma8zWRlafGHF5Tnj7yujn/2gAIAQMDAT8hNBiNDUjAW7geV2PcGfUev1ng6v8AcqNodyfWp02p/9oADAMBAAIRAxEAABDTX//aAAgBAQMBPxAeMugFju1xEgYfPigDqLBGYpOhGhiR2dLUBNF8pp//2gAIAQIDAT8QYe2yPKCTGAaCjOsFQAqIRQFjLyDkggz9sKv1E/Bc77GqLDpZtT//2gAIAQMDAT8QdksHDCFIPIwswqRmZIroIoIFWzBAJzPxWb+TdeSp2QC1SL6H5XP/2Q=='); |
73 | | - |
74 | | - margin-bottom: 0; |
75 | | - background-color: #2e2620; |
76 | | - background-image: url(/img/css/masthead.jpg), $bg-grad; |
77 | | - background-position: center center; |
78 | | - @include vendor(background-size, cover); |
79 | | - color: $color-masthead; /* [1] */ |
80 | | - border-top-color: $color-masthead; |
81 | | - border-bottom-width: 0; |
82 | | - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset; |
83 | | - |
84 | | - @include media-query(lap-and-up) { |
85 | | - background-image: url(/img/css/masthead-medium.jpg), $bg-grad; |
86 | | - } |
87 | | - |
88 | | - @include media-query(desk) { |
89 | | - background-image: url(/img/css/masthead-large.jpg), $bg-grad; |
90 | | - } |
91 | | - |
92 | | - > .wrapper { /* [2] */ |
93 | | - position: relative; /* [3] */ |
94 | | - padding-top: 56.25%; /* [4] */ |
95 | | - |
96 | | - @media screen and (min-width: 758px) { /* [5] */ |
97 | | - padding-top: 0; /* [6] */ |
98 | | - height: $header-max-height - double($spacing-unit) - $header-border-width; /* [7] */ |
99 | | - } |
100 | | - |
101 | | - } |
102 | | - |
103 | | -} |
104 | | - |
105 | | -/** |
106 | | - * Mastheads will have some large text in them. Let’s position that bottom-left. |
107 | | - */ |
108 | | -.page-head__text { |
109 | | - margin: 0; |
110 | | - position: absolute; |
111 | | - bottom: 0; |
112 | | - left: auto; |
113 | | - color: $color-masthead; |
114 | | - @include font-size(24px); |
115 | | - |
116 | | - @include media-query(lap-and-up) { |
117 | | - @include font-size(48px); |
118 | | - } |
119 | | - |
120 | | - @include media-query(desk) { |
121 | | - @include font-size(72px); |
122 | | - } |
123 | | - |
124 | | -} |
0 commit comments