diff -r c7c34916027a -r 177826044cd9 wp/wp-admin/css/about-rtl.css --- a/wp/wp-admin/css/about-rtl.css Mon Oct 14 18:06:33 2019 +0200 +++ b/wp/wp-admin/css/about-rtl.css Mon Oct 14 18:28:13 2019 +0200 @@ -8,7 +8,6 @@ 2.0 About Page 2.1 Typography 2.2 Structure - 2.3 Floating Header Layout 3.0 Credits & Freedoms Pages ------------------------------------------------------------------------------*/ @@ -40,19 +39,25 @@ .about-wrap hr { border: 0; height: 0; - margin: 0; + margin: 3em 0 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .about-wrap img { margin: 0; - max-width: 100%; + width: 100%; height: auto; vertical-align: middle; } -.about-wrap .jetpack-video-wrapper { - margin-bottom: 0; +.about-wrap .inline-svg img { + max-width: 100%; + width: auto; + height: auto; +} + +.about-wrap video { + margin: 1.5em auto; } /* WordPress Version Badge */ @@ -71,7 +76,7 @@ display: inline-block; width: 140px; text-rendering: optimizeLegibility; - box-shadow: 0 1px 3px rgba(0,0,0,0.2); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .svg .wp-badge { @@ -90,26 +95,16 @@ padding-left: 15px; padding-right: 15px; font-size: 18px; + line-height: 1.33333333; } /* 1.1 - Typography */ -.about-wrap p { - line-height: 1.5; - font-size: 14px; -} - -.about-wrap .feature-section p { - max-width: 55em; - margin-right: auto; - margin-left: auto; -} - .about-wrap h1 { margin: 0.2em 0 0 200px; padding: 0; color: #32373c; - line-height: 1.2em; + line-height: 1.2; font-size: 2.8em; font-weight: 400; } @@ -129,20 +124,13 @@ } .about-wrap h4 { + font-size: 16px; color: #23282d; } -.about-wrap .changelog h2 { - font-size: 1.4em; - font-weight: 600; - text-align: right; -} - -.about-wrap .changelog h3 { - margin: 1.33em 0; - font-size: 1em; - line-height: inherit; - color: #23282d; +.about-wrap p { + line-height: 1.5; + font-size: 16px; } .about-wrap code, @@ -151,72 +139,157 @@ font-weight: 400; } +.about-wrap figcaption { + font-size: 13px; + text-align: center; + color: white; + text-overflow: ellipsis; +} + .about-wrap .about-description, .about-wrap .about-text { margin-top: 1.4em; font-weight: 400; - line-height: 1.6em; + line-height: 1.6; font-size: 19px; } .about-wrap .about-text { margin: 1em 0 1em 200px; - min-height: 60px; color: #555d66; } /* 1.2 - Structure */ -.about-wrap [class$="-col"] { - display: -webkit-box; - display: flex; - -webkit-box-pack: justify; - justify-content: space-between; - flex-wrap: wrap; +.about-wrap .has-1-columns, +.about-wrap .has-2-columns, +.about-wrap .has-3-columns, +.about-wrap .has-4-columns { + display: -ms-grid; + display: grid; + max-width: 800px; + margin-top: 40px; + margin-right: auto; + margin-left: auto; +} + +.about-wrap .column { + margin-left: 20px; + margin-right: 20px; +} + +.about-wrap .is-wide { + max-width: 760px; +} + +.about-wrap .is-fullwidth { + max-width: 100%; } -.about-wrap .feature-section.one-col { - margin: 0 auto; - max-width: 700px; +.about-wrap .has-1-columns { + display: block; + max-width: 680px; + margin: 0 auto 40px; +} + +.about-wrap .has-2-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n+1) { + -ms-grid-column: 1; + grid-column-start: 1; } -.about-wrap .inline-svg img { - max-width: 100%; - width: 100%; - height: auto; +.about-wrap .has-2-columns .column:nth-of-type(2n) { + -ms-grid-column: 2; + grid-column-start: 2; } -.about-wrap .inline-svg.full-width { - margin-bottom: 120px; +.about-wrap .has-2-columns.is-wider-right { + -ms-grid-columns: 1fr 2fr; + grid-template-columns: 1fr 2fr; +} + +.about-wrap .has-2-columns.is-wider-left { + -ms-grid-columns: 2fr 1fr; + grid-template-columns: 2fr 1fr; +} + +.about-wrap .has-3-columns { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); } -.about-wrap [class$="-col"] .col { - -webkit-box-flex: 1; - flex: 1; +.about-wrap .has-3-columns .column:nth-of-type(3n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+2) { + -ms-grid-column: 2; + grid-column-start: 2; } -.about-wrap .two-col .col { - min-width: 47%; - max-width: 47%; +.about-wrap .has-3-columns .column:nth-of-type(3n) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about-wrap .has-4-columns { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; } -.about-wrap .three-col .col { - -webkit-align-self: flex-start; - align-self: flex-start; - min-width: 31%; - max-width: 31%; +.about-wrap .has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 4; + grid-column-start: 4; +} + +.about-wrap .column :first-child { + margin-top: 0; +} + +.about-wrap .aligncenter { + text-align: center; } -.about-wrap .two-col img { - margin-bottom: 1.5em; +.about-wrap .alignleft { + float: right; + margin-left: 40px; +} + +.about-wrap .alignright { + float: left; + margin-right: 40px; } -.about-wrap .feature-video .mejs-controls { - display: none !important; +.about-wrap .is-vertically-aligned-top { + align-self: start; } -.about-wrap .feature-video .mejs-overlay-loading span { - background: transparent; /* Hide loading.gif */ +.about-wrap .is-vertically-aligned-center { + align-self: center; +} + +.about-wrap .is-vertically-aligned-bottom { + align-self: end; } /* 1.3 - Point Releases */ @@ -226,6 +299,10 @@ border-bottom: 1px solid #ddd; } +.about-wrap .changelog { + margin-bottom: 40px; +} + .about-wrap .changelog.point-releases h3 { padding-top: 35px; } @@ -234,109 +311,39 @@ padding-top: 7px; } +.about-wrap .changelog.feature-section .col { + margin-top: 40px; +} + /*------------------------------------------------------------------------------ 2.0 - About Page ------------------------------------------------------------------------------*/ /* 2.1 - Typography */ -.about-wrap .feature-section.two-col h3 { - margin-top: 0; -} - -.about-wrap .feature-section h4 { - margin: 1.4em 0 0.6em 0; - font-size: 1em; -} - -.about-wrap .feature-section p { - margin-top: 0.6em; -} - .about-wrap .lead-description { font-size: 1.5em; text-align: center; } -.about-wrap .two-col-text { - -webkit-column-count: 2; - column-count: 2; - -webkit-column-gap: 40px; - column-gap: 40px; -} - -.about-wrap .two-col-text p:first-of-type { - margin-top: 0; -} - -.about-wrap .streamlined-updates p, -.about-wrap .native-fonts p { - margin-bottom: 3em; +.about-wrap .feature-section p { + margin-top: 0.6em; } /* 2.2 - Structure */ -.about-wrap .headline-feature.feature-video { - position: relative; - margin: 40px 0; - padding-bottom: 56.25%; - width: 100%; - max-width: 100%; - height: 0; - text-align: center; -} - -.about-wrap .feature-video embed { - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; -} - -.about-wrap .featured-image { - text-align: center; -} - -.about-wrap .feature-section { - overflow: hidden; - padding: 0 0 40px; -} - -.about-wrap .feature-section.no-heading { - padding-top: 35px; +.about-wrap .headline-feature { + margin: 0 auto 40px; + max-width: 680px; } -.about-wrap .feature-section .media-container { - overflow: hidden; -} - -.about-wrap .feature-section img { - margin-bottom: 1em; -} - -.about-wrap .embed-container { - text-align: center; +.about-wrap .headline-feature h2 { + margin: 50px 0 0; } -.about-wrap .embed-container iframe { - max-width: 100%; -} - -.about-wrap .wp-embedded-content { - max-width: 100%; -} - -.about-wrap .feature-section .col { - margin-top: 40px; -} - -.about-wrap .changelog { - margin-bottom: 40px; -} - -.about-wrap .changelog.feature-section .col { - margin-top: 40px; +.about-wrap .headline-feature img { + max-width: 600px; + width: 100%; } /* Return to Dashboard Home link */ @@ -352,103 +359,19 @@ padding: 0 5px; } -/* 2.3 Floating Header Layout */ - -.about-wrap .floating-header-section { - display: -ms-grid; - display: grid; - grid-gap: 0 60px; - -ms-grid-columns: 5fr 11fr; - grid-template-columns: 5fr 11fr; - max-width: 1020px; - margin: 0 auto 120px; -} - -.about-wrap .floating-header-section .section-header { - -ms-grid-column: 1; - grid-column: 1; - position: relative; - min-width: 230px; - max-width: 300px; -} - -.about-wrap .floating-header-section h2 { - margin: 0; - text-align: right; - position: absolute; -} - -.about-wrap .floating-header-section .section-content { - -ms-grid-column: 2; - grid-column: 2; - display: -webkit-box; - display: flex; - -webkit-box-pack: justify; - justify-content: space-between; - -webkit-box-align: start; - align-items: flex-start; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-flow: row wrap; - -webkit-box-flex: 2; - flex-grow: 2; - flex-shrink: 0; -} - -.about-wrap .floating-header-section .section-item { - -webkit-box-flex: 1; - flex-grow: 1; - max-width: calc(50% - 30px); -} - -.about-wrap .floating-header-section .section-item:nth-child(1), -.about-wrap .floating-header-section .section-item:nth-child(2) { - margin-bottom: 60px; -} - -.about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2), -.about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) { - margin-bottom: 0; -} - -.about-wrap .floating-header-section.has-long-title { - display: block; -} - -.about-wrap .floating-header-section.has-long-title .section-header { - max-width: 100%; -} - -.about-wrap .floating-header-section.has-long-title h2 { - position: static; - margin-bottom: 60px; -} - -.about-wrap .floating-header-section.has-long-title .section-content { - -webkit-box-pack: start; - justify-content: flex-start; -} - -.about-wrap .floating-header-section.has-long-title .section-item { - max-width: 300px; - margin-bottom: 0; -} - -.about-wrap .floating-header-section.has-long-title .section-item + .section-item { - margin-right: 60px; -} - /*------------------------------------------------------------------------------ 3.0 - Credits & Freedoms Pages ------------------------------------------------------------------------------*/ /* Credits */ -.about-wrap h3.wp-people-group { +.about-wrap h2.wp-people-group { margin: 2.6em 0 1.33em; padding: 0; font-size: 16px; line-height: inherit; + font-weight: 600; + text-align: right; } .about-wrap .wp-people-group { @@ -493,7 +416,7 @@ margin: 6px 0 2px; font-size: 16px; font-weight: 400; - line-height: 2em; + line-height: 2; text-decoration: none; } @@ -525,55 +448,87 @@ margin: 0.6em 0; } +.freedoms-php .has-4-columns { + margin-bottom: 40px; +} + +.freedoms-php .column .freedoms-image { + background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png'); + background-size: 100%; + padding-top: 100%; +} + +.freedoms-php .column:nth-of-type(2) .freedoms-image { + background-position: 100% 34%; +} + +.freedoms-php .column:nth-of-type(3) .freedoms-image { + background-position: 100% 66%; +} + +.freedoms-php .column:nth-of-type(4) .freedoms-image { + background-position: 100% 100%; +} + /*------------------------------------------------------------------------------ 4.0 - Media Queries ------------------------------------------------------------------------------*/ -@media screen and (max-width: 1250px) { - .about-wrap .floating-header-section.has-long-title .section-item:nth-child(1), - .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) { - margin: 0 0 60px; +@media screen and (max-width: 782px) { + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+1), + .about-wrap .has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-row: 1; + grid-row-start: 1; } - .about-wrap .floating-header-section.has-long-title .section-item:nth-child(3), - .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) { - margin: 0; + .about-wrap .has-3-columns .column:nth-of-type(3n+2), + .about-wrap .has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-row: 1; + grid-row-start: 1; } - .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2), - .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) { - margin-right: 60px; + .about-wrap .has-3-columns .column:nth-of-type(3n), + .about-wrap .has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-row: 2; + grid-row-start: 2; + } + + .about-wrap .has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-row: 2; + grid-row-start: 2; } } -@media screen and (max-width: 782px) { - .about-wrap .two-col-text { - -webkit-column-count: 1; - column-count: 1; - } - - .about-wrap .two-col .col, - .about-wrap .three-col .col { - min-width: 48% !important; - } - - .about-wrap .three-col img { - display: block; - margin: 0 auto; - } - - .about-wrap .floating-header-section { +@media screen and (max-width: 600px) { + .about-wrap .has-2-columns, + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { display: block; } - .about-wrap .floating-header-section .section-header, - .about-wrap .floating-header-section .section-content { - max-width: 100%; + .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { + margin-left: 0; + margin-right: 0; } - .about-wrap .floating-header-section h2 { - position: static; - margin-bottom: 60px; + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: -ms-grid; + display: grid; } } @@ -597,47 +552,21 @@ margin-bottom: 1.5em; width: 100%; } - - .about-wrap .two-col .col, - .about-wrap .three-col .col { - min-width: 100% !important; - } +} - .about-wrap .under-the-hood.three-col .col, - .about-wrap .under-the-hood.two-col .col, - .about-wrap .under-the-hood.one-col .col { - margin-bottom: 2em; - padding-bottom: 0; - } - - .about-wrap .under-the-hood:nth-of-type(2n), - .about-wrap .under-the-hood:nth-of-type(3n) { - margin-top: 0; +@media only screen and (max-width: 480px) { + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: block; } - .about-wrap .under-the-hood:nth-of-type(2n) h3, - .about-wrap .under-the-hood:nth-of-type(3n) h3 { - margin-top: 0; - } - - .about-wrap .floating-header-section { - margin-bottom: 60px; - grid-gap: 30px 0; + .about-wrap .column { + margin-left: 0; + margin-right: 0; } - .about-wrap .inline-svg.full-width { - margin-bottom: 60px; - } - - .about-wrap .floating-header-section h2 { - word-break: break-all; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - } - - .about-wrap .floating-header-section .section-content .section-item { - max-width: 100%; - margin: 0 0 60px; + .about-wrap .has-2-columns.is-wider-right img, + .about-wrap .has-2-columns.is-wider-left img { + max-width: 160px; } }