Global header, local nav: Make the logo bigger (#649)

* Increase logo size, decrease global header size * Local navigation: Increase logo size on scrolling nav bar
WordPress · Sep 9, 2024 · 7da84bc · 7da84bc
1 parent 38bf9c2
commit 7da84bc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 40 deletions.
diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
@@ -31,26 +31,17 @@ html {
 		padding-left: var(--wp--style--block-gap);
 		padding-right: var(--wp--style--block-gap);
 		margin: 0;
-
-		@media (--tablet) {
-			padding-top: 33px;
-			padding-bottom: 33px;
-		}
 	}
 
 	& .global-header__search,
 	& .global-header__navigation {
 		padding: 0;
 
 		& .wp-block-navigation__responsive-container-open {
-
-			/* Magic numbers to center the 24px icon in 60px height. */
-			padding: 18px 16px 18px;
-
-			@media (--tablet) {
-				padding-top: 37px;
-				padding-bottom: 37px;
-			}
+			padding-top: calc((var(--wp-global-header-height) - 24px) / 2);
+			padding-right: 16px;
+			padding-bottom: calc((var(--wp-global-header-height) - 24px) / 2);
+			padding-left: 16px;
 		}
 	}
 

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/logos.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/logos.pcss
@@ -26,20 +26,10 @@
 	& .wp-block-image > a {
 		display: inline-flex;
 		box-sizing: content-box;
-		height: 27px;
-		padding: 16px var(--wp--style--block-gap);
+		height: 30px;
+		padding: calc((var(--wp-global-header-height) - 30px) / 2) var(--wp--style--block-gap);
 		color: var(--wp-global-header--text-color);
 
-		@media (--tablet) {
-			padding-top: 31px;
-			padding-bottom: 32px;
-		}
-
-		@media (--short-screen) {
-			padding-bottom: 16px;
-			padding-top: 16px;
-		}
-
 		&:hover {
 			background-color: var(--wp-global-header--background-color--hover);
 		}

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss
@@ -147,10 +147,10 @@
 			}
 
 			@media (--tablet) {
-				padding-bottom: calc(33px - var(--active-menu-item-border-height, 0px));
-				padding-top: 33px;
-				padding-left: calc(var(--wp--style--block-gap) / 2);
+				padding-top: calc((var(--wp-global-header-height) - 24px) / 2);
 				padding-right: calc(var(--wp--style--block-gap) / 2);
+				padding-bottom: calc((var(--wp-global-header-height) - 24px) / 2 - var(--active-menu-item-border-height, 0px));
+				padding-left: calc(var(--wp--style--block-gap) / 2);
 			}
 
 			@media (--short-screen) {

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
@@ -13,17 +13,8 @@
 
 	& .wp-block-navigation__responsive-container-open,
 	& .wp-block-navigation__responsive-container-close {
-
-		@media (--tablet) {
-			padding-top: 33px;
-			padding-bottom: 33px;
-		}
-
-		@media (--short-screen) {
-			padding-bottom: 20px;
-			padding-top: 16px;
-			background-position: center;
-		}
+		padding-top: calc((var(--wp-global-header-height) - 24px) / 2);
+		padding-bottom: calc((var(--wp-global-header-height) - 24px) / 2);
 
 		&:focus-visible {
 			outline: none;

diff --git a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss b/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss
@@ -69,9 +69,12 @@
 			top: -5px;
 			left: 0;
 			opacity: 0;
-			padding: 16px var(--wp--style--block-gap);
+			padding: calc(var(--wp--custom--local-navigation-bar--spacing--height) / 2 - 15px) var(--wp--style--block-gap);
+			padding-left: calc(var(--wp--style--block-gap) + 5px);
 			transition: all 0.2s ease-in-out;
 			visibility: hidden;
+			box-sizing: content-box;
+			width: 30px;
 
 			& a {
 				display: block;
@@ -81,6 +84,9 @@
 
 			& svg {
 				fill: currentcolor;
+				display: block;
+				height: auto;
+				width: 100%;
 			}
 		}