<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[32260] trunk/src/wp-admin: About page design for 4.2.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/32260">32260</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/32260","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>SergeyBiryukov</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-04-22 06:03:03 +0000 (Wed, 22 Apr 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>About page design for 4.2.
props melchoyce, ryelle.
see <a href="https://core.trac.wordpress.org/ticket/31929">#31929</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminaboutphp">trunk/src/wp-admin/about.php</a></li>
<li><a href="#trunksrcwpadmincssaboutcss">trunk/src/wp-admin/css/about.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminaboutphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/about.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/about.php 2015-04-21 23:35:55 UTC (rev 32259)
+++ trunk/src/wp-admin/about.php 2015-04-22 06:03:03 UTC (rev 32260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -41,90 +41,69 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </a>
</span><span class="cx" style="display: block; padding: 0 10px"> </h2>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<div class="changelog headline-feature dfw">
- <h2>[video]</h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div class="headline-feature feature-video">
+ <?php
+ // echo wp_video_shortcode( array(
+ // // 'mp4' => '//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,
+ // ) );
+ ?>
+ <embed type="application/x-shockwave-flash" src="https://v0.wordpress.com/player.swf?v=1.04" width="1000" height="560" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=bUdzKMro&isDynamicSeeking=true"></embed>
+</div>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="feature-section">
- <div class="dfw-container">
- <img src="//s.w.org/images/core/4.1/focus.png" class="base-image" />
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<hr />
+
+<div class="feature-section two-col">
+ <div class="col">
</ins><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'An easier way to share content' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php printf( __( 'Clip it, edit it, publish it. Get familiar with the new and improved Press This. From the <a href="%s">Tools</a> 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' ) ); ?></p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you’re on a page you want to share, simply “press” it.' ); ?> [bookmarklet]</p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you’re on a page you want to share, simply “press” it.' ); ?></p>
+
+ <p class="pressthis-bookmarklet-demo">
+ <a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a>
+ </p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="col">
+ <img src="https://cldup.com/xMJ2QCxvcz.jpg" />
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<hr />
-
-<div class="changelog headline-feature">
-
- <div class="feature-section">
- <div class="col">
- <h3><?php _e( 'Extended character support' ); ?></h3>
- <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
- <p><?php
- /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
- printf( __( 'Don’t use any of those characters? You can still have fun — emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '💙', '🐸', '🐒', '🍕', __( 'https://codex.wordpress.org/Emoji' ) );
- ?></p>
- </div>
- <div class="col">
- <img class="" src="//s.w.org/images/core/4.1/mobile.png" />
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div class="feature-section two-col">
+ <div class="col">
+ <img src="https://cldup.com/q-2svtgKe1.jpg" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- <div class="clear"></div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="col">
+ <h3><?php _e( 'Extended character support' ); ?></h3>
+ <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
+ <p><?php
+ /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
+ printf( __( 'Don’t use any of those characters? You can still have fun — emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '💙', '🐸', '🐒', '🍕', __( 'https://codex.wordpress.org/Emoji' ) );
+ ?></p>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<hr />
-
-<div class="changelog customize">
- <div class="feature-section col three-col">
- <div>
- <?php
- echo wp_video_shortcode( array(
- 'mp4' => '//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
- ) );
- ?>
- <h4><?php _e( 'Switch themes in the Customizer' ); ?></h4>
- <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
- </div>
- <div>
- <?php
- echo wp_video_shortcode( array(
- 'mp4' => '//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
- ) );
- ?>
- <h4><?php _e( 'Even more embeds' ); ?></h4>
- <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
- </div>
- <div class="last-feature">
- <?php
- echo wp_video_shortcode( array(
- 'mp4' => '//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
- ) );
- ?>
- <h4><?php _e( 'Streamlined plugin updates' ); ?></h4>
- <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update Now</em> and watch the magic happen.' ); ?></p>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div class="changelog feature-section three-col">
+ <div>
+ <img src="https://cldup.com/LKcPHn8rdr.png" />
+ <h3><?php _e( 'Switch themes in the Customizer' ); ?></h3>
+ <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div>
+ <img src="https://cldup.com/h0VOskQA1C.png" />
+ <h3><?php _e( 'Even more embeds' ); ?></h3>
+ <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
+ </div>
+ <div class="last-feature">
+ <img src="https://cldup.com/1_8tBZpvva.png" />
+ <h3><?php _e( 'Streamlined plugin updates' ); ?></h3>
+ <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update Now</em> and watch the magic happen.' ); ?></p>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<hr />
-
-<div class="changelog under-the-hood">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<div class="changelog under-the-hood feature-list">
</ins><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Under the Hood' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="feature-section col two-col">
</span></span></pre></div>
<a id="trunksrcwpadmincssaboutcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/about.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/about.css 2015-04-21 23:35:55 UTC (rev 32259)
+++ trunk/src/wp-admin/css/about.css 2015-04-22 06:03:03 UTC (rev 32260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -103,7 +103,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap h3 {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 2em 0 .6em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 1.25em 0 .6em;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25em;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.5em;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -147,7 +147,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .col .last-feature {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap [class$=col] .last-feature {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -173,10 +173,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* 2.1 - Typography */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .headline-feature h2 {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 1.1em 0 0.2em;
- font-size: 2.4em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 50px 0 30px;
+ font-size: 2.2em;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 300;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.3;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-align: left;
+}
+
+.about-wrap .headline-feature h3 {
+ margin-top: 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -185,26 +190,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .dfw h3 {
- margin-top: 1em;
- text-align: center;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-section h4 {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 1.4em 0 0.6em 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- font-size: 1.2em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-size: 1em;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-section p {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0.6em;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .dfw p {
- max-width: 68%;
- margin: 0 auto 20px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 2.2 - Structure */
+
+.about-wrap .feature-video {
+ margin: 40px 0;
+ width: 100%;
+ text-align: center;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* 2.2 - Structure */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .feature-video .wp-video {
+ margin: 0 auto;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .featured-image {
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -212,74 +217,35 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-section {
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding-bottom: 20px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 0 0 40px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .headline-feature .feature-section {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 auto;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- max-width: 82%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ max-width: 95%;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .headline-feature .feature-section .col:first-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .feature-section .col:nth-of-type(odd) {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 15px 5% 0 0;
- width: 55%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 40px 5% 0 0;
+ width: 48%;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .headline-feature .feature-section .col:last-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .feature-section .col:nth-of-type(even) {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 15px 0 40px;
- width: 40%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 40px 0 0;
+ width: 46%;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .feature-list .feature-section {
- margin-top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .changelog {
+ margin-bottom: 40px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.about-wrap .dfw .feature-section {
- overflow: visible;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .changelog.feature-section > div {
+ margin-top: 40px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Return to Dashboard Home link */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .return-to-dashboard {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -293,20 +259,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0 5px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* 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;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-list.finer-points h4,
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-list.finer-points p {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 115px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -400,17 +352,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ------------------------------------------------------------------------------*/
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media screen and ( max-width: 782px ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .about-wrap .feature-section {
+ padding: 0;
+ border-bottom: none;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .one-col > div,
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .two-col > div,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .about-wrap .three-col > div {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .about-wrap .three-col > div,
+ .about-wrap .two-col .col:nth-of-type(n) {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0 0 40px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 40px 0 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 0 0 40px;
</span><span class="cx" style="display: block; padding: 0 10px"> border-bottom: 1px solid rgba(0, 0, 0, 0.1);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .about-wrap .feature-list div,
- .about-wrap .col > div.last-feature {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .about-wrap .two-col .col h3 {
+ margin-top: 0;
+ }
+
+ .about-wrap .three-col img {
+ display: block;
+ margin: 0 auto;
+ }
+
+ .about-wrap .feature-list div {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> border-bottom: none;
</span></span></pre>
</div>
</div>
</body>
</html>