Commit | Line | Data |
---|---|---|
519ca502 E |
1 | /** |
2 | * Site header | |
3 | */ | |
4 | .site-header { | |
5 | border-top: 5px solid $grey-color-dark; | |
6 | border-bottom: 1px solid $grey-color-light; | |
7 | min-height: 56px; | |
8 | ||
9 | // Positioning context for the mobile navigation icon | |
10 | position: relative; | |
11 | } | |
12 | ||
13 | .site-title { | |
14 | font-size: 26px; | |
15 | line-height: 56px; | |
16 | letter-spacing: -1px; | |
17 | margin-bottom: 0; | |
18 | float: left; | |
19 | margin-right: 20px; | |
20 | ||
21 | /*&, | |
22 | &:visited { | |
23 | color: $grey-color-dark; | |
24 | }*/ | |
25 | } | |
26 | ||
27 | .site-nav { | |
28 | float: right; | |
29 | line-height: 56px; | |
30 | ||
31 | .menu-icon { | |
32 | display: none; | |
33 | } | |
34 | ||
35 | .page-link { | |
36 | /*color: $text-color;*/ | |
37 | line-height: $base-line-height; | |
38 | font-size: 1.5*$base-font-size; | |
39 | ||
40 | // Gaps between nav items, but not on the first one | |
41 | &:not(:first-child) { | |
42 | margin-left: 20px; | |
43 | } | |
44 | } | |
45 | ||
46 | @include media-query($on-palm) { | |
47 | position: absolute; | |
48 | top: 9px; | |
49 | right: 30px; | |
50 | background-color: $background-color; | |
51 | border: 1px solid $grey-color-light; | |
52 | border-radius: 5px; | |
53 | text-align: right; | |
54 | ||
55 | .menu-icon { | |
56 | display: block; | |
57 | float: right; | |
58 | width: 36px; | |
59 | height: 26px; | |
60 | line-height: 0; | |
61 | padding-top: 10px; | |
62 | text-align: center; | |
63 | ||
64 | > svg { | |
65 | width: 18px; | |
66 | height: 15px; | |
67 | ||
68 | path { | |
69 | fill: $grey-color-dark; | |
70 | } | |
71 | } | |
72 | } | |
73 | ||
74 | .trigger { | |
75 | clear: both; | |
76 | display: none; | |
77 | } | |
78 | ||
79 | &:hover .trigger { | |
80 | display: block; | |
81 | padding-bottom: 5px; | |
82 | } | |
83 | ||
84 | .page-link { | |
85 | display: block; | |
86 | padding: 5px 10px; | |
87 | } | |
88 | } | |
89 | } | |
90 | ||
91 | ||
92 | ||
93 | /** | |
94 | * Site footer | |
95 | */ | |
96 | .site-footer { | |
97 | border-top: 1px solid $grey-color-light; | |
98 | padding: $spacing-unit 0; | |
99 | } | |
100 | ||
101 | .footer-heading { | |
102 | font-size: 18px; | |
103 | margin-bottom: $spacing-unit / 2; | |
104 | } | |
105 | ||
106 | .contact-list, | |
107 | .social-media-list { | |
108 | list-style: none; | |
109 | margin-left: 0; | |
110 | } | |
111 | ||
112 | .footer-col-wrapper { | |
113 | font-size: 15px; | |
114 | color: $grey-color; | |
115 | margin-left: -$spacing-unit / 2; | |
116 | @extend %clearfix; | |
117 | .text { | |
118 | font-size: 0.95*$base-font-size; | |
119 | } | |
120 | } | |
121 | ||
122 | .footer-col { | |
123 | float: left; | |
124 | margin-bottom: $spacing-unit / 2; | |
125 | padding-left: $spacing-unit / 2; | |
126 | } | |
127 | ||
128 | .footer-col-1 { | |
129 | width: -webkit-calc(35% - (#{$spacing-unit} / 2)); | |
130 | width: calc(35% - (#{$spacing-unit} / 2)); | |
131 | } | |
132 | ||
133 | .footer-col-2 { | |
134 | width: -webkit-calc(20% - (#{$spacing-unit} / 2)); | |
135 | width: calc(20% - (#{$spacing-unit} / 2)); | |
136 | } | |
137 | ||
138 | .footer-col-3 { | |
139 | width: -webkit-calc(45% - (#{$spacing-unit} / 2)); | |
140 | width: calc(45% - (#{$spacing-unit} / 2)); | |
141 | } | |
142 | ||
143 | @include media-query($on-laptop) { | |
144 | .footer-col-1, | |
145 | .footer-col-2 { | |
146 | width: -webkit-calc(50% - (#{$spacing-unit} / 2)); | |
147 | width: calc(50% - (#{$spacing-unit} / 2)); | |
148 | } | |
149 | ||
150 | .footer-col-3 { | |
151 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); | |
152 | width: calc(100% - (#{$spacing-unit} / 2)); | |
153 | } | |
154 | } | |
155 | ||
156 | @include media-query($on-palm) { | |
157 | .footer-col { | |
158 | float: none; | |
159 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); | |
160 | width: calc(100% - (#{$spacing-unit} / 2)); | |
161 | } | |
162 | } | |
163 | ||
164 | ||
165 | ||
166 | /** | |
167 | * Page content | |
168 | */ | |
169 | .page-content { | |
170 | padding: $spacing-unit 0; | |
171 | } | |
172 | ||
173 | .page-heading { | |
174 | font-size: 20px; | |
175 | } | |
176 | ||
177 | .post-list { | |
178 | margin-left: 0; | |
179 | list-style: none; | |
180 | ||
181 | > li { | |
182 | margin-bottom: $spacing-unit; | |
183 | } | |
184 | } | |
185 | ||
186 | .post-meta { | |
187 | font-size: $small-font-size; | |
188 | color: $grey-color; | |
189 | } | |
190 | ||
191 | .post-link { | |
192 | display: block; | |
193 | font-size: 24px; | |
194 | } | |
195 | ||
196 | ||
197 | ||
198 | /** | |
199 | * Posts | |
200 | */ | |
201 | .post-header { | |
202 | margin-bottom: $spacing-unit; | |
203 | } | |
204 | ||
205 | .post-title { | |
206 | font-size: 42px; | |
207 | letter-spacing: -1px; | |
208 | line-height: 1; | |
209 | ||
210 | @include media-query($on-laptop) { | |
211 | font-size: 36px; | |
212 | } | |
213 | } | |
214 | ||
215 | .post-content { | |
216 | margin-bottom: $spacing-unit; | |
217 | ||
218 | h2 { | |
219 | font-size: 32px; | |
220 | ||
221 | @include media-query($on-laptop) { | |
222 | font-size: 28px; | |
223 | } | |
224 | } | |
225 | ||
226 | h3 { | |
227 | font-size: 26px; | |
228 | ||
229 | @include media-query($on-laptop) { | |
230 | font-size: 22px; | |
231 | } | |
232 | } | |
233 | ||
234 | h4 { | |
235 | font-size: 20px; | |
236 | ||
237 | @include media-query($on-laptop) { | |
238 | font-size: 18px; | |
239 | } | |
240 | } | |
241 | } |