|
1 /*------------------------------------------------------------------------------ |
|
2 22.0 - About Pages |
|
3 |
|
4 1.0 Global: About, Credits, Freedoms |
|
5 1.1 Typography |
|
6 1.2 Structure |
|
7 1.3 Point Releases |
|
8 2.0 About Page |
|
9 2.1 Typography |
|
10 2.2 Structure |
|
11 3.0 Credits & Freedoms Pages |
|
12 ------------------------------------------------------------------------------*/ |
|
13 |
|
14 /*------------------------------------------------------------------------------ |
|
15 1.0 - Global: About, Credits, Freedoms |
|
16 ------------------------------------------------------------------------------*/ |
|
17 |
|
18 .about-wrap { |
|
19 position: relative; |
|
20 margin: 25px 20px 0 40px; |
|
21 max-width: 1050px; /* readability */ |
|
22 font-size: 15px; |
|
23 } |
|
24 |
|
25 .about-wrap div.updated, |
|
26 .about-wrap div.error { |
|
27 display: none !important; |
|
28 } |
|
29 |
|
30 .about-wrap hr { |
|
31 border: 0; |
|
32 height: 0; |
|
33 margin: 0; |
|
34 border-top: 1px solid rgba(0, 0, 0, 0.1); |
|
35 } |
|
36 |
|
37 .about-wrap img { |
|
38 margin: 0; |
|
39 max-width: 100%; |
|
40 height: auto; |
|
41 vertical-align: middle; |
|
42 } |
|
43 |
|
44 /* WordPress Version Badge */ |
|
45 |
|
46 .wp-badge { |
|
47 background: #0073aa url(../images/w-logo-white.png?ver=20131202) no-repeat; |
|
48 background-position: center 24px; |
|
49 -webkit-background-size: 85px 85px; |
|
50 background-size: 85px 85px; |
|
51 color: #78c8e6; |
|
52 font-size: 14px; |
|
53 text-align: center; |
|
54 font-weight: 600; |
|
55 margin: 5px 0 0; |
|
56 padding-top: 120px; |
|
57 height: 40px; |
|
58 display: inline-block; |
|
59 width: 150px; |
|
60 text-rendering: optimizeLegibility; |
|
61 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
62 box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
63 } |
|
64 |
|
65 .svg .wp-badge { |
|
66 background-image: url(../images/wordpress-logo-white.svg?ver=20131110); |
|
67 } |
|
68 |
|
69 .about-wrap .wp-badge { |
|
70 position: absolute; |
|
71 top: 0; |
|
72 left: 0; |
|
73 } |
|
74 |
|
75 /* Tabs */ |
|
76 |
|
77 .about-wrap h2.nav-tab-wrapper { |
|
78 padding-right: 6px; |
|
79 } |
|
80 |
|
81 .about-wrap h2 .nav-tab { |
|
82 padding: 4px 15px 6px; |
|
83 margin: 0 0 -1px 3px; |
|
84 font-size: 18px; |
|
85 vertical-align: top; |
|
86 border-width: 1px; |
|
87 white-space: nowrap; |
|
88 } |
|
89 |
|
90 /* 1.1 - Typography */ |
|
91 |
|
92 .about-wrap p { |
|
93 line-height: 1.6em; |
|
94 font-size: 14px; |
|
95 } |
|
96 |
|
97 .about-wrap h1 { |
|
98 margin: 0.2em 0 0 200px; |
|
99 color: #32373c; |
|
100 line-height: 1.2em; |
|
101 font-size: 2.8em; |
|
102 font-weight: 400; |
|
103 } |
|
104 |
|
105 .about-wrap h3 { |
|
106 margin: 1.25em 0 .6em; |
|
107 font-size: 1.25em; |
|
108 line-height: 1.5em; |
|
109 } |
|
110 |
|
111 .about-wrap h4 { |
|
112 color: #23282d; |
|
113 } |
|
114 |
|
115 .about-wrap code, |
|
116 .about-wrap ol li p { |
|
117 font-size: 14px; |
|
118 } |
|
119 |
|
120 .about-wrap .about-description, |
|
121 .about-wrap .about-text { |
|
122 margin-top: 1.4em; |
|
123 font-weight: normal; |
|
124 line-height: 1.6em; |
|
125 font-size: 19px; |
|
126 } |
|
127 |
|
128 .about-wrap .about-text { |
|
129 margin: 1em 0 1em 200px; |
|
130 min-height: 60px; |
|
131 color: #777; |
|
132 } |
|
133 |
|
134 /* 1.2 - Structure */ |
|
135 |
|
136 .about-wrap .two-col > div { |
|
137 position: relative; |
|
138 width: 47.6%; |
|
139 margin-left: 4.799999999%; |
|
140 float: right; |
|
141 } |
|
142 |
|
143 .about-wrap .three-col > div { |
|
144 position: relative; |
|
145 width: 29.95%; |
|
146 margin-left: 4.999999999%; |
|
147 float: right; |
|
148 } |
|
149 |
|
150 .about-wrap [class$=col] .last-feature { |
|
151 margin-left: 0; |
|
152 } |
|
153 |
|
154 /* 1.3 - Point Releases */ |
|
155 |
|
156 .about-wrap .point-releases { |
|
157 margin-top: 5px; |
|
158 border-bottom: 1px solid #dfdfdf; |
|
159 } |
|
160 |
|
161 .about-wrap .changelog.point-releases h3 { |
|
162 padding-top: 35px; |
|
163 } |
|
164 |
|
165 .about-wrap .changelog.point-releases h3:first-child { |
|
166 padding-top: 7px; |
|
167 } |
|
168 |
|
169 /*------------------------------------------------------------------------------ |
|
170 2.0 - About Page |
|
171 ------------------------------------------------------------------------------*/ |
|
172 |
|
173 /* 2.1 - Typography */ |
|
174 |
|
175 .about-wrap .headline-feature h2 { |
|
176 margin: 50px 0 30px; |
|
177 font-size: 2.2em; |
|
178 font-weight: 300; |
|
179 line-height: 1.3; |
|
180 text-align: right; |
|
181 } |
|
182 |
|
183 .about-wrap .headline-feature h3 { |
|
184 margin-top: 30px; |
|
185 text-align: center; |
|
186 } |
|
187 |
|
188 .about-wrap .feature-list h2 { |
|
189 margin: 30px 0 15px; |
|
190 text-align: center; |
|
191 } |
|
192 |
|
193 .about-wrap .feature-section h4 { |
|
194 margin: 1.4em 0 0.6em 0; |
|
195 font-size: 1em; |
|
196 } |
|
197 |
|
198 .about-wrap .feature-section p { |
|
199 margin-top: 0.6em; |
|
200 } |
|
201 |
|
202 /* 2.2 - Structure */ |
|
203 |
|
204 .about-wrap .feature-video { |
|
205 position: relative; |
|
206 margin: 40px 0; |
|
207 padding-bottom: 56.25%; /* video is 1280 x 720 */ |
|
208 width: 100%; |
|
209 height: 0; |
|
210 text-align: center; |
|
211 } |
|
212 |
|
213 .about-wrap .feature-video embed { |
|
214 position: absolute; |
|
215 top: 0; |
|
216 right: 0; |
|
217 width: 100%; |
|
218 height: 100%; |
|
219 } |
|
220 |
|
221 .about-wrap .featured-image { |
|
222 text-align: center; |
|
223 } |
|
224 |
|
225 .about-wrap .feature-section { |
|
226 overflow: hidden; |
|
227 padding: 0 0 40px; |
|
228 border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
229 } |
|
230 |
|
231 .about-wrap .headline-feature .feature-section { |
|
232 margin: 0 auto; |
|
233 max-width: 95%; |
|
234 } |
|
235 |
|
236 .about-wrap .feature-section .col:nth-of-type(odd) { |
|
237 float: right; |
|
238 margin: 40px 0 0 5%; |
|
239 width: 48%; |
|
240 } |
|
241 |
|
242 .about-wrap .feature-section .col:nth-of-type(even) { |
|
243 float: left; |
|
244 margin: 40px 0 0; |
|
245 width: 46%; |
|
246 } |
|
247 |
|
248 .about-wrap .changelog { |
|
249 margin-bottom: 40px; |
|
250 } |
|
251 |
|
252 .about-wrap .changelog.feature-section > div { |
|
253 margin-top: 40px; |
|
254 } |
|
255 |
|
256 /* Return to Dashboard Home link */ |
|
257 |
|
258 .about-wrap .return-to-dashboard { |
|
259 margin: 30px -5px 0 0; |
|
260 font-size: 14px; |
|
261 font-weight: bold; |
|
262 } |
|
263 |
|
264 .about-wrap .return-to-dashboard a { |
|
265 text-decoration: none; |
|
266 padding: 0 5px; |
|
267 } |
|
268 |
|
269 .about-wrap .feature-list.finer-points h4, |
|
270 .about-wrap .feature-list.finer-points p { |
|
271 margin-right: 115px; |
|
272 } |
|
273 |
|
274 /*------------------------------------------------------------------------------ |
|
275 3.0 - Credits & Freedoms Pages |
|
276 ------------------------------------------------------------------------------*/ |
|
277 |
|
278 /* Credits */ |
|
279 |
|
280 .about-wrap h4.wp-people-group { |
|
281 margin-top: 2.6em; |
|
282 font-size: 16px; |
|
283 } |
|
284 |
|
285 .about-wrap ul.wp-people-group { |
|
286 overflow: hidden; |
|
287 padding: 0 5px; |
|
288 margin: 0 -5px 0 -15px; |
|
289 } |
|
290 |
|
291 .about-wrap ul.compact { |
|
292 margin-bottom: 0 |
|
293 } |
|
294 |
|
295 .about-wrap li.wp-person { |
|
296 display: inline-block; |
|
297 vertical-align: top; |
|
298 margin-left: 10px; |
|
299 padding-bottom: 15px; |
|
300 height: 70px; |
|
301 width: 280px; |
|
302 } |
|
303 |
|
304 .about-wrap ul.compact li.wp-person { |
|
305 height: auto; |
|
306 width: 180px; |
|
307 padding-bottom: 0; |
|
308 margin-bottom: 0; |
|
309 } |
|
310 |
|
311 .about-wrap li.wp-person img.gravatar { |
|
312 float: right; |
|
313 margin: 0 0 10px 10px; |
|
314 padding: 2px; |
|
315 width: 60px; |
|
316 height: 60px; |
|
317 } |
|
318 |
|
319 .about-wrap ul.compact li.wp-person img.gravatar { |
|
320 width: 30px; |
|
321 height: 30px; |
|
322 } |
|
323 |
|
324 .about-wrap li.wp-person a.web { |
|
325 display: block; |
|
326 margin: 6px 0 2px; |
|
327 font-size: 16px; |
|
328 font-weight: normal; |
|
329 line-height: 1.6em; |
|
330 text-decoration: none; |
|
331 } |
|
332 |
|
333 .about-wrap #wp-people-group-validators + p.wp-credits-list { |
|
334 margin-top: 0; |
|
335 } |
|
336 |
|
337 .about-wrap p.wp-credits-list a { |
|
338 white-space: nowrap; |
|
339 } |
|
340 |
|
341 /* Freedoms */ |
|
342 |
|
343 .freedoms-php .about-wrap ol { |
|
344 margin: 40px 60px; |
|
345 } |
|
346 |
|
347 .freedoms-php .about-wrap ol li { |
|
348 list-style-type: decimal; |
|
349 font-weight: bold; |
|
350 } |
|
351 |
|
352 .freedoms-php .about-wrap ol p { |
|
353 font-weight: normal; |
|
354 margin: 0.6em 0; |
|
355 } |
|
356 |
|
357 /*------------------------------------------------------------------------------ |
|
358 4.0 - Media Queries |
|
359 ------------------------------------------------------------------------------*/ |
|
360 |
|
361 @media screen and ( max-width: 782px ) { |
|
362 .about-wrap .feature-section { |
|
363 padding: 0; |
|
364 border-bottom: none; |
|
365 } |
|
366 |
|
367 .about-wrap .one-col > div, |
|
368 .about-wrap .two-col > div, |
|
369 .about-wrap .three-col > div, |
|
370 .about-wrap .two-col .col:nth-of-type(n) { |
|
371 width: 100%; |
|
372 margin: 40px 0 0; |
|
373 padding: 0 0 40px; |
|
374 border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
375 } |
|
376 |
|
377 .about-wrap .two-col .col h3 { |
|
378 margin-top: 0; |
|
379 } |
|
380 |
|
381 .about-wrap .three-col img { |
|
382 display: block; |
|
383 margin: 0 auto; |
|
384 } |
|
385 |
|
386 .about-wrap .feature-list div { |
|
387 margin: 0; |
|
388 padding: 0; |
|
389 border-bottom: none; |
|
390 } |
|
391 |
|
392 .about-wrap .headline-feature .feature-section { |
|
393 max-width: 100%; |
|
394 } |
|
395 |
|
396 .about-wrap .feature-list .feature-section { |
|
397 padding: 0 0 40px; |
|
398 } |
|
399 } |
|
400 |
|
401 @media only screen and (max-width: 500px) { |
|
402 .about-wrap { |
|
403 margin-left: 20px; |
|
404 margin-right: 10px; |
|
405 } |
|
406 |
|
407 .about-wrap h1, |
|
408 .about-wrap .about-text { |
|
409 margin-left: 0; |
|
410 } |
|
411 |
|
412 .about-wrap .about-text { |
|
413 margin-bottom: 0.25em; |
|
414 } |
|
415 |
|
416 .about-wrap .wp-badge { |
|
417 position: relative; |
|
418 margin-bottom: 1.5em; |
|
419 width: 100%; |
|
420 } |
|
421 |
|
422 .about-wrap h2.nav-tab-wrapper { |
|
423 padding-right: 0; |
|
424 border-bottom: 0; |
|
425 } |
|
426 |
|
427 .about-wrap h2 .nav-tab { |
|
428 margin-top: 10px; |
|
429 margin-left: 10px; |
|
430 border-bottom: 1px solid #ccc; |
|
431 } |
|
432 |
|
433 .about-wrap .three-col div, |
|
434 .about-wrap .headline-feature .feature-section div { |
|
435 width: 100% !important; |
|
436 float: none !important; |
|
437 } |
|
438 |
|
439 .about-wrap .dfw p { |
|
440 max-width: 90%; |
|
441 } |
|
442 } |
|
443 |
|
444 @media only screen and (max-width: 400px) { |
|
445 .about-wrap .feature-list svg { |
|
446 margin-top: 15px; |
|
447 height: 65px; |
|
448 width: 65px; |
|
449 } |
|
450 .about-wrap .feature-list.finer-points h4, |
|
451 .about-wrap .feature-list.finer-points p { |
|
452 margin-right: 80px; |
|
453 } |
|
454 } |