Browse Source

Header spacing refinements.

Jeff Ong 4 years ago
parent
commit
2d7812b3e4

+ 9 - 5
spearhead/assets/sass/_header.scss

@@ -3,7 +3,7 @@ $site-branding-height: 68px;
 
 .has-main-navigation {
 	.site-header {
-		padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+		padding: 35px var(--global--spacing-horizontal);
 
 		@include media( mobile-only ){
 			.site-title {
@@ -35,9 +35,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 +88,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 {

+ 4 - 1
spearhead/assets/sass/_posts-and-pages.scss

@@ -25,7 +25,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

+ 11 - 3
spearhead/style-rtl.css

@@ -59,7 +59,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 {
@@ -98,7 +102,7 @@ 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: 35px var(--global--spacing-horizontal);
 }
 
 @media only screen and (max-width: 481px) {
@@ -132,6 +136,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;
@@ -177,7 +185,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);
 }
 

+ 11 - 3
spearhead/style.css

@@ -59,7 +59,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 {
@@ -98,7 +102,7 @@ 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: 35px var(--global--spacing-horizontal);
 }
 
 @media only screen and (max-width: 481px) {
@@ -132,6 +136,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;
@@ -177,7 +185,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);
 }
 

File diff suppressed because it is too large
+ 0 - 0
spearhead/style.css.map


Some files were not shown because too many files changed in this diff