Changeset 3336

Timestamp:

06/12/2016 07:22:20 AM (9 years ago)

Author:

obenland

Message:

Plugin Directory: Updated 404 page, including styles.

Props mapk.
See #1719.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins

Files:

• 404.php (modified) (1 diff)
• css/style.css (modified) (3 diffs)
• sass/site/_site.scss (modified) (1 diff)
• sass/site/primary/_404.scss (added)
• sass/typography/_copy.scss (modified) (1 diff)
• sass/variables-site/_colors.scss (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/404.php

@@ -12 +12 @@
 get_header(); ?>
 
-    <div id="primary" class="content-area">
-        <main id="main" class="site-main" role="main">
+    <main id="main" class="site-main" role="main">
 
-            <section class="error-404 not-found">
-                <header class="page-header">
-                    <h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'wporg-plugins' ); ?></h1>
-                </header><!-- .page-header -->
+        <section class="error-404 not-found">
+            <header class="page-header">
+                <h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'wporg-plugins' ); ?></h1>
+            </header><!-- .page-header -->
 
-                <div class="page-content">
-                    <p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'wporg-plugins' ); ?></p>
+            <div class="page-content">
+                <p><?php printf( __( 'Try searching from the field above, or go to the <a href="%s">home page</a>.', 'wporg-plugins' ), get_home_url() ); ?></p>
 
-                    <?php
-                        get_search_form();
+                <div class="logo-swing">
+                    <span class="dashicons dashicons-wordpress wp-logo"></span>
+                    <span class="dashicons dashicons-wordpress wp-logo hinge"></span>
+                </div>
+                <script>
+                    setTimeout( function() {
+                        jQuery( '.hinge' ).hide();
+                    }, 1900 );
+                </script>
+            </div><!-- .page-content -->
+        </section><!-- .error-404 -->
 
-                        the_widget( 'WP_Widget_Recent_Posts' );
-
-                        // Only show the widget if site has multiple categories.
-                        if ( wporg_plugins_categorized_blog() ) :
-                    ?>
-
-                    <div class="widget widget_categories">
-                        <h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', 'wporg-plugins' ); ?></h2>
-                        <ul>
-                        <?php
-                            wp_list_categories( array(
-                                'orderby'    => 'count',
-                                'order'      => 'DESC',
-                                'show_count' => 1,
-                                'title_li'   => '',
-                                'number'     => 10,
-                            ) );
-                        ?>
-                        </ul>
-                    </div><!-- .widget -->
-
-                    <?php
-                        endif;
-
-                        /* translators: %1$s: smiley */
-                        $archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', 'wporg-plugins' ), convert_smilies( ':)' ) ) . '</p>';
-                        the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$archive_content" );
-
-                        the_widget( 'WP_Widget_Tag_Cloud' );
-                    ?>
-
-                </div><!-- .page-content -->
-            </section><!-- .error-404 -->
-
-        </main><!-- #main -->
-    </div><!-- #primary -->
+    </main><!-- #main -->
 
 <?php

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

@@ -299 +299 @@
 p {
   margin: 1em 0;
-  max-width: 35.527136788rem;
 }
 
 p.subheading {
-  color: #82878C;
+  color: #82878c;
   font-size: 1.25rem;
   font-weight: 300;
@@ -396 +395 @@
 
 hr {
-  background-color: #ccc;
+  background-color: #eee;
   border: 0;
   height: 1px;
@@ -1764 +1763 @@
 
 /*--------------------------------------------------------------
+## 404
+--------------------------------------------------------------*/
+.error404 {
+  background: #0073aa;
+  color: #fff;
+}
+
+.error404 .page-title {
+  text-align: center;
+}
+
+.error404 .page-content {
+  text-align: center;
+}
+
+.error404 .page-content a, .error404 .page-content .single .type-plugin .entry-content .section-toggle, .single .type-plugin .entry-content .error404 .page-content .section-toggle {
+  color: #fff;
+  text-decoration: underline;
+}
+
+.error404 .page-content .logo-swing {
+  height: 160px;
+  height: 10rem;
+  margin: 96px auto;
+  margin: 6rem auto;
+  position: relative;
+  text-align: center;
+  width: 160px;
+  width: 10rem;
+}
+
+.error404 .page-content .logo-swing .dashicons-wordpress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: none;
+  width: 160px;
+  width: 10rem;
+}
+
+.error404 .page-content .logo-swing .dashicons-wordpress:first-of-type {
+  color: #0d7aae;
+}
+
+.error404 .page-content .logo-swing .dashicons-wordpress:before {
+  font-size: 160px;
+  font-size: 10rem;
+}
+
+@keyframes hinge {
+  10% {
+    width: 180px;
+    height: 180px;
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  15% {
+    width: 185px;
+    height: 185px;
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  20% {
+    width: 180px;
+    height: 180px;
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+  40% {
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+  60% {
+    transform: rotate3d(0, 0, 1, 40deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+  40%, 80% {
+    transform: rotate3d(0, 0, 1, 60deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  animation-duration: 2s;
+  animation-name: hinge;
+}
+
+.hide {
+  display: none;
+}
+
+/*--------------------------------------------------------------
 ## Asides
 --------------------------------------------------------------*/

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_site.scss

@@ -17 +17 @@
 
 /*--------------------------------------------------------------
+## 404
+--------------------------------------------------------------*/
+@import "primary/404";
+
+/*--------------------------------------------------------------
 ## Asides
 --------------------------------------------------------------*/

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/typography/_copy.scss

@@ -3 +3 @@
 p {
     margin: 1em 0;
-    max-width: ms(32);
 
     &.subheading {
-        color: #82878C;
+        color: #82878c;
         font-size: ms(2);
         font-weight: 300;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/variables-site/_colors.scss

@@ -1 +1 @@
 $color__background-body: #fff;
 $color__background-screen: #f1f1f1;
-$color__background-hr: #ccc;
+$color__background-hr: #eee;
 $color__background-button: #e6e6e6;
 $color__background-pre: #eee;