Changeset 803

Timestamp:

08/19/2014 05:45:03 PM (11 years ago)

Author:

coffee2code

Message:

Code Reference: add handbook name header to the top of handbook pages, per mockup. Related: #439

Location:

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

Files:

• archive-plugin-handbook.php (modified) (1 diff)
• archive-theme-handbook.php (modified) (1 diff)
• scss/main.scss (modified) (2 diffs)
• single-plugin-handbook.php (modified) (1 diff)
• single-theme-handbook.php (modified) (1 diff)
• stylesheets/main.css (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/archive-plugin-handbook.php

@@ -15 +15 @@
         <?php breadcrumb_trail(); ?>
 
+        <div class="handbook-name">
+            <span class="wpicon"><div class="dashicons"></div></span>
+            <div><?php esc_html_e( \WPorg_Handbook::get_name( 'plugin-handbook' ) ); ?></div>
+            <span><?php _e( 'Handbook', 'wporg' ); ?></span>
+        </div>
+
         <main id="main" class="site-main" role="main">
 
             <?php if ( have_posts() ) : ?>
-
 
                 <?php /* Start the Loop */ ?>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/archive-theme-handbook.php

@@ -15 +15 @@
         <?php breadcrumb_trail(); ?>
 
+        <div class="handbook-name">
+            <span class="wpicon"><div class="dashicons"></div></span>
+            <div><?php esc_html_e( \WPorg_Handbook::get_name( 'theme-handbook' ) ); ?></div>
+            <span><?php _e( 'Handbook', 'wporg' ); ?></span>
+        </div>
+
         <main id="main" class="site-main" role="main">
 
             <?php if ( have_posts() ) : ?>
-
 
                 <?php /* Start the Loop */ ?>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -651 +651 @@
 
     .reference-landing {
-        padding: 1em 0;
-
         .section {
             max-width: 700px;
@@ -1168 +1166 @@
         }
     }
+
+    .handbook-name {
+        text-align: center;
+        margin-bottom: 1em;
+        margin-right: 1.2rem;
+        overflow-x: hidden;
+        letter-spacing: 2px;
+        padding-top: 8px;
+
+        div {
+            font-weight: 100;
+            margin: 0.5rem 0 0;
+            font-size: 36px;
+        }
+
+        span {
+            display: inline-block;
+            position: relative;
+            color: #aaa;
+            text-transform: uppercase;
+
+            &:before,
+            &:after {
+                content: "";
+                position: absolute;
+                border-top: 1px solid #ccc;
+                top: 49%;
+                width: 600px;
+            }
+
+            &:before {
+                right: 100%;
+                margin-right: 10px;
+            }
+
+            &:after {
+                left: 100%;
+                margin-left: 10px;
+            }
+
+            &.wpicon div {
+                margin: -0.7rem 2rem 0 -1.8rem;
+                font-size: 2.5em;
+                padding: 0 2rem;
+
+                &:before {
+                    content: "\f324";
+                }
+
+                &:before,
+                &:after {
+                    border-top-width: 3px;
+                }
+            }
+
+            .dashicons {
+                font-size: 2.5em;
+            }
+        }
+    }
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/single-plugin-handbook.php

@@ -11 +11 @@
 
         <?php breadcrumb_trail(); ?>
+
+        <div class="handbook-name">
+            <span class="wpicon"><div class="dashicons"></div></span>
+            <div><?php esc_html_e( \WPorg_Handbook::get_name( 'plugin-handbook' ) ); ?></div>
+            <span><?php _e( 'Handbook', 'wporg' ); ?></span>
+        </div>
 
         <main id="main" <?php post_class( 'site-main' ); ?> role="main">

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/single-theme-handbook.php

@@ -11 +11 @@
 
         <?php breadcrumb_trail(); ?>
+
+        <div class="handbook-name">
+            <span class="wpicon"><div class="dashicons"></div></span>
+            <div><?php esc_html_e( \WPorg_Handbook::get_name( 'theme-handbook' ) ); ?></div>
+            <span><?php _e( 'Handbook', 'wporg' ); ?></span>
+        </div>
 
         <main id="main" <?php post_class( 'site-main' ); ?> role="main">

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -890 +890 @@
   margin-bottom: 1em;
 }
-.devhub-wrap .reference-landing {
-  padding: 1em 0;
-}
 .devhub-wrap .reference-landing .section, .devhub-wrap .search-section {
   max-width: 700px;
@@ -1309 +1306 @@
 }
 
+.devhub-wrap .handbook-name {
+  text-align: center;
+  margin-bottom: 1em;
+  margin-right: 1.2rem;
+  overflow-x: hidden;
+  letter-spacing: 2px;
+  padding-top: 8px;
+}
+
+.devhub-wrap .handbook-name div {
+  font-weight: 100;
+  margin: 0.5rem 0 0;
+  font-size: 36px;
+}
+
+.devhub-wrap .handbook-name span {
+  display: inline-block;
+  position: relative;
+  color: #aaa;
+  text-transform: uppercase;
+}
+
+.devhub-wrap .handbook-name span:before,
+.devhub-wrap .handbook-name span:after {
+  content: "";
+  position: absolute;
+  border-top: 1px solid #ccc;
+  top: 49%;
+  width: 600px;
+}
+
+.devhub-wrap .handbook-name span:before {
+  right: 100%;
+  margin-right: 10px;
+}
+.devhub-wrap .handbook-name span:after {
+  left: 100%;
+  margin-left: 10px;
+}
+
+.devhub-wrap .handbook-name span.wpicon div {
+  margin: -0.7rem 2rem 0 -1.8rem;
+  font-size: 2.5em;
+  padding: 0 2rem;
+}
+.devhub-wrap .handbook-name span.wpicon div:before {
+  content: "\f324";
+}
+
+.devhub-wrap .handbook-name span.wpicon:before,
+.devhub-wrap .handbook-name span.wpicon:after {
+  border-top-width: 3px;
+}
+
+.devhub-wrap .handbook-name span .dashicons {
+  font-size: 2.5em;
+}
+
+
 @media (max-width: 60em) {
   .devhub-wrap {