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