diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/css/about-rtl.css --- a/wp/wp-admin/css/about-rtl.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/css/about-rtl.css Mon Oct 14 17:39:30 2019 +0200 @@ -8,6 +8,7 @@ 2.0 About Page 2.1 Typography 2.2 Structure + 2.3 Floating Header Layout 3.0 Credits & Freedoms Pages ------------------------------------------------------------------------------*/ @@ -22,8 +23,17 @@ font-size: 15px; } +.about-wrap.full-width-layout { + max-width: 1200px; +} + +.about-wrap-content { + max-width: 1050px; +} + .about-wrap div.updated, -.about-wrap div.error { +.about-wrap div.error, +.about-wrap .notice { display: none !important; } @@ -41,14 +51,17 @@ vertical-align: middle; } +.about-wrap .jetpack-video-wrapper { + margin-bottom: 0; +} + /* WordPress Version Badge */ .wp-badge { - background: #0073aa url(../images/w-logo-white.png?ver=20131202) no-repeat; - background-position: center 24px; - -webkit-background-size: 85px 85px; - background-size: 85px 85px; - color: #78c8e6; + background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; + background-position: center 25px; + background-size: 80px 80px; + color: #fff; font-size: 14px; text-align: center; font-weight: 600; @@ -56,14 +69,13 @@ padding-top: 120px; height: 40px; display: inline-block; - width: 150px; + width: 140px; text-rendering: optimizeLegibility; - -webkit-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 { - background-image: url(../images/wordpress-logo-white.svg?ver=20131110); + background-image: url(../images/wordpress-logo-white.svg?ver=20160308); } .about-wrap .wp-badge { @@ -74,53 +86,75 @@ /* Tabs */ -.about-wrap h2.nav-tab-wrapper { - padding-right: 6px; -} - -.about-wrap h2 .nav-tab { - padding: 4px 15px 6px; - margin: 0 0 -1px 3px; +.about-wrap .nav-tab { + padding-left: 15px; + padding-right: 15px; font-size: 18px; - vertical-align: top; - border-width: 1px; - white-space: nowrap; } /* 1.1 - Typography */ .about-wrap p { - line-height: 1.6em; + 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; font-size: 2.8em; font-weight: 400; } +.about-wrap h2 { + margin: 40px 0 .6em; + font-size: 2.7em; + line-height: 1.3; + font-weight: 300; + text-align: center; +} + .about-wrap h3 { margin: 1.25em 0 .6em; - font-size: 1.25em; - line-height: 1.5em; + font-size: 1.4em; + line-height: 1.5; } .about-wrap h4 { 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 code, .about-wrap ol li p { font-size: 14px; + font-weight: 400; } .about-wrap .about-description, .about-wrap .about-text { margin-top: 1.4em; - font-weight: normal; + font-weight: 400; line-height: 1.6em; font-size: 19px; } @@ -128,34 +162,68 @@ .about-wrap .about-text { margin: 1em 0 1em 200px; min-height: 60px; - color: #777; + color: #555d66; } /* 1.2 - Structure */ -.about-wrap .two-col > div { - position: relative; - width: 47.6%; - margin-left: 4.799999999%; - float: right; +.about-wrap [class$="-col"] { + display: -webkit-box; + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; + flex-wrap: wrap; +} + +.about-wrap .feature-section.one-col { + margin: 0 auto; + max-width: 700px; +} + +.about-wrap .inline-svg img { + max-width: 100%; + width: 100%; + height: auto; +} + +.about-wrap .inline-svg.full-width { + margin-bottom: 120px; } -.about-wrap .three-col > div { - position: relative; - width: 29.95%; - margin-left: 4.999999999%; - float: right; +.about-wrap [class$="-col"] .col { + -webkit-box-flex: 1; + flex: 1; +} + +.about-wrap .two-col .col { + min-width: 47%; + max-width: 47%; } -.about-wrap [class$=col] .last-feature { - margin-left: 0; +.about-wrap .three-col .col { + -webkit-align-self: flex-start; + align-self: flex-start; + min-width: 31%; + max-width: 31%; +} + +.about-wrap .two-col img { + margin-bottom: 1.5em; +} + +.about-wrap .feature-video .mejs-controls { + display: none !important; +} + +.about-wrap .feature-video .mejs-overlay-loading span { + background: transparent; /* Hide loading.gif */ } /* 1.3 - Point Releases */ .about-wrap .point-releases { margin-top: 5px; - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; } .about-wrap .changelog.point-releases h3 { @@ -172,22 +240,8 @@ /* 2.1 - Typography */ -.about-wrap .headline-feature h2 { - margin: 50px 0 30px; - font-size: 2.2em; - font-weight: 300; - line-height: 1.3; - text-align: right; -} - -.about-wrap .headline-feature h3 { - margin-top: 30px; - text-align: center; -} - -.about-wrap .feature-list h2 { - margin: 30px 0 15px; - text-align: center; +.about-wrap .feature-section.two-col h3 { + margin-top: 0; } .about-wrap .feature-section h4 { @@ -199,13 +253,35 @@ 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; +} + /* 2.2 - Structure */ -.about-wrap .feature-video { +.about-wrap .headline-feature.feature-video { position: relative; margin: 40px 0; - padding-bottom: 56.25%; /* video is 1280 x 720 */ + padding-bottom: 56.25%; width: 100%; + max-width: 100%; height: 0; text-align: center; } @@ -225,31 +301,41 @@ .about-wrap .feature-section { overflow: hidden; padding: 0 0 40px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.about-wrap .feature-section.no-heading { + padding-top: 35px; } -.about-wrap .headline-feature .feature-section { - margin: 0 auto; - max-width: 95%; +.about-wrap .feature-section .media-container { + overflow: hidden; +} + +.about-wrap .feature-section img { + margin-bottom: 1em; } -.about-wrap .feature-section .col:nth-of-type(odd) { - float: right; - margin: 40px 0 0 5%; - width: 48%; +.about-wrap .embed-container { + text-align: center; } -.about-wrap .feature-section .col:nth-of-type(even) { - float: left; - margin: 40px 0 0; - width: 46%; +.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 > div { +.about-wrap .changelog.feature-section .col { margin-top: 40px; } @@ -258,7 +344,7 @@ .about-wrap .return-to-dashboard { margin: 30px -5px 0 0; font-size: 14px; - font-weight: bold; + font-weight: 600; } .about-wrap .return-to-dashboard a { @@ -266,9 +352,90 @@ padding: 0 5px; } -.about-wrap .feature-list.finer-points h4, -.about-wrap .feature-list.finer-points p { - margin-right: 115px; +/* 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; } /*------------------------------------------------------------------------------ @@ -277,22 +444,23 @@ /* Credits */ -.about-wrap h4.wp-people-group { - margin-top: 2.6em; +.about-wrap h3.wp-people-group { + margin: 2.6em 0 1.33em; + padding: 0; font-size: 16px; + line-height: inherit; } -.about-wrap ul.wp-people-group { - overflow: hidden; +.about-wrap .wp-people-group { padding: 0 5px; margin: 0 -5px 0 -15px; } -.about-wrap ul.compact { - margin-bottom: 0 +.about-wrap .compact { + margin-bottom: 0; } -.about-wrap li.wp-person { +.about-wrap .wp-person { display: inline-block; vertical-align: top; margin-left: 10px; @@ -301,35 +469,38 @@ width: 280px; } -.about-wrap ul.compact li.wp-person { +.about-wrap .compact .wp-person { height: auto; width: 180px; padding-bottom: 0; margin-bottom: 0; } -.about-wrap li.wp-person img.gravatar { +.about-wrap .wp-person .gravatar { float: right; margin: 0 0 10px 10px; - padding: 2px; + padding: 1px; width: 60px; height: 60px; } -.about-wrap ul.compact li.wp-person img.gravatar { +.about-wrap .compact .wp-person .gravatar { width: 30px; height: 30px; } -.about-wrap li.wp-person a.web { - display: block; +.about-wrap .wp-person .web { margin: 6px 0 2px; font-size: 16px; - font-weight: normal; - line-height: 1.6em; + font-weight: 400; + line-height: 2em; text-decoration: none; } +.about-wrap .wp-person .title { + display: block; +} + .about-wrap #wp-people-group-validators + p.wp-credits-list { margin-top: 0; } @@ -346,11 +517,11 @@ .freedoms-php .about-wrap ol li { list-style-type: decimal; - font-weight: bold; + font-weight: 600; } .freedoms-php .about-wrap ol p { - font-weight: normal; + font-weight: 400; margin: 0.6em 0; } @@ -358,24 +529,32 @@ 4.0 - Media Queries ------------------------------------------------------------------------------*/ -@media screen and ( max-width: 782px ) { - .about-wrap .feature-section { - padding: 0; - border-bottom: none; +@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; + } + + .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 .one-col > div, - .about-wrap .two-col > div, - .about-wrap .three-col > div, - .about-wrap .two-col .col:nth-of-type(n) { - width: 100%; - margin: 40px 0 0; - padding: 0 0 40px; - border-bottom: 1px solid rgba(0, 0, 0, 0.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; + } +} + +@media screen and (max-width: 782px) { + .about-wrap .two-col-text { + -webkit-column-count: 1; + column-count: 1; } - .about-wrap .two-col .col h3 { - margin-top: 0; + .about-wrap .two-col .col, + .about-wrap .three-col .col { + min-width: 48% !important; } .about-wrap .three-col img { @@ -383,18 +562,18 @@ margin: 0 auto; } - .about-wrap .feature-list div { - margin: 0; - padding: 0; - border-bottom: none; + .about-wrap .floating-header-section { + display: block; } - .about-wrap .headline-feature .feature-section { + .about-wrap .floating-header-section .section-header, + .about-wrap .floating-header-section .section-content { max-width: 100%; } - .about-wrap .feature-list .feature-section { - padding: 0 0 40px; + .about-wrap .floating-header-section h2 { + position: static; + margin-bottom: 60px; } } @@ -419,36 +598,46 @@ width: 100%; } - .about-wrap h2.nav-tab-wrapper { - padding-right: 0; - border-bottom: 0; + .about-wrap .two-col .col, + .about-wrap .three-col .col { + min-width: 100% !important; } - .about-wrap h2 .nav-tab { - margin-top: 10px; - margin-left: 10px; - border-bottom: 1px solid #ccc; + .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 .three-col div, - .about-wrap .headline-feature .feature-section div { - width: 100% !important; - float: none !important; + .about-wrap .under-the-hood:nth-of-type(2n), + .about-wrap .under-the-hood:nth-of-type(3n) { + margin-top: 0; + } + + .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 .dfw p { - max-width: 90%; + .about-wrap .floating-header-section { + margin-bottom: 60px; + grid-gap: 30px 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; } } - -@media only screen and (max-width: 400px) { - .about-wrap .feature-list svg { - margin-top: 15px; - height: 65px; - width: 65px; - } - .about-wrap .feature-list.finer-points h4, - .about-wrap .feature-list.finer-points p { - margin-right: 80px; - } -}