Dalston: Cleaning up Project Block Styles

dalston/block-extends/extend-columns-block.css

@@ -66,28 +66,38 @@
 /* Project */
 
 .wp-block-columns.is-style-project.alignfull {
-	padding-left: 0;
+	padding-left: 16px;
 	padding-right: 0;
 }
 
 @media (min-width: 600px) {
 
-	.wp-block-columns.is-style-project .wp-block-column:nth-child(2n) {
+	.wp-block-columns.is-style-project.alignfull {
+		padding-left: 32px;
+		padding-right: 0;
+	}
+
+	.wp-block-columns.is-style-project > .wp-block-column:nth-child(2n) {
 		margin-left: 0;
 	}
 }
 
-@media (min-width: 782px) {
+@media (min-width: 1024px) {
 
-	.wp-block-columns.is-style-project .wp-block-column:not(:first-child) {
+	.wp-block-columns.is-style-project > .wp-block-column:first-child {
+		padding-right: 32px;
+	}
+	.wp-block-columns.is-style-project > .wp-block-column:not(:first-child) {
 		margin-left: 0;
 	}
-	.wp-block-columns.is-style-project .wp-block-column {
+	.wp-block-columns.is-style-project > .wp-block-column,
+	.wp-block-columns.is-style-project > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] {
 		flex-basis: 100% !important;
 	}
-	.wp-block-columns.is-style-project .wp-block-column:first-of-type {
+	.wp-block-columns.is-style-project > .wp-block-column:first-of-type,
+	.wp-block-columns.is-style-project > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:first-of-type {
 		flex-shrink: 0;
 		flex-basis: auto !important;
-		width: calc( 0.5 * (100vw - calc( 782px - 96px) - 64px)) !important;
+		width: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) !important;
 	}
 }

dalston/sass/_extra-child-theme.scss

@@ -6,7 +6,7 @@
 $spacing_unit: map-deep-get($config-global, "spacing", "unit");
 $spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
 $spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
-$header-css-grid-width: calc( 0.5 * (100vw - #{$content-width-lg} - #{4 * $spacing_unit}) );
+$header-css-grid-width: calc( 0.5 * (100vw - #{$content-width-lg} - #{8 * $spacing_unit}) );
 $primary_color: map-deep-get($config-global, "color", "primary", "default");
 
 a {
@@ -36,7 +36,7 @@ a {
 	}
 
 	@include media(desktop) {
-		width: calc(#{$content-width-flex} - #{$spacing_vertical});
+		width: calc(#{$content-width-flex} - #{2 * $spacing_vertical});
 	}
 }
 
@@ -155,12 +155,29 @@ a {
 	}
 }
 
+@include media(mobile) {
+	.site-header  {
+		.site-title {
+			margin-top: 0;
+			margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+		.site-description {
+			margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+		&[class*="navigation"] {
+			margin-bottom: 0;
+		}
+	}
+}
+
 @include media(desktop) {
 	.site-header {
 		grid-template-columns: $header-css-grid-width auto $header-css-grid-width;
 		grid-template-rows: auto;
 		grid-auto-flow: row;
-		grid-column-gap: $spacing_unit;
+		grid-column-gap: #{2 * $spacing_unit};
 		grid-template-areas:
 			". main-navigation social-navigation"
 			"site-branding site-description social-navigation";
@@ -184,6 +201,7 @@ a {
 
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
+	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
 }
 
 .site-title + .site-description {
@@ -247,8 +265,6 @@ a {
  */
 
 #colophon {
-	@extend %responsive-alignwide;
-	max-width: 100%;
 }
 
 .footer-navigation .footer-menu a {

dalston/style-editor.css

@@ -329,6 +329,7 @@ object {
 .wp-block-cover-image {
 	background-color: black;
 	color: white;
+	min-height: 480px;
 	/* Treating H2 separately to account for legacy /core styles */
 }
 

dalston/style-rtl.css

@@ -1220,6 +1220,7 @@ input.has-focus[type="submit"],
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: black;
+	min-height: 480px;
 	margin: inherit;
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
@@ -3196,7 +3197,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 	width: calc(100% + 256px);
 	max-width: calc(100% - 32px);
 	margin-right: auto;
@@ -3204,35 +3205,35 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
@@ -3435,7 +3436,7 @@ a {
 
 @media only screen and (min-width: 1024px) {
 	#masthead {
-		width: calc(100% - 32px);
+		width: calc(100% - 64px);
 	}
 }
 
@@ -3534,12 +3535,25 @@ a {
 	}
 }
 
+@media only screen and (min-width: 560px) {
+	.site-header .site-title {
+		margin-top: 0;
+		margin-bottom: 32px;
+	}
+	.site-header .site-description {
+		margin-bottom: 32px;
+	}
+	.site-header[class*="navigation"] {
+		margin-bottom: 0;
+	}
+}
+
 @media only screen and (min-width: 1024px) {
 	.site-header {
-		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 64px));
+		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 128px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 128px));
 		grid-template-rows: auto;
 		grid-auto-flow: row;
-		grid-column-gap: 16px;
+		grid-column-gap: 32px;
 		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description social-navigation";
 	}
 }
@@ -3557,6 +3571,7 @@ a {
 
 .site-description {
 	color: #000000;
+	line-height: 1.2;
 }
 
 .site-title + .site-description {
@@ -3615,10 +3630,6 @@ a {
 /**
  * Footer
  */
-#colophon {
-	max-width: 100%;
-}
-
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }

dalston/style.css

@@ -1220,6 +1220,7 @@ input.has-focus[type="submit"],
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: black;
+	min-height: 480px;
 	margin: inherit;
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
@@ -3213,7 +3214,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 	width: calc(100% + 256px);
 	max-width: calc(100% - 32px);
 	margin-left: auto;
@@ -3221,35 +3222,35 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
@@ -3464,7 +3465,7 @@ a {
 
 @media only screen and (min-width: 1024px) {
 	#masthead {
-		width: calc(100% - 32px);
+		width: calc(100% - 64px);
 	}
 }
 
@@ -3563,12 +3564,25 @@ a {
 	}
 }
 
+@media only screen and (min-width: 560px) {
+	.site-header .site-title {
+		margin-top: 0;
+		margin-bottom: 32px;
+	}
+	.site-header .site-description {
+		margin-bottom: 32px;
+	}
+	.site-header[class*="navigation"] {
+		margin-bottom: 0;
+	}
+}
+
 @media only screen and (min-width: 1024px) {
 	.site-header {
-		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 64px));
+		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 128px)) auto calc( 0.5 * (100vw - calc( 782px - 32px) - 128px));
 		grid-template-rows: auto;
 		grid-auto-flow: row;
-		grid-column-gap: 16px;
+		grid-column-gap: 32px;
 		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description social-navigation";
 	}
 }
@@ -3586,6 +3600,7 @@ a {
 
 .site-description {
 	color: #000000;
+	line-height: 1.2;
 }
 
 .site-title + .site-description {
@@ -3644,10 +3659,6 @@ a {
 /**
  * Footer
  */
-#colophon {
-	max-width: 100%;
-}
-
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }