Changeset 6058 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_wporg-header.scss

Timestamp:

10/27/2017 06:47:58 PM (8 years ago)

Author:

obenland

Message:

Main: Style updates.

• Fixes a bug where pages were misaligned.
• Underlines links in entry content and lists. Fixes #3216.
• Improves comment metadata and reply.
• Adds wporg header styles in case we ever get to a point where we can ditch wp4.css.

See #2861.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_wporg-header.scss (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_wporg-header.scss

@@ -1 +1 @@
 #wporg-header {
+    background: #23282d;
+    height: 140px;
+    position: relative;
+    text-align: center;
+    width: 100%;
+
+    .wrapper {
+        margin: 0 auto;
+        max-width: 960px;
+    }
+
     h1 {
+        display: inline-block;
         margin: auto;
+        width: 303px;
+
+        a {
+            background: url( //s.w.org/style/images/wp-header-logo.png?1 ) center left no-repeat;
+            background-size: 303px 53px;
+            display: block;
+            height: 88px;
+            text-indent: -9999px;
+            width: 303px;
+
+            @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+            only screen and (min-resolution: 1.5dppx),
+            only screen and (min-resolution: 144dpi) {
+                background-image: url( //s.w.org/style/images/wp-header-logo-2x.png?1 );
+            }
+        }
     }
 
     h2.rosetta {
         clear: none;
-    }
-
-    form input {
-        box-sizing: content-box;
+        color: #dfdfdf;
+        font-family: Georgia, "Times New Roman", serif;
+        font-size: 30px;
         margin: 0;
-        padding: 3px;
-    }
-
-    .button {
-        box-shadow: none;
+
+        a {
+            border-bottom: none;
+            color: #dfdfdf;
+            display: block;
+            height: 52px; /* 88 header height - 36 top padding */
+            line-height: 22px;
+            padding: 0;
+        }
+    }
+
+    #wporg-header-menu {
+        background: #23282d;
+        left: -75%;
+        list-style: none;
+        margin: 0;
+        max-width: 75%;
+        min-width: 200px;
+        padding: 20px 0 0;
+        position: absolute;
+        text-align: left;
+        transition: left 0.3s;
+        z-index: 100000;
+
+        &.active {
+            left: 0;
+        }
+    }
+
+    ul li {
+        list-style-type:none;
+        position:relative;
+
+        a {
+            color: #eee;
+            display: block;
+            font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
+            font-size: 13px;
+            font-weight: 600;
+            height: 34px;
+            line-height: 34px;
+            margin: 0 4px;
+            padding: 10px 30px;
+            text-decoration: none;
+
+            &.subcurrent {
+                font-weight: bold;
+            }
+
+            @include breakpoint( sm ) {
+                height: auto;
+            }
+        }
+
+        &#download {
+            float: right;
+            height: 34px;
+            margin-right: 14px;
+            overflow: hidden;
+            padding: 0 0 34px;
+
+            @media screen and (max-width:820px) {
+                display: none;
+            }
+
+            @media screen and (max-width:768px) {
+                display: block;
+                float: none;
+                margin: 10px 20px 20px;
+                padding-bottom: 0;
+                height: auto;
+
+                a {
+                    padding: 4px 10px;
+                }
+            }
+
+            a {
+                margin: 0;
+                padding: 0 16px;
+
+                &:hover {
+                    color: #eee;
+                }
+
+                &.current {
+                    color: #eee;
+                }
+            }
+        }
+
+        a:hover,
+        a.current,
+        &.current-menu-item a,
+        &.current_page_parent a {
+            color: #45bbe6;
+        }
+    }
+
+    .nav-submenu {
+        display: none;
+        margin-bottom: 10px;
+        margin-top: -15px;
+        padding: 0;
+        position: static;
+
+        li a {
+            height: 24px;
+            line-height: 24px;
+            margin-left: 20px;
+        }
     }
 
     .download-button {
-        background-color: #21759b;
-        background-image: linear-gradient(to bottom, #2a95c5, #21759b);
+        background: #21759b linear-gradient(to bottom, #2a95c5, #21759b);
+        border-color: #21759b;
         border-bottom-color: #1e6a8d;
-        border-color: #21759b;
         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 );
 
         &:hover,
         &:focus {
-            background-color: #278ab7;
-            background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
+            background: #278ab7 linear-gradient(to bottom, #2e9fd2, #21759b);
             border-color: #1b607f;
             box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
@@ -36 +167 @@
 
         &:active {
-            background: #1b607f;
-            background-image: linear-gradient(to bottom, #21759b, #278ab7);
+            background: #1b607f linear-gradient(to bottom, #21759b, #278ab7);
             border-color: #124560 #2382ae #2382ae #2382ae;
             box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
@@ -46 +176 @@
     }
 
-    a:hover,
-    a:focus,
-    a:active {
-        text-decoration: none;
-    }
-
-    @include breakpoint( sm ) {
-        ul li a {
-            height: auto;
-        }
-    }
-
-    @include breakpoint( 769px ) {
+    #head-search {
+        @include breakpoint( $sm ) {
+            float: right;
+            margin-right: 14px;
+            padding-top: 30px;
+        }
+
+        form {
+            border-bottom: 1px solid #3f3f3f;
+            display: inline-block;
+            margin-left: 60px;
+            width: 288px;
+
+            input.text {
+                background: #191e23;
+                border: 0;
+                border-radius: 0;
+                box-sizing: content-box;
+                color: #b4b9be;
+                float: left;
+                font-family: "Open Sans", sans-serif;
+                font-size: 12px;
+                height: 24px;
+                margin: 0;
+                outline: none;
+                padding: 3px;
+                vertical-align: top;
+                width: 256px;
+
+                &::-moz-placeholder {
+                    color: #eee;
+                }
+
+                @media screen and (max-width:480px) {
+                    width: 216px;
+                }
+            }
+
+            .button {
+                background: #191e23 url( //s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831 ) no-repeat 2px 4px;
+                border: none;
+                border-radius: 0;
+                box-shadow: none;
+                float: left;
+                height: 30px;
+                margin: 0;
+                padding: 0;
+                text-shadow: none !important;
+                width: 26px;
+            }
+
+            @include breakpoint( 0, 480px ) {
+                width: 248px;
+            }
+
+            @include breakpoint( 480px ) {
+                margin-left: 0;
+            }
+        }
+    }
+
+    @include breakpoint( $sm ) {
+        height: 120px;
+        text-align: inherit;
+
+        h1 {
+            float: left;
+            padding-left: 10px;
+        }
+
+        h2.rosetta {
+            padding: 36px 27px 0;
+            float: left;
+        }
+
+        #wporg-header-menu {
+            position: static;
+            float:left;
+            margin: -15px 0 0;
+            padding: 0;
+            min-width: 0;
+            max-width: inherit;
+            width: 100%;
+            list-style: none;
+        }
+
+        ul li {
+            float: left;
+            position:relative;
+
+            a {
+                font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
+                font-weight: 600;
+                display: block;
+                line-height: 34px;
+                padding: 0 6px;
+                margin: 0 4px;
+                font-size: 13px;
+                color: #eee;
+                height: 46px;
+
+                &.current ~ .uparrow {
+                    width: 0;
+                    height: 0;
+                    border-left: 9px solid transparent;
+                    border-right: 9px solid transparent;
+                    border-bottom: 9px solid #f7f7f7;
+                    margin: -8px auto 0 auto;
+                }
+            }
+
+            &#download .uparrow {
+                display:none;
+            }
+
+            &.current-menu-item:after,
+            &.current_page_parent:after {
+                content: '';
+                position: absolute;
+                left: 50%;
+                width: 0;
+                height: 0;
+                border-left: 9px solid transparent;
+                border-right: 9px solid transparent;
+                border-bottom: 9px solid #f7f7f7;
+                margin: -8px 0 0 -9px;
+            }
+
+            &:hover .nav-submenu ~ .uparrow,
+            .nav-submenu:hover ~ .uparrow {
+                width: 0;
+                height: 0;
+                border-left: 9px solid transparent;
+                border-right: 9px solid transparent;
+                border-bottom: 9px solid #32373c;
+                margin: -10px auto 0 auto;
+            }
+
+            .nav-submenu li {
+                float: none;
+
+                a {
+                    margin-left: 6px;
+                    height: 34px;
+                    line-height: 34px;
+                }
+            }
+        }
+
+        .nav-submenu {
+            display:none!important;/* Prevents #wporg-header ul overwriting this */
+            min-width: 0;
+            background: #32373c;
+            margin-top: -1px;
+            border: #32373c solid 1px;
+            border-top:0;
+        }
+
+        ul li:hover .nav-submenu,
+        ul li .nav-submenu:hover {
+            display:block!important;/* Prevents #wporg-header ul overwriting this */
+            position:absolute;
+            top:46px;
+            left:0;
+            z-index:101;
+            margin-left:0;
+            width:auto;
+        }
+
+        #headline h2 {
+            text-rendering: optimizeLegibility;
+        }
+
         ul li.current-menu-item:after,
         ul li.current_page_parent:after,
@@ -65 +355 @@
 
             body.blog &,
+            body.search &,
             body.single &,
             body.archive & {
@@ -72 +363 @@
     }
 }
