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

Timestamp:

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

Author:

coffee2code

Message:

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

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss (modified) (2 diffs)

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;
+            }
+        }
+    }
 }