Changeset 11114 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_site-header.scss

Timestamp:

07/13/2021 09:07:26 PM (5 years ago)

Author:

ryelle

Message:

Pattern Directory: Sync with git WordPress/pattern-directory@aa775d8caeb2f66946b7bed7ce5300eb18135bcb

File:

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

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

@@ -1 @@
-body.home {
-        .site-header {
-                padding: 3.75rem 1rem;
-                text-align: left;
-        }
+.site-header.home {
+        padding: 0;
+        text-align: left;
 
         .site-branding {
-                display: grid;
-                grid-template-rows: auto 1fr;
-                grid-template-columns: 1fr 22rem;
+                display: block;
+                padding: 3.75rem 1rem;
 
-                > * {
-                        align-self: center;
+
+                @include breakpoint( $breakpoint-medium ) {
+                        display: grid;
+                        grid-template-rows: auto 1fr;
+                        grid-template-columns: 1fr 25rem;
+
+                        background-image: url(../images/masthead-bg.png);
+                        background-size: contain;
+                        background-repeat: no-repeat;
+                        background-position-x: 160%;
+
+                        > * {
+                                align-self: center;
+                        }
                 }
 
-                @include breakpoint( 0, $ms-breakpoint - 1 ) {
-                        display: block;
+                @include breakpoint( $breakpoint-large - 100 ) {
+                        background-position-x: 120%;
+                }
+
+                @include breakpoint( $breakpoint-large ) {
+                        grid-template-columns: 1fr 30rem;
+                        background-position-x: right;
                 }
         }
@@ -32 +46 @@
                 grid-column-start: 1;
                 grid-row-start: 2;
-                margin: 0;
-                font-size: 1.25rem;
+                margin: 0 0 1.5rem;
+                font-size: 1rem;
                 line-height: $type__line-height;
                 text-align: left;
                 color: $color-white;
+        }
+
+        .pattern-search {
+                grid-column-start: 1;
+                grid-row-start: 3;
+
+                @include breakpoint( $breakpoint-large ) {
+                        max-width: 60%;
+                }
         }
 }
@@ -43 +66 @@
         .site-branding {
                 display: flex;
+                flex-wrap: wrap;
                 align-items: center;
                 justify-content: space-between;
                 font-size: 0.8125rem;
                 color: $color-white;
+
+                @include breakpoint( $breakpoint-medium ) {
+                        *:first-child {
+                                flex-grow: 1;
+                        }
+                }
 
                 a {
@@ -60 +90 @@
                         font-weight: 600;
                 }
+
+                .pattern-search {
+                        margin-top: 1rem;
+                        flex-basis: 100%;
+
+                        @include breakpoint( $breakpoint-medium ) {
+                                margin-top: 0;
+                                margin-left: 1rem;
+                                flex-basis: unset;
+                        }
+                }
         }
 }