+
+#mobile-menu-button {
+    display: block;
+    float: left;
+    font-family: 'dashicons';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: normal;
+    height: 32px;
+    left: 10px;
+    line-height: 1;
+    position: absolute;
+    text-align: center;
+    text-decoration: inherit;
+    top: 75px;
+    transition: color .1s ease-in;
+    vertical-align: top;
+    width: 39px;
+    -webkit-font-smoothing: antialiased;
+
+    &:before {
+        border: none;
+        box-sizing: border-box;
+        color: #888;
+        content: '\f228';
+        display: inline-block;
+        float: left;
+        font: normal 50px/1 'Dashicons';
+        height: 32px;
+        margin: 0;
+        outline: none;
+        padding: 3px;
+        text-decoration: none;
+        vertical-align: middle;
+        width: 39px;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    &:hover {
+        background:none;
+    }
+
+    @include breakpoint( $sm ) {
+        display: none;
+    }
+}
+
+#download-mobile {
+    background: #f7f7f7;
+    border-bottom: 1px solid #dddddd;
+
+    .wrapper {
+        padding: 20px 0;
+        text-align: center;
+    }
+
+    span.download-ready {
+        font-size: 1.6em;
+        margin: 0 0.25em;
+    }
+
+    a.download-button {
+        font-size: 1.6em;
+        height: inherit;
+        margin: 10px 0.25em;
+        padding: 10px 15px;
+    }
+}