author | ymh <ymh.work@gmail.com> |
Tue, 15 Oct 2019 15:48:13 +0200 | |
changeset 13 | d255fe9cd479 |
parent 9 | 177826044cd9 |
child 16 | a86126ab1dd4 |
permissions | -rw-r--r-- |
5 | 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 40px 0 20px; |
|
21 |
max-width: 1050px; /* readability */ |
|
22 |
font-size: 15px; |
|
23 |
} |
|
24 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
25 |
.about-wrap.full-width-layout { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
26 |
max-width: 1200px; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
27 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
28 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
29 |
.about-wrap-content { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
30 |
max-width: 1050px; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
31 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
32 |
|
5 | 33 |
.about-wrap div.updated, |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
34 |
.about-wrap div.error, |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
35 |
.about-wrap .notice { |
5 | 36 |
display: none !important; |
37 |
} |
|
38 |
||
39 |
.about-wrap hr { |
|
40 |
border: 0; |
|
41 |
height: 0; |
|
9 | 42 |
margin: 3em 0 0; |
5 | 43 |
border-top: 1px solid rgba(0, 0, 0, 0.1); |
44 |
} |
|
45 |
||
46 |
.about-wrap img { |
|
47 |
margin: 0; |
|
9 | 48 |
width: 100%; |
5 | 49 |
height: auto; |
50 |
vertical-align: middle; |
|
51 |
} |
|
52 |
||
9 | 53 |
.about-wrap .inline-svg img { |
54 |
max-width: 100%; |
|
55 |
width: auto; |
|
56 |
height: auto; |
|
57 |
} |
|
58 |
||
59 |
.about-wrap video { |
|
60 |
margin: 1.5em auto; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
61 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
62 |
|
5 | 63 |
/* WordPress Version Badge */ |
64 |
||
65 |
.wp-badge { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
66 |
background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
67 |
background-position: center 25px; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
68 |
background-size: 80px 80px; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
69 |
color: #fff; |
5 | 70 |
font-size: 14px; |
71 |
text-align: center; |
|
72 |
font-weight: 600; |
|
73 |
margin: 5px 0 0; |
|
74 |
padding-top: 120px; |
|
75 |
height: 40px; |
|
76 |
display: inline-block; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
77 |
width: 140px; |
5 | 78 |
text-rendering: optimizeLegibility; |
9 | 79 |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
5 | 80 |
} |
81 |
||
82 |
.svg .wp-badge { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
83 |
background-image: url(../images/wordpress-logo-white.svg?ver=20160308); |
5 | 84 |
} |
85 |
||
86 |
.about-wrap .wp-badge { |
|
87 |
position: absolute; |
|
88 |
top: 0; |
|
89 |
right: 0; |
|
90 |
} |
|
91 |
||
92 |
/* Tabs */ |
|
93 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
94 |
.about-wrap .nav-tab { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
95 |
padding-right: 15px; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
96 |
padding-left: 15px; |
5 | 97 |
font-size: 18px; |
9 | 98 |
line-height: 1.33333333; |
5 | 99 |
} |
100 |
||
101 |
/* 1.1 - Typography */ |
|
102 |
||
103 |
.about-wrap h1 { |
|
104 |
margin: 0.2em 200px 0 0; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
105 |
padding: 0; |
5 | 106 |
color: #32373c; |
9 | 107 |
line-height: 1.2; |
5 | 108 |
font-size: 2.8em; |
109 |
font-weight: 400; |
|
110 |
} |
|
111 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
112 |
.about-wrap h2 { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
113 |
margin: 40px 0 .6em; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
114 |
font-size: 2.7em; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
115 |
line-height: 1.3; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
116 |
font-weight: 300; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
117 |
text-align: center; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
118 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
119 |
|
5 | 120 |
.about-wrap h3 { |
121 |
margin: 1.25em 0 .6em; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
122 |
font-size: 1.4em; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
123 |
line-height: 1.5; |
5 | 124 |
} |
125 |
||
126 |
.about-wrap h4 { |
|
9 | 127 |
font-size: 16px; |
5 | 128 |
color: #23282d; |
129 |
} |
|
130 |
||
9 | 131 |
.about-wrap p { |
132 |
line-height: 1.5; |
|
133 |
font-size: 16px; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
134 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
135 |
|
5 | 136 |
.about-wrap code, |
137 |
.about-wrap ol li p { |
|
138 |
font-size: 14px; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
139 |
font-weight: 400; |
5 | 140 |
} |
141 |
||
9 | 142 |
.about-wrap figcaption { |
143 |
font-size: 13px; |
|
144 |
text-align: center; |
|
145 |
color: white; |
|
146 |
text-overflow: ellipsis; |
|
147 |
} |
|
148 |
||
5 | 149 |
.about-wrap .about-description, |
150 |
.about-wrap .about-text { |
|
151 |
margin-top: 1.4em; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
152 |
font-weight: 400; |
9 | 153 |
line-height: 1.6; |
5 | 154 |
font-size: 19px; |
155 |
} |
|
156 |
||
157 |
.about-wrap .about-text { |
|
158 |
margin: 1em 200px 1em 0; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
159 |
color: #555d66; |
5 | 160 |
} |
161 |
||
162 |
/* 1.2 - Structure */ |
|
163 |
||
9 | 164 |
.about-wrap .has-1-columns, |
165 |
.about-wrap .has-2-columns, |
|
166 |
.about-wrap .has-3-columns, |
|
167 |
.about-wrap .has-4-columns { |
|
168 |
display: -ms-grid; |
|
169 |
display: grid; |
|
170 |
max-width: 800px; |
|
171 |
margin-top: 40px; |
|
172 |
margin-left: auto; |
|
173 |
margin-right: auto; |
|
174 |
} |
|
175 |
||
176 |
.about-wrap .column { |
|
177 |
margin-right: 20px; |
|
178 |
margin-left: 20px; |
|
179 |
} |
|
180 |
||
181 |
.about-wrap .is-wide { |
|
182 |
max-width: 760px; |
|
183 |
} |
|
184 |
||
185 |
.about-wrap .is-fullwidth { |
|
186 |
max-width: 100%; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
187 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
188 |
|
9 | 189 |
.about-wrap .has-1-columns { |
190 |
display: block; |
|
191 |
max-width: 680px; |
|
192 |
margin: 0 auto 40px; |
|
193 |
} |
|
194 |
||
195 |
.about-wrap .has-2-columns { |
|
196 |
-ms-grid-columns: 1fr 1fr; |
|
197 |
grid-template-columns: 1fr 1fr; |
|
198 |
} |
|
199 |
||
200 |
.about-wrap .has-2-columns .column:nth-of-type(2n+1) { |
|
201 |
-ms-grid-column: 1; |
|
202 |
grid-column-start: 1; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
203 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
204 |
|
9 | 205 |
.about-wrap .has-2-columns .column:nth-of-type(2n) { |
206 |
-ms-grid-column: 2; |
|
207 |
grid-column-start: 2; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
208 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
209 |
|
9 | 210 |
.about-wrap .has-2-columns.is-wider-right { |
211 |
-ms-grid-columns: 1fr 2fr; |
|
212 |
grid-template-columns: 1fr 2fr; |
|
213 |
} |
|
214 |
||
215 |
.about-wrap .has-2-columns.is-wider-left { |
|
216 |
-ms-grid-columns: 2fr 1fr; |
|
217 |
grid-template-columns: 2fr 1fr; |
|
218 |
} |
|
219 |
||
220 |
.about-wrap .has-3-columns { |
|
221 |
-ms-grid-columns: (1fr)[3]; |
|
222 |
grid-template-columns: repeat(3, 1fr); |
|
5 | 223 |
} |
224 |
||
9 | 225 |
.about-wrap .has-3-columns .column:nth-of-type(3n+1) { |
226 |
-ms-grid-column: 1; |
|
227 |
grid-column-start: 1; |
|
228 |
} |
|
229 |
||
230 |
.about-wrap .has-3-columns .column:nth-of-type(3n+2) { |
|
231 |
-ms-grid-column: 2; |
|
232 |
grid-column-start: 2; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
233 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
234 |
|
9 | 235 |
.about-wrap .has-3-columns .column:nth-of-type(3n) { |
236 |
-ms-grid-column: 3; |
|
237 |
grid-column-start: 3; |
|
238 |
} |
|
239 |
||
240 |
.about-wrap .has-4-columns { |
|
241 |
-ms-grid-columns: (1fr)[4]; |
|
242 |
grid-template-columns: repeat(4, 1fr); |
|
243 |
} |
|
244 |
||
245 |
.about-wrap .has-4-columns .column:nth-of-type(4n+1) { |
|
246 |
-ms-grid-column: 1; |
|
247 |
grid-column-start: 1; |
|
248 |
} |
|
249 |
||
250 |
.about-wrap .has-4-columns .column:nth-of-type(4n+2) { |
|
251 |
-ms-grid-column: 2; |
|
252 |
grid-column-start: 2; |
|
5 | 253 |
} |
254 |
||
9 | 255 |
.about-wrap .has-4-columns .column:nth-of-type(4n+3) { |
256 |
-ms-grid-column: 3; |
|
257 |
grid-column-start: 3; |
|
258 |
} |
|
259 |
||
260 |
.about-wrap .has-4-columns .column:nth-of-type(4n) { |
|
261 |
-ms-grid-column: 4; |
|
262 |
grid-column-start: 4; |
|
263 |
} |
|
264 |
||
265 |
.about-wrap .column :first-child { |
|
266 |
margin-top: 0; |
|
267 |
} |
|
268 |
||
269 |
.about-wrap .aligncenter { |
|
270 |
text-align: center; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
271 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
272 |
|
9 | 273 |
.about-wrap .alignleft { |
274 |
float: left; |
|
275 |
margin-right: 40px; |
|
276 |
} |
|
277 |
||
278 |
.about-wrap .alignright { |
|
279 |
float: right; |
|
280 |
margin-left: 40px; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
281 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
282 |
|
9 | 283 |
.about-wrap .is-vertically-aligned-top { |
284 |
align-self: start; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
285 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
286 |
|
9 | 287 |
.about-wrap .is-vertically-aligned-center { |
288 |
align-self: center; |
|
289 |
} |
|
290 |
||
291 |
.about-wrap .is-vertically-aligned-bottom { |
|
292 |
align-self: end; |
|
5 | 293 |
} |
294 |
||
295 |
/* 1.3 - Point Releases */ |
|
296 |
||
297 |
.about-wrap .point-releases { |
|
298 |
margin-top: 5px; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
299 |
border-bottom: 1px solid #ddd; |
5 | 300 |
} |
301 |
||
9 | 302 |
.about-wrap .changelog { |
303 |
margin-bottom: 40px; |
|
304 |
} |
|
305 |
||
5 | 306 |
.about-wrap .changelog.point-releases h3 { |
307 |
padding-top: 35px; |
|
308 |
} |
|
309 |
||
310 |
.about-wrap .changelog.point-releases h3:first-child { |
|
311 |
padding-top: 7px; |
|
312 |
} |
|
313 |
||
9 | 314 |
.about-wrap .changelog.feature-section .col { |
315 |
margin-top: 40px; |
|
316 |
} |
|
317 |
||
5 | 318 |
/*------------------------------------------------------------------------------ |
319 |
2.0 - About Page |
|
320 |
------------------------------------------------------------------------------*/ |
|
321 |
||
322 |
/* 2.1 - Typography */ |
|
323 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
324 |
.about-wrap .lead-description { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
325 |
font-size: 1.5em; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
326 |
text-align: center; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
327 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
328 |
|
9 | 329 |
.about-wrap .feature-section p { |
330 |
margin-top: 0.6em; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
331 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
332 |
|
5 | 333 |
/* 2.2 - Structure */ |
334 |
||
9 | 335 |
.about-wrap .headline-feature { |
336 |
margin: 0 auto 40px; |
|
337 |
max-width: 680px; |
|
5 | 338 |
} |
339 |
||
9 | 340 |
.about-wrap .headline-feature h2 { |
341 |
margin: 50px 0 0; |
|
5 | 342 |
} |
343 |
||
9 | 344 |
.about-wrap .headline-feature img { |
345 |
max-width: 600px; |
|
346 |
width: 100%; |
|
5 | 347 |
} |
348 |
||
349 |
/* Return to Dashboard Home link */ |
|
350 |
||
351 |
.about-wrap .return-to-dashboard { |
|
352 |
margin: 30px 0 0 -5px; |
|
353 |
font-size: 14px; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
354 |
font-weight: 600; |
5 | 355 |
} |
356 |
||
357 |
.about-wrap .return-to-dashboard a { |
|
358 |
text-decoration: none; |
|
359 |
padding: 0 5px; |
|
360 |
} |
|
361 |
||
362 |
/*------------------------------------------------------------------------------ |
|
363 |
3.0 - Credits & Freedoms Pages |
|
364 |
------------------------------------------------------------------------------*/ |
|
365 |
||
366 |
/* Credits */ |
|
367 |
||
9 | 368 |
.about-wrap h2.wp-people-group { |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
369 |
margin: 2.6em 0 1.33em; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
370 |
padding: 0; |
5 | 371 |
font-size: 16px; |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
372 |
line-height: inherit; |
9 | 373 |
font-weight: 600; |
374 |
text-align: left; |
|
5 | 375 |
} |
376 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
377 |
.about-wrap .wp-people-group { |
5 | 378 |
padding: 0 5px; |
379 |
margin: 0 -15px 0 -5px; |
|
380 |
} |
|
381 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
382 |
.about-wrap .compact { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
383 |
margin-bottom: 0; |
5 | 384 |
} |
385 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
386 |
.about-wrap .wp-person { |
5 | 387 |
display: inline-block; |
388 |
vertical-align: top; |
|
389 |
margin-right: 10px; |
|
390 |
padding-bottom: 15px; |
|
391 |
height: 70px; |
|
392 |
width: 280px; |
|
393 |
} |
|
394 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
395 |
.about-wrap .compact .wp-person { |
5 | 396 |
height: auto; |
397 |
width: 180px; |
|
398 |
padding-bottom: 0; |
|
399 |
margin-bottom: 0; |
|
400 |
} |
|
401 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
402 |
.about-wrap .wp-person .gravatar { |
5 | 403 |
float: left; |
404 |
margin: 0 10px 10px 0; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
405 |
padding: 1px; |
5 | 406 |
width: 60px; |
407 |
height: 60px; |
|
408 |
} |
|
409 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
410 |
.about-wrap .compact .wp-person .gravatar { |
5 | 411 |
width: 30px; |
412 |
height: 30px; |
|
413 |
} |
|
414 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
415 |
.about-wrap .wp-person .web { |
5 | 416 |
margin: 6px 0 2px; |
417 |
font-size: 16px; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
418 |
font-weight: 400; |
9 | 419 |
line-height: 2; |
5 | 420 |
text-decoration: none; |
421 |
} |
|
422 |
||
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
423 |
.about-wrap .wp-person .title { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
424 |
display: block; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
425 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
426 |
|
5 | 427 |
.about-wrap #wp-people-group-validators + p.wp-credits-list { |
428 |
margin-top: 0; |
|
429 |
} |
|
430 |
||
431 |
.about-wrap p.wp-credits-list a { |
|
432 |
white-space: nowrap; |
|
433 |
} |
|
434 |
||
435 |
/* Freedoms */ |
|
436 |
||
437 |
.freedoms-php .about-wrap ol { |
|
438 |
margin: 40px 60px; |
|
439 |
} |
|
440 |
||
441 |
.freedoms-php .about-wrap ol li { |
|
442 |
list-style-type: decimal; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
443 |
font-weight: 600; |
5 | 444 |
} |
445 |
||
446 |
.freedoms-php .about-wrap ol p { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
447 |
font-weight: 400; |
5 | 448 |
margin: 0.6em 0; |
449 |
} |
|
450 |
||
9 | 451 |
.freedoms-php .has-4-columns { |
452 |
margin-bottom: 40px; |
|
453 |
} |
|
454 |
||
455 |
.freedoms-php .column .freedoms-image { |
|
456 |
background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png'); |
|
457 |
background-size: 100%; |
|
458 |
padding-top: 100%; |
|
459 |
} |
|
460 |
||
461 |
.freedoms-php .column:nth-of-type(2) .freedoms-image { |
|
462 |
background-position: 0 34%; |
|
463 |
} |
|
464 |
||
465 |
.freedoms-php .column:nth-of-type(3) .freedoms-image { |
|
466 |
background-position: 0 66%; |
|
467 |
} |
|
468 |
||
469 |
.freedoms-php .column:nth-of-type(4) .freedoms-image { |
|
470 |
background-position: 0 100%; |
|
471 |
} |
|
472 |
||
5 | 473 |
/*------------------------------------------------------------------------------ |
474 |
4.0 - Media Queries |
|
475 |
------------------------------------------------------------------------------*/ |
|
476 |
||
9 | 477 |
@media screen and (max-width: 782px) { |
478 |
.about-wrap .has-3-columns, |
|
479 |
.about-wrap .has-4-columns { |
|
480 |
-ms-grid-columns: 1fr 1fr; |
|
481 |
grid-template-columns: 1fr 1fr; |
|
482 |
} |
|
483 |
||
484 |
.about-wrap .has-3-columns .column:nth-of-type(3n+1), |
|
485 |
.about-wrap .has-4-columns .column:nth-of-type(4n+1) { |
|
486 |
-ms-grid-column: 1; |
|
487 |
grid-column-start: 1; |
|
488 |
-ms-grid-row: 1; |
|
489 |
grid-row-start: 1; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
490 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
491 |
|
9 | 492 |
.about-wrap .has-3-columns .column:nth-of-type(3n+2), |
493 |
.about-wrap .has-4-columns .column:nth-of-type(4n+2) { |
|
494 |
-ms-grid-column: 2; |
|
495 |
grid-column-start: 2; |
|
496 |
-ms-grid-row: 1; |
|
497 |
grid-row-start: 1; |
|
5 | 498 |
} |
499 |
||
9 | 500 |
.about-wrap .has-3-columns .column:nth-of-type(3n), |
501 |
.about-wrap .has-4-columns .column:nth-of-type(4n+3) { |
|
502 |
-ms-grid-column: 1; |
|
503 |
grid-column-start: 1; |
|
504 |
-ms-grid-row: 2; |
|
505 |
grid-row-start: 2; |
|
506 |
} |
|
507 |
||
508 |
.about-wrap .has-4-columns .column:nth-of-type(4n) { |
|
509 |
-ms-grid-column: 2; |
|
510 |
grid-column-start: 2; |
|
511 |
-ms-grid-row: 2; |
|
512 |
grid-row-start: 2; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
513 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
514 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
515 |
|
9 | 516 |
@media screen and (max-width: 600px) { |
517 |
.about-wrap .has-2-columns, |
|
518 |
.about-wrap .has-3-columns, |
|
519 |
.about-wrap .has-4-columns { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
520 |
display: block; |
5 | 521 |
} |
522 |
||
9 | 523 |
.about-wrap :not(.is-wider-right):not(.is-wider-left) .column { |
524 |
margin-right: 0; |
|
525 |
margin-left: 0; |
|
5 | 526 |
} |
527 |
||
9 | 528 |
.about-wrap .has-2-columns.is-wider-right, |
529 |
.about-wrap .has-2-columns.is-wider-left { |
|
530 |
display: -ms-grid; |
|
531 |
display: grid; |
|
5 | 532 |
} |
533 |
} |
|
534 |
||
535 |
@media only screen and (max-width: 500px) { |
|
536 |
.about-wrap { |
|
537 |
margin-right: 20px; |
|
538 |
margin-left: 10px; |
|
539 |
} |
|
540 |
||
541 |
.about-wrap h1, |
|
542 |
.about-wrap .about-text { |
|
543 |
margin-right: 0; |
|
544 |
} |
|
545 |
||
546 |
.about-wrap .about-text { |
|
547 |
margin-bottom: 0.25em; |
|
548 |
} |
|
549 |
||
550 |
.about-wrap .wp-badge { |
|
551 |
position: relative; |
|
552 |
margin-bottom: 1.5em; |
|
553 |
width: 100%; |
|
554 |
} |
|
9 | 555 |
} |
5 | 556 |
|
9 | 557 |
@media only screen and (max-width: 480px) { |
558 |
.about-wrap .has-2-columns.is-wider-right, |
|
559 |
.about-wrap .has-2-columns.is-wider-left { |
|
560 |
display: block; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
561 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
562 |
|
9 | 563 |
.about-wrap .column { |
564 |
margin-right: 0; |
|
565 |
margin-left: 0; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
566 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
567 |
|
9 | 568 |
.about-wrap .has-2-columns.is-wider-right img, |
569 |
.about-wrap .has-2-columns.is-wider-left img { |
|
570 |
max-width: 160px; |
|
5 | 571 |
} |
572 |
} |