Merge pull request #2596 from Automattic/fix/spearhead-spacing

Spearhead: refine spacing

spearhead/assets/sass/_header.scss

@@ -3,9 +3,12 @@ $site-branding-height: 68px;
 
 .has-main-navigation {
 	.site-header {
-		padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+		padding: var(--global--spacing-horizontal);
+		@include media( laptop ){
+			padding: 35px var(--global--spacing-horizontal);
+		}
 
-		@include media( mobile-only ){
+		@include media( laptop-only ){
 			.site-title {
 				margin: 0;
 			}
@@ -35,9 +38,13 @@ $site-branding-height: 68px;
 		flex-grow: 1;
 		text-align: left;
 
-		.site-title > a {
-			background: inherit;
-			text-shadow: none;
+		.site-title {
+			margin-bottom: 4px;
+
+			> a {
+				background: inherit;
+				text-shadow: none;
+			}
 		}
 	}
 
@@ -84,7 +91,7 @@ $site-branding-height: 68px;
 
 	.primary-navigation > div > ul li, .woo-navigation > div > ul li {
 		color: var(--global--color-secondary);
-		margin: 6px;
+		margin: 6px 8px;
 		padding: var(--social-nav--padding);
 
 		a:hover {
@@ -103,7 +110,7 @@ $site-branding-height: 68px;
 		ul {
 			justify-content: flex-start;
 			flex-wrap: nowrap;
-			margin-top: var(--global--spacing-vertical);
+			margin-top: var(--social-nav--padding);
 
 			li {
 				margin: 0;

spearhead/assets/sass/_posts-and-pages.scss

@@ -26,7 +26,10 @@
 
 .site-main > * {
 	margin: 0 auto;
-	padding: calc(3 * var(--global--spacing-vertical)) 0;
+	padding: var(--global--spacing-vertical) 0;
+	&:first-child {
+		padding-top: 0;
+	}
 }
 
 // Sticky posts

spearhead/style-rtl.css

@@ -60,7 +60,11 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-main > * {
 	margin: 0 auto;
-	padding: calc(3 * var(--global--spacing-vertical)) 0;
+	padding: var(--global--spacing-vertical) 0;
+}
+
+.site-main > *:first-child {
+	padding-top: 0;
 }
 
 .has-sticky-post .site-main > *:first-child {
@@ -127,10 +131,16 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header {
-	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+	padding: var(--global--spacing-horizontal);
 }
 
-@media only screen and (max-width: 481px) {
+@media only screen and (min-width: 830px) {
+	.has-main-navigation .site-header {
+		padding: 35px var(--global--spacing-horizontal);
+	}
+}
+
+@media only screen and (max-width: 829px) {
 	.has-main-navigation .site-header .site-title {
 		margin: 0;
 	}
@@ -161,6 +171,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-align: right;
 }
 
+.site-header .site-branding .site-title {
+	margin-bottom: 4px;
+}
+
 .site-header .site-branding .site-title > a {
 	background: inherit;
 	text-shadow: none;
@@ -206,7 +220,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px;
+	margin: 6px 8px;
 	padding: var(--social-nav--padding);
 }
 
@@ -226,7 +240,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 .site-header .social-navigation ul {
 	justify-content: flex-start;
 	flex-wrap: nowrap;
-	margin-top: var(--global--spacing-vertical);
+	margin-top: var(--social-nav--padding);
 }
 
 .site-header .social-navigation ul li {

spearhead/style.css

@@ -60,7 +60,11 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-main > * {
 	margin: 0 auto;
-	padding: calc(3 * var(--global--spacing-vertical)) 0;
+	padding: var(--global--spacing-vertical) 0;
+}
+
+.site-main > *:first-child {
+	padding-top: 0;
 }
 
 .has-sticky-post .site-main > *:first-child {
@@ -127,10 +131,16 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header {
-	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+	padding: var(--global--spacing-horizontal);
 }
 
-@media only screen and (max-width: 481px) {
+@media only screen and (min-width: 830px) {
+	.has-main-navigation .site-header {
+		padding: 35px var(--global--spacing-horizontal);
+	}
+}
+
+@media only screen and (max-width: 829px) {
 	.has-main-navigation .site-header .site-title {
 		margin: 0;
 	}
@@ -161,6 +171,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-align: left;
 }
 
+.site-header .site-branding .site-title {
+	margin-bottom: 4px;
+}
+
 .site-header .site-branding .site-title > a {
 	background: inherit;
 	text-shadow: none;
@@ -206,7 +220,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px;
+	margin: 6px 8px;
 	padding: var(--social-nav--padding);
 }
 
@@ -226,7 +240,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 .site-header .social-navigation ul {
 	justify-content: flex-start;
 	flex-wrap: nowrap;
-	margin-top: var(--global--spacing-vertical);
+	margin-top: var(--social-nav--padding);
 }
 
 .site-header .social-navigation ul li {

spearhead/variables.css

@@ -52,6 +52,9 @@
 	--button--font-weight: bold;
 	--button--font-family: var(--global--font-secondary);
 	--button--font-size: var(--global--font-size-sm);
+	--button--border-radius: 3px;
+	--button--padding-vertical: 24px;
+	--button--padding-horizontal: 32px;
 
 	--cover--color-foreground: var(--global--color-background);