forked from csswizardry/csswizardry.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path_components.page-head.scss
More file actions
124 lines (101 loc) · 5.18 KB
/
Copy path_components.page-head.scss
File metadata and controls
124 lines (101 loc) · 5.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*------------------------------------*\
#PAGE-HEAD
\*------------------------------------*/
$header-border-width: 6px;
$header-max-height: 480px;
/**
* The site’s main page-head can have two different states:
*
* 1) Regular page-head with no backgrounds or extra treatments; it just
* contains the logo and nav.
* 2) A masthead that has a fluid-height (becoming fixed after a certain point)
* which has a large background image, and some supporting text.
*
* The regular page-head is incredibly simple, but the masthead version has some
* slightly intermingled dependency with the wrapper that lives inside it.
*/
/**
* 1. A slightly smaller padding on smaller viewports.
* 2. Grow to full-sized padding on large enough viewports.
*/
.page-head {
@extend %margin-bottom;
border-style: solid;
border-width: $header-border-width 0 1px;
border-top-color: $color-page-head-border;
border-bottom-color: #f2f2f2;
padding-top: $spacing-unit--small; /* [1] */
padding-bottom: $spacing-unit--small; /* [1] */
background-color: $color-page-head-background;
@include media-query(lap-and-up) {
padding-top: $spacing-unit; /* [2] */
padding-bottom: $spacing-unit; /* [2] */
}
}
/**
* 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 {
// Optional Base64 version instead of a gradient.
$bg-grad: linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
$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==');
margin-bottom: 0;
background-color: #2e2620;
background-image: url(/img/css/masthead.jpg), $bg-grad;
background-position: center center;
@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), $bg-grad;
}
@include media-query(desk) {
background-image: url(/img/css/masthead-large.jpg), $bg-grad;
}
> .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] */
}
}
}
/**
* Mastheads will have some large text in them. Let’s position that bottom-left.
*/
.page-head__text {
margin: 0;
position: absolute;
bottom: 0;
left: auto;
color: $color-masthead;
@include font-size(24px);
@include media-query(lap-and-up) {
@include font-size(48px);
}
@include media-query(desk) {
@include font-size(72px);
}
}