From 4e067b0354bbc9ebd563f12fa3064e0e0273afc9 Mon Sep 17 00:00:00 2001 From: Sergey Biryukov Date: Wed, 22 Apr 2015 06:03:03 +0000 Subject: [PATCH] About page design for 4.2. props melchoyce, ryelle. see #31929. git-svn-id: https://develop.svn.wordpress.org/trunk@32260 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 129 +++++++++++++++-------------------- src/wp-admin/css/about.css | 134 ++++++++++++++----------------------- 2 files changed, 104 insertions(+), 159 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index bbace3163a..298c145409 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -41,90 +41,69 @@ include( ABSPATH . 'wp-admin/admin-header.php' ); -
-

[video]

+
+ '//s.w.org/images/core/3.9/widgets.mp4', + // 'ogv' => '//videos.files.wordpress.com/bUdzKMro/wordpress-4-0_fmt1.ogv', + // // 'webm' => '//s.w.org/images/core/3.9/widgets.webm', + // 'loop' => false, + // ) ); + ?> + +
-
-
- -
+
+ +
+

Tools menu, add Press This to your browser bookmark bar or your mobile device home screen. Once installed you can share your content with lightning speed. Sharing your favorite videos, images, and content has never been this fast or this easy.' ), admin_url( 'tools.php' ) ); ?>

-

[bookmarklet]

+

+ +

+ +

-
- -
- -
- -
-
-

-

-

emoji.' ), '💙', '🐸', '🐒', '🍕', __( 'https://codex.wordpress.org/Emoji' ) ); - ?>

-
-
- -
-
- -
-
- -
- -
-
-
- '//s.w.org/images/core/3.9/widgets.mp4', - 'ogv' => '//s.w.org/images/core/3.9/widgets.ogv', - 'webm' => '//s.w.org/images/core/3.9/widgets.webm', - 'loop' => true, - 'height' => 218 - ) ); - ?> -

-

your content, before it debuts on your site. ' ); ?>

-
-
- '//s.w.org/images/core/3.9/widgets.mp4', - 'ogv' => '//s.w.org/images/core/3.9/widgets.ogv', - 'webm' => '//s.w.org/images/core/3.9/widgets.webm', - 'loop' => true, - 'height' => 218 - ) ); - ?> -

-

-
-
- '//s.w.org/images/core/3.9/widgets.mp4', - 'ogv' => '//s.w.org/images/core/3.9/widgets.ogv', - 'webm' => '//s.w.org/images/core/3.9/widgets.webm', - 'loop' => true, - 'height' => 218 - ) ); - ?> -

-

Update Now and watch the magic happen.' ); ?>

-
+
+
-
+
+
+ +
+
+

+

+

emoji.' ), '💙', '🐸', '🐒', '🍕', __( 'https://codex.wordpress.org/Emoji' ) ); + ?>

+
+
-
+
+
+ +

+

your content, before it debuts on your site. ' ); ?>

+
+
+ +

+

+
+
+ +

+

Update Now and watch the magic happen.' ); ?>

+
+
+ +

diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index 8ce72b8ebd..c8d92d2b21 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -103,7 +103,7 @@ } .about-wrap h3 { - margin: 2em 0 .6em; + margin: 1.25em 0 .6em; font-size: 1.25em; line-height: 1.5em; } @@ -147,7 +147,7 @@ float: left; } -.about-wrap .col .last-feature { +.about-wrap [class$=col] .last-feature { margin-right: 0; } @@ -173,10 +173,15 @@ /* 2.1 - Typography */ .about-wrap .headline-feature h2 { - margin: 1.1em 0 0.2em; - font-size: 2.4em; + margin: 50px 0 30px; + font-size: 2.2em; font-weight: 300; line-height: 1.3; + text-align: left; +} + +.about-wrap .headline-feature h3 { + margin-top: 30px; text-align: center; } @@ -185,26 +190,26 @@ text-align: center; } -.about-wrap .dfw h3 { - margin-top: 1em; - text-align: center; -} - .about-wrap .feature-section h4 { margin: 1.4em 0 0.6em 0; - font-size: 1.2em; + font-size: 1em; } .about-wrap .feature-section p { margin-top: 0.6em; } -.about-wrap .dfw p { - max-width: 68%; - margin: 0 auto 20px; +/* 2.2 - Structure */ + +.about-wrap .feature-video { + margin: 40px 0; + width: 100%; + text-align: center; } -/* 2.2 - Structure */ +.about-wrap .feature-video .wp-video { + margin: 0 auto; +} .about-wrap .featured-image { text-align: center; @@ -212,72 +217,33 @@ .about-wrap .feature-section { overflow: hidden; - padding-bottom: 20px; + padding: 0 0 40px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .about-wrap .headline-feature .feature-section { margin: 0 auto; - max-width: 82%; + max-width: 95%; } -.about-wrap .headline-feature .feature-section .col:first-child { +.about-wrap .feature-section .col:nth-of-type(odd) { float: left; - margin: 15px 5% 0 0; - width: 55%; + margin: 40px 5% 0 0; + width: 48%; } -.about-wrap .headline-feature .feature-section .col:last-child { +.about-wrap .feature-section .col:nth-of-type(even) { float: right; - margin: 15px 0 40px; - width: 40%; + margin: 40px 0 0; + width: 46%; } -.about-wrap .feature-list .feature-section { - margin-top: 0; +.about-wrap .changelog { + margin-bottom: 40px; } -.about-wrap .dfw .feature-section { - overflow: visible; -} - -.about-wrap .dfw-container { - position: relative; - overflow: hidden; - margin-top: 50px; - -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 ); - box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 ); -} - -.about-wrap .dfw-container .overlay-image { - position: absolute; - top: 0; - left: 0; - /* Cubic Bezier to speed up the slide-out of the full-width sidebar image */ - -webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61), - 0.65s opacity linear; - transition: 0.8s transform cubic-bezier(.9,.03,1,.61), - 0.65s opacity linear; -} - -.about-wrap .dfw-container .overlay-image.fade-in { - opacity: 0; -} - -/* rtl:ignore */ -.about-wrap .dfw-container .overlay-image.from-left { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); -} - -.about-wrap .dfw-container:hover .overlay-image { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - /* Cubic Bezier to speed up the slide-in of the full-width sidebar image */ - -webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ), - 0.8s opacity linear; - transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ), - 0.8s opacity linear; +.about-wrap .changelog.feature-section > div { + margin-top: 40px; } /* Return to Dashboard Home link */ @@ -293,20 +259,6 @@ padding: 0 5px; } -/* SVGs */ -.about-wrap .feature-list svg { - float: left; - clear: left; - margin: 15px 15px 0 0; - height: 90px; - width: 90px; - background-color: #cccccc; - -webkit-border-radius: 50%; - border-radius: 50%; - fill: #999; - border: 1px solid #c1c1c1; -} - .about-wrap .feature-list.finer-points h4, .about-wrap .feature-list.finer-points p { margin-left: 115px; @@ -400,17 +352,31 @@ ------------------------------------------------------------------------------*/ @media screen and ( max-width: 782px ) { + .about-wrap .feature-section { + padding: 0; + border-bottom: none; + } + .about-wrap .one-col > div, .about-wrap .two-col > div, - .about-wrap .three-col > div { + .about-wrap .three-col > div, + .about-wrap .two-col .col:nth-of-type(n) { width: 100%; - margin: 0 0 40px; + margin: 40px 0 0; padding: 0 0 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - .about-wrap .feature-list div, - .about-wrap .col > div.last-feature { + .about-wrap .two-col .col h3 { + margin-top: 0; + } + + .about-wrap .three-col img { + display: block; + margin: 0 auto; + } + + .about-wrap .feature-list div { margin: 0; padding: 0; border-bottom: none;