1 /*------------------------------------------------------------------------------
4 1.0 Global: About, Credits, Freedoms
11 3.0 Credits & Freedoms Pages
12 ------------------------------------------------------------------------------*/
14 /*------------------------------------------------------------------------------
15 1.0 - Global: About, Credits, Freedoms
16 ------------------------------------------------------------------------------*/
20 margin: 25px 40px 0 20px;
21 max-width: 1050px; /* readability */
25 .about-wrap div.updated,
26 .about-wrap div.error,
28 display: none !important;
35 border-top: 1px solid rgba(0, 0, 0, 0.1);
42 vertical-align: middle;
45 .about-wrap .jetpack-video-wrapper {
49 /* WordPress Version Badge */
52 background: #0073aa url(../images/w-logo-white.png?ver=20131202) no-repeat;
53 background-position: center 24px;
54 -webkit-background-size: 85px 85px;
55 background-size: 85px 85px;
63 display: inline-block;
65 text-rendering: optimizeLegibility;
66 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
67 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
71 background-image: url(../images/wordpress-logo-white.svg?ver=20131110);
74 .about-wrap .wp-badge {
82 .about-wrap .nav-tab {
88 /* 1.1 - Typography */
96 margin: 0.2em 200px 0 0;
105 margin: 1.25em 0 .6em;
115 .about-wrap ol li p {
120 .about-wrap .about-description,
121 .about-wrap .about-text {
128 .about-wrap .about-text {
129 margin: 1em 200px 1em 0;
134 /* 1.2 - Structure */
136 .about-wrap [class$=col] .col {
140 .about-wrap .two-col .col {
141 margin-right: 4.799999999%;
144 .about-wrap .feature-section.two-col .col {
145 display: inline-block;
147 margin-right: 4.799999999%;
148 width: calc( 47.6% - 4px );
149 vertical-align: middle;
152 .about-wrap .three-col .col {
153 margin-right: 4.999999999%;
157 .about-wrap .two-col .col:nth-of-type(2n),
158 .about-wrap .three-col .col:nth-of-type(3n) {
162 /* 1.3 - Point Releases */
164 .about-wrap .point-releases {
166 border-bottom: 1px solid #dfdfdf;
169 .about-wrap .changelog.point-releases h3 {
173 .about-wrap .changelog.point-releases h3:first-child {
177 /*------------------------------------------------------------------------------
179 ------------------------------------------------------------------------------*/
181 /* 2.1 - Typography */
183 .about-wrap .headline-feature h2 {
191 .about-wrap .headline-feature h3 {
196 .about-wrap .feature-section.two-col h3 {
200 .about-wrap .feature-list h2 {
205 .about-wrap .feature-section h4 {
206 margin: 1.4em 0 0.6em 0;
210 .about-wrap .feature-section p {
214 .about-wrap .two-col-text {
215 -webkit-column-count: 2;
216 -moz-column-count: 2;
218 -webkit-column-gap: 40px;
219 -moz-column-gap: 40px;
223 .about-wrap .two-col-text p:first-of-type {
227 /* 2.2 - Structure */
229 .about-wrap .headline-feature.feature-video {
232 padding-bottom: 56.25%;
239 .about-wrap .feature-video embed {
247 .about-wrap .featured-image {
251 .about-wrap .feature-section {
256 .about-wrap .headline-feature {
261 .about-wrap .feature-section .media-container {
265 .about-wrap .headline-feature .col {
269 .about-wrap .headline-feature .col.feature-image {
273 .about-wrap .headline-feature .vertical-screen {
279 .about-wrap .headline-feature .horizontal-screen {
284 .about-wrap .embed-container {
288 .about-wrap .embed-container iframe {
292 .about-wrap .wp-embedded-content {
296 .about-wrap .feature-section:not(.under-the-hood) .col {
300 .about-wrap .changelog {
304 .about-wrap .changelog.feature-section .col {
308 /* Return to Dashboard Home link */
310 .about-wrap .return-to-dashboard {
311 margin: 30px 0 0 -5px;
316 .about-wrap .return-to-dashboard a {
317 text-decoration: none;
321 .about-wrap .feature-list.finer-points h4,
322 .about-wrap .feature-list.finer-points p {
326 /*------------------------------------------------------------------------------
327 3.0 - Credits & Freedoms Pages
328 ------------------------------------------------------------------------------*/
332 .about-wrap h3.wp-people-group {
333 margin: 2.6em 0 1.33em;
335 line-height: inherit;
338 .about-wrap ul.wp-people-group {
341 margin: 0 -15px 0 -5px;
344 .about-wrap ul.compact {
348 .about-wrap li.wp-person {
349 display: inline-block;
352 padding-bottom: 15px;
357 .about-wrap ul.compact li.wp-person {
364 .about-wrap li.wp-person img.gravatar {
366 margin: 0 10px 10px 0;
372 .about-wrap ul.compact li.wp-person img.gravatar {
377 .about-wrap li.wp-person a.web {
383 text-decoration: none;
386 .about-wrap #wp-people-group-validators + p.wp-credits-list {
390 .about-wrap p.wp-credits-list a {
396 .freedoms-php .about-wrap ol {
400 .freedoms-php .about-wrap ol li {
401 list-style-type: decimal;
405 .freedoms-php .about-wrap ol p {
410 /*------------------------------------------------------------------------------
412 ------------------------------------------------------------------------------*/
414 @media screen and ( max-width: 782px ) {
415 .about-wrap .feature-section {
420 .about-wrap [class$=col] .col {
427 .about-wrap .headline-feature {
431 .about-wrap .headline-feature .col.feature-image {
438 .about-wrap .headline-feature .horizontal-image {
442 .about-wrap .headline-feature .horizontal-image:before {
449 .about-wrap .headline-feature .horizontal-image > .content {
457 .about-wrap .headline-feature .horizontal-image img {
462 .about-wrap .two-col-text {
463 -webkit-column-count: 1;
464 -moz-column-count: 1;
468 .about-wrap .three-col img {
473 .about-wrap .feature-list .col {
479 .about-wrap .headline-feature .feature-section {
483 .about-wrap .feature-list .feature-section {
488 @media only screen and (max-width: 500px) {
495 .about-wrap .about-text {
499 .about-wrap .about-text {
500 margin-bottom: 0.25em;
503 .about-wrap .wp-badge {
505 margin-bottom: 1.5em;
509 .about-wrap .feature-section.two-col .col,
510 .about-wrap .three-col .col,
511 .about-wrap .headline-feature .feature-section .col {
512 width: 100% !important;
513 float: none !important;
516 .about-wrap .feature-section.two-col .col:last-of-type {
520 .feature-section.under-the-hood.three-col .col,
521 .feature-section.under-the-hood.one-col .col {
526 @media only screen and (max-width: 400px) {
527 .about-wrap .feature-list svg {
532 .about-wrap .feature-list.finer-points h4,
533 .about-wrap .feature-list.finer-points p {