Quadrat: Enhance the logo spacing on mobile (#4634)

* Quadrat: Enhance the logo spacing on mobile

* Update quadrat/sass/templates/_header.scss

Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

* Geologist: Add logo spacing

* Geologist/Quadrat: update theme.css files

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

geologist/assets/theme.css

@@ -344,43 +344,55 @@ textarea:focus {
 	position: relative;
 }
 
-.site-header {
+.wp-site-blocks .site-header {
 	overflow: inherit;
 	padding-top: var(--wp--custom--gap--vertical);
 }
 
-.site-header .wp-block-site-logo {
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header {
+		padding-top: 0;
+	}
+}
+
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header {
+		gap: 2px;
+	}
+}
+
+.wp-site-blocks .site-header .wp-block-site-logo {
 	margin-right: var(--wp--custom--gap--horizontal);
 }
 
 @media (max-width: 599px) {
-	.site-header .wp-block-site-logo {
+	.wp-site-blocks .site-header .wp-block-site-logo {
 		flex-basis: 100%;
-		margin: 20px 0;
+		margin: 45px 0;
 		text-align: center;
 	}
 }
 
-.site-header .wp-block-site-logo a > img {
+.wp-site-blocks .site-header .wp-block-site-logo a > img {
 	height: 64px;
 	width: auto;
 }
 
-.site-header .wp-block-site-title {
+.wp-site-blocks .site-header .wp-block-site-title {
 	margin: 0;
 }
 
-.site-header .wp-block-navigation {
+.wp-site-blocks .site-header .wp-block-navigation {
 	margin-left: auto;
 	padding-right: 0;
 }
 
-.site-header .wp-block-site-tagline {
+.wp-site-blocks .site-header .wp-block-site-tagline {
 	margin: 0;
 }
 
 @media (max-width: 599px) {
-	.site-header .wp-block-site-tagline {
+	.wp-site-blocks .site-header .wp-block-site-tagline {
 		padding-left: 0 !important;
 		flex-basis: 100%;
 		order: 10;

geologist/sass/templates/_header.scss

@@ -2,16 +2,25 @@
 	position: relative; // This is needed so that the polygon is stretched across the whole site.
 }
 
-.site-header {
+.wp-site-blocks .site-header {
 	overflow: inherit;
 	padding-top: var(--wp--custom--gap--vertical);
 
+	@include break-small-only(){
+		padding-top: 0;
+	}
+
+	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
+	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
+	@include break-small-only() {
+		gap: 2px;
+	}
 	.wp-block-site-logo {
 		margin-right: var(--wp--custom--gap--horizontal);
 
 		@include break-small-only(){
 			flex-basis: 100%;
-			margin: 20px 0;
+			margin: 45px 0;
 			text-align: center;
 		}
 

quadrat/assets/theme.css

@@ -496,6 +496,12 @@ textarea:focus {
 	padding-top: var(--wp--custom--gap--vertical);
 }
 
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header {
+		padding-top: 0;
+	}
+}
+
 @media (max-width: 599px) {
 	.wp-site-blocks .site-header {
 		gap: 2px;
@@ -509,7 +515,7 @@ textarea:focus {
 @media (max-width: 599px) {
 	.wp-site-blocks .site-header .wp-block-site-logo {
 		flex-basis: 100%;
-		margin: 20px 0;
+		margin: 45px 0;
 		text-align: center;
 	}
 }

quadrat/sass/templates/_header.scss

@@ -6,8 +6,12 @@
 	overflow: inherit;
 	padding-top: var(--wp--custom--gap--vertical);
 
-	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate) 
-	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY 
+	@include break-small-only(){
+		padding-top: 0;
+	}
+
+	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
+	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
 	@include break-small-only() {
 		gap: 2px;
 	}
@@ -16,7 +20,7 @@
 
 		@include break-small-only(){
 			flex-basis: 100%;
-			margin: 20px 0;
+			margin: 45px 0;
 			text-align: center;
 		}