Dalston: Add block extends for Cover and Columns blocks, Clean up header styles

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

@@ -0,0 +1,64 @@
+/* Full Bleed Columns */
+.wp-block-columns.is-style-full-bleed {
+
+}
+
+.wp-block-columns.is-style-full-bleed.alignfull {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-columns.is-style-full-bleed .wp-block-column:not(:last-child) {
+    margin-bottom: 0;
+}
+
+@media (min-width: 600px) {
+
+	.wp-block-columns.is-style-full-bleed .wp-block-column {
+		flex-basis: 50%;
+	}
+
+	.wp-block-columns.is-style-full-bleed .wp-block-column:nth-child(2n) {
+		margin-left: 0;
+	}
+}
+
+@media (min-width: 782px) {
+
+	.wp-block-columns.is-style-full-bleed .wp-block-column:not(:first-child) {
+		margin-left: 0;
+	}
+}
+
+/* Remove gutters */
+[data-type="core/columns"][data-align=full] .wp-block-columns.is-style-full-bleed > .editor-inner-blocks {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+@media (min-width: 600px) {
+	[data-type="core/columns"][data-align=full] .wp-block-columns.is-style-full-bleed > .editor-inner-blocks {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+@media (min-width: 600px) {
+	.wp-block-columns.is-style-full-bleed > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:nth-child(2n) {
+		margin-left: 0;
+	}
+}
+
+@media (min-width: 782px) {
+	.wp-block-columns.is-style-full-bleed > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:not(:first-child) {
+		margin-left: 0;
+	}
+}
+
+@media (min-width: 600px) {
+	.wp-block-columns.is-style-full-bleed > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] {
+		flex-basis: calc(50% - 28px);
+		margin-left: 14px;
+		margin-right: 14px;
+	}
+}

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

@@ -0,0 +1,6 @@
+( function( blocks ) {
+	blocks.registerBlockStyle( 'core/columns', {
+		name: 'full-bleed',
+		label: 'Full Bleed'
+	} );
+}( window.wp.blocks ) );

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

@@ -1,15 +1,77 @@
-.wp-block-cover.is-style-hover-reveal.has-background-dim:before {
-	opacity: 0;
+/* Inner Container */
+
+.wp-block-cover.is-style-hover-reveal {
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+.wp-block-cover.is-style-hover-reveal a:hover,
+.wp-block-cover.is-style-hover-reveal a:active {
+	color: currentColor;
+	text-decoration: underline;
 }
 
-.wp-block-cover.is-style-hover-reveal.wp-block-cover__inner-container {
+.wp-block-cover.is-style-hover-reveal .wp-block-cover__inner-container {
 	opacity: 0;
+	-webkit-transition: opacity 0.2s ease-in-out;
+	-moz-transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.2s ease-in-out;
 }
 
 .wp-block-cover.is-style-hover-reveal:hover .wp-block-cover__inner-container {
 	opacity: 1;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before {
+/* Dim */
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim:before {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s ease-in-out;
+	-moz-transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.2s ease-in-out;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before {
+	opacity: 0;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before {
+	opacity: .1;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before {
+	opacity: .2;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before {
+	opacity: .3;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before {
+	opacity: .4;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before {
+	opacity: .5;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before {
+	opacity: .6;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before {
+	opacity: .7;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before {
+	opacity: .8;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before {
+	opacity: .9;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before {
 	opacity: 1;
 }

dalston/functions.php

@@ -180,6 +180,7 @@ add_action( 'enqueue_block_editor_assets', 'dalston_editor_styles' );
  */
 function dalston_block_extends() {
 
+	// Cover Block Tweaks
 	wp_enqueue_script( 'dalston-extend-cover-block',
 		get_stylesheet_directory_uri() . '/block-extends/extend-cover-block.js',
 		array( 'wp-blocks' )
@@ -188,5 +189,15 @@ function dalston_block_extends() {
 	wp_enqueue_style( 'dalston-extend-cover-block-style',
 		get_stylesheet_directory_uri() . '/block-extends/extend-cover-block.css'
 	);
+
+	// Columns Block Tweaks
+	wp_enqueue_script( 'dalston-extend-columns-block',
+		get_stylesheet_directory_uri() . '/block-extends/extend-columns-block.js',
+		array( 'wp-blocks' )
+	);
+
+	wp_enqueue_style( 'dalston-extend-cover-columns-style',
+		get_stylesheet_directory_uri() . '/block-extends/extend-columns-block.css'
+	);
 }
 add_action( 'enqueue_block_assets', 'dalston_block_extends' );

dalston/sass/_config-child-theme-deep.scss

@@ -10,9 +10,9 @@
 // Vertical Rhythm Multiplier
 $baseline-unit: 8px;
 
-$typescale-root: 22px; // Set 16px/1em default on html
+$typescale-root: 19px; // Set 16px/1em default on html
 $typescale-base: 1rem; // Set 1em default on body == $typescale-root;
-$typescale-ratio: 1.15; // Run ratio math on 1em == $typescale-base * $typescale-root;
+$typescale-ratio: 1.125; // Run ratio math on 1em == $typescale-base * $typescale-root;
 
 $config-global: (
 
@@ -298,7 +298,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "md"),
+				"size": map-deep-get($config-global, "font", "size", "xl"),
 				"weight": 600,
 				"line-height": 1,
 			),
@@ -308,7 +308,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "secondary"),
-				"size": map-deep-get($config-global, "font", "size", "md"),
+				"size": map-deep-get($config-global, "font", "size", "xl"),
 			),
 		),
 	),

dalston/sass/_extra-child-theme.scss

@@ -188,7 +188,7 @@ a {
  * Content
  */
 .site-main > article > .entry-header {
-	margin: #{3 * $spacing_unit} $spacing_unit $spacing_unit;
+	margin: #{3 * $spacing_unit} 0 $spacing_unit;
 	position: relative;
 }
 
@@ -198,6 +198,16 @@ a {
 	}
 }
 
+.site-main .page-header {
+	margin-top: #{3 * $spacing_unit};
+}
+
+@include media(mobile) {
+	.site-main .page-header {
+		margin-top: #{3 * $spacing_vertical};
+	}
+}
+
 .entry-title {
 	font-size: map-deep-get($config-global, "font", "size", "xxxxl");
 	font-weight: 600;
@@ -232,6 +242,7 @@ a {
 
 #colophon {
 	@extend %responsive-alignwide;
+	max-width: 100%;
 }
 
 .footer-navigation .footer-menu a {

dalston/style-editor.css

@@ -163,7 +163,7 @@ body {
 	color: #1e1e1e;
 	background-color: #FFFFFF;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 22px;
+	font-size: 19px;
 	font-weight: normal;
 	line-height: 1.6;
 	-moz-osx-font-smoothing: grayscale;
@@ -171,7 +171,7 @@ body {
 }
 
 .editor-post-title__block {
-	font-size: 22px;
+	font-size: 19px;
 }
 
 p {
@@ -205,14 +205,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -234,7 +234,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -242,13 +242,13 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	letter-spacing: normal;
 }
 
 figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -329,7 +329,6 @@ object {
 .wp-block-cover-image {
 	background-color: black;
 	color: white;
-	min-height: 480px;
 	/* Treating H2 separately to account for legacy /core styles */
 }
 
@@ -357,7 +356,7 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.01136em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
 	line-height: 1.2;
 	padding: 0;
@@ -392,37 +391,37 @@ object {
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 2.31306em;
+	font-size: 2.02729em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 2.01136em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 1.74901em;
+	font-size: 1.60181em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 1.52087em;
+	font-size: 1.42383em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.3225em;
+	font-size: 1.26562em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.15em;
+	font-size: 1.125em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -437,7 +436,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	font-weight: 600;
 	line-height: 1.2;
 }
@@ -458,7 +457,7 @@ object {
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 }
 
@@ -469,7 +468,7 @@ object {
 
 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	margin: 0;
 }
@@ -523,7 +522,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087em;
+	font-size: 1.42383em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -536,7 +535,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.86957em;
+	font-size: 0.88889em;
 	letter-spacing: normal;
 }
 
@@ -582,7 +581,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087em;
+	font-size: 1.42383em;
 	letter-spacing: normal;
 }
 
@@ -593,7 +592,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.74901em;
+	font-size: 1.60181em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -645,7 +644,7 @@ table th,
 	color: #1e1e1e;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: 600;
-	font-size: 2.01136em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -735,32 +734,32 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.86957em;
+	font-size: 0.88889em;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.15em;
+	font-size: 1.125em;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.3225em;
+	font-size: 1.26562em;
 	line-height: 1.2;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.52087em;
+	font-size: 1.42383em;
 	line-height: 1.2;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: calc(2 * 2.31306em);
+	font-size: calc(2 * 2.02729em);
 	font-weight: 600;
 }
 

dalston/style-rtl.css

@@ -580,14 +580,14 @@ html {
  * HTML resets
  */
 html {
-	font-size: 19.13043px;
+	font-size: 16.88889px;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	line-height: 1.6;
 }
 
 @media only screen and (min-width: 560px) {
 	html {
-		font-size: 22px;
+		font-size: 19px;
 	}
 }
 
@@ -638,7 +638,7 @@ a {
 	clip-path: none;
 	color: #1e1e1e;
 	display: block;
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	font-weight: bold;
 	height: auto;
 	right: 5px;
@@ -915,14 +915,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -944,7 +944,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -952,7 +952,7 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	letter-spacing: normal;
 }
 
@@ -1015,7 +1015,7 @@ input[type=checkbox] + label {
 
 figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1156,7 +1156,7 @@ input.has-focus[type="submit"],
 
 .wp-block-code {
 	color: #1e1e1e;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	padding: 16px;
 	border-color: #CCCCCC;
 }
@@ -1220,7 +1220,6 @@ 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 */
 	/**
@@ -1250,7 +1249,7 @@ input.has-focus[type="submit"],
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.01136rem;
+	font-size: 1.80203rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 	max-width: inherit;
@@ -1327,7 +1326,7 @@ input.has-focus[type="submit"],
 .wp-block-file .wp-block-file__button {
 	background-color: #0073AA;
 	color: #FFFFFF;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	margin-right: 16px;
 	margin-left: 16px;
 }
@@ -1352,7 +1351,7 @@ input.has-focus[type="submit"],
 .wp-block-gallery .blocks-gallery-item figcaption {
 	margin: 0;
 	color: white;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 }
 
 .wp-block-gallery .blocks-gallery-image,
@@ -1411,44 +1410,44 @@ h6, .h6 {
 }
 
 h1, .h1 {
-	font-size: 2.31306rem;
+	font-size: 2.02729rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h2, .h2 {
-	font-size: 2.01136rem;
+	font-size: 1.80203rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h3, .h3 {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h4, .h4 {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h5, .h5 {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h6, .h6 {
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-image figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1477,7 +1476,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	/* Vertical margins logic */
 	margin-top: 32px;
@@ -1498,11 +1497,11 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	margin: 0;
 }
@@ -1527,14 +1526,14 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	font-weight: 600;
 	line-height: 1.2;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	line-height: 1.6;
 }
 
@@ -1545,7 +1544,7 @@ img {
 
 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	margin: 0;
 }
@@ -1699,7 +1698,7 @@ p.has-background {
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: bold;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
@@ -1735,7 +1734,7 @@ p.has-background {
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a {
@@ -1771,7 +1770,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -1784,7 +1783,7 @@ p.has-background {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 	display: block;
 }
@@ -1850,7 +1849,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -1859,7 +1858,7 @@ p.has-background {
 .wp-block-quote cite,
 .wp-block-quote footer {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -1880,7 +1879,7 @@ p.has-background {
 }
 
 .wp-block-quote.is-style-large p, .wp-block-quote.is-large p {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -1891,7 +1890,7 @@ p.has-background {
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -1911,9 +1910,9 @@ hr.wp-block-separator {
 
 hr.wp-block-separator.is-style-dots:before {
 	color: #CCCCCC;
-	font-size: 1.52087rem;
-	letter-spacing: 0.86957rem;
-	padding-right: 0.86957rem;
+	font-size: 1.42383rem;
+	letter-spacing: 0.88889rem;
+	padding-right: 0.88889rem;
 }
 
 .wp-block-jetpack-slideshow ul {
@@ -1961,7 +1960,7 @@ table th,
 
 .wp-block-video figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -2122,7 +2121,7 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .is-regular-text,
@@ -2134,20 +2133,20 @@ table th,
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	line-height: 1.2;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	line-height: 1.2;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: calc(2 * 2.31306rem);
+	font-size: calc(2 * 2.02729rem);
 	font-weight: 600;
 	line-height: 0.66;
 	text-transform: uppercase;
@@ -2293,7 +2292,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2314,7 +2313,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.42383rem;
 }
 
 .main-navigation {
@@ -2508,7 +2507,7 @@ table th,
 	.main-navigation > div > ul > .menu-item-has-children > a::after {
 		content: "\00a0\25BC";
 		display: inline-block;
-		font-size: 0.75614rem;
+		font-size: 0.79012rem;
 		height: inherit;
 		width: inherit;
 	}
@@ -2570,7 +2569,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -2644,7 +2643,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	font-weight: 600;
 	padding: 16px;
 	color: currentColor;
@@ -2659,7 +2658,7 @@ table th,
 }
 
 .entry-title {
-	font-size: 2.01136rem;
+	font-size: 1.80203rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -2669,7 +2668,7 @@ table th,
 	color: #767676;
 	clear: both;
 	float: none;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	display: block;
 }
 
@@ -2768,17 +2767,17 @@ table th,
 }
 
 .author-bio .author-title {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 }
 
 /* Next/Previous navigation */
 .post-navigation .meta-nav {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .post-navigation .post-title {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	font-weight: 600;
 }
 
@@ -2805,7 +2804,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
 	padding-left: calc(0.66 * 16px);
@@ -2853,12 +2852,12 @@ table th,
  * Comment Title
  */
 .comments-title {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 }
 
 .comment-reply-title {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -2960,7 +2959,7 @@ table th,
 
 .comment-metadata,
 .reply {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	line-height: 1.2;
 }
 
@@ -3088,7 +3087,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	font-weight: 600;
 }
 
@@ -3120,13 +3119,13 @@ img#wpstats {
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: bold;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
 
 .page-title {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 }
 
 /**
@@ -3564,7 +3563,7 @@ a {
  * Content
  */
 .site-main > article > .entry-header {
-	margin: 48px 16px 16px;
+	margin: 48px 0 16px;
 	position: relative;
 }
 
@@ -3574,8 +3573,18 @@ a {
 	}
 }
 
+.site-main .page-header {
+	margin-top: 48px;
+}
+
+@media only screen and (min-width: 560px) {
+	.site-main .page-header {
+		margin-top: 96px;
+	}
+}
+
 .entry-title {
-	font-size: 2.31306rem;
+	font-size: 2.02729rem;
 	font-weight: 600;
 }
 
@@ -3602,6 +3611,10 @@ a {
 /**
  * Footer
  */
+#colophon {
+	max-width: 100%;
+}
+
 .footer-navigation .footer-menu a {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 }

dalston/style.css

@@ -580,14 +580,14 @@ html {
  * HTML resets
  */
 html {
-	font-size: 19.13043px;
+	font-size: 16.88889px;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	line-height: 1.6;
 }
 
 @media only screen and (min-width: 560px) {
 	html {
-		font-size: 22px;
+		font-size: 19px;
 	}
 }
 
@@ -638,7 +638,7 @@ a {
 	clip-path: none;
 	color: #1e1e1e;
 	display: block;
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	font-weight: bold;
 	height: auto;
 	left: 5px;
@@ -915,14 +915,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -944,7 +944,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -952,7 +952,7 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	letter-spacing: normal;
 }
 
@@ -1015,7 +1015,7 @@ input[type=checkbox] + label {
 
 figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1156,7 +1156,7 @@ input.has-focus[type="submit"],
 
 .wp-block-code {
 	color: #1e1e1e;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	padding: 16px;
 	border-color: #CCCCCC;
 }
@@ -1220,7 +1220,6 @@ 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 */
 	/**
@@ -1250,7 +1249,7 @@ input.has-focus[type="submit"],
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.01136rem;
+	font-size: 1.80203rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 	max-width: inherit;
@@ -1327,7 +1326,7 @@ input.has-focus[type="submit"],
 .wp-block-file .wp-block-file__button {
 	background-color: #0073AA;
 	color: #FFFFFF;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	margin-left: 16px;
 	margin-right: 16px;
 }
@@ -1352,7 +1351,7 @@ input.has-focus[type="submit"],
 .wp-block-gallery .blocks-gallery-item figcaption {
 	margin: 0;
 	color: white;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 }
 
 .wp-block-gallery .blocks-gallery-image,
@@ -1411,44 +1410,44 @@ h6, .h6 {
 }
 
 h1, .h1 {
-	font-size: 2.31306rem;
+	font-size: 2.02729rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h2, .h2 {
-	font-size: 2.01136rem;
+	font-size: 1.80203rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h3, .h3 {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h4, .h4 {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h5, .h5 {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 h6, .h6 {
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
 
 .wp-block-image figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1477,7 +1476,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	/* Vertical margins logic */
 	margin-top: 32px;
@@ -1498,11 +1497,11 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	margin: 0;
 }
@@ -1527,14 +1526,14 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	font-weight: 600;
 	line-height: 1.2;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	line-height: 1.6;
 }
 
@@ -1545,7 +1544,7 @@ img {
 
 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1.6;
 	margin: 0;
 }
@@ -1699,7 +1698,7 @@ p.has-background {
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: bold;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
@@ -1735,7 +1734,7 @@ p.has-background {
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a {
@@ -1771,7 +1770,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -1784,7 +1783,7 @@ p.has-background {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 	display: block;
 }
@@ -1850,7 +1849,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -1859,7 +1858,7 @@ p.has-background {
 .wp-block-quote cite,
 .wp-block-quote footer {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -1880,7 +1879,7 @@ p.has-background {
 }
 
 .wp-block-quote.is-style-large p, .wp-block-quote.is-large p {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -1891,7 +1890,7 @@ p.has-background {
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
 	color: #767676;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -1911,9 +1910,9 @@ hr.wp-block-separator {
 
 hr.wp-block-separator.is-style-dots:before {
 	color: #CCCCCC;
-	font-size: 1.52087rem;
-	letter-spacing: 0.86957rem;
-	padding-left: 0.86957rem;
+	font-size: 1.42383rem;
+	letter-spacing: 0.88889rem;
+	padding-left: 0.88889rem;
 }
 
 .wp-block-jetpack-slideshow ul {
@@ -1961,7 +1960,7 @@ table th,
 
 .wp-block-video figcaption {
 	color: #767676;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -2127,7 +2126,7 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .is-regular-text,
@@ -2139,20 +2138,20 @@ table th,
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	line-height: 1.2;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	line-height: 1.2;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: calc(2 * 2.31306rem);
+	font-size: calc(2 * 2.02729rem);
 	font-weight: 600;
 	line-height: 0.66;
 	text-transform: uppercase;
@@ -2310,7 +2309,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2331,7 +2330,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.42383rem;
 }
 
 .main-navigation {
@@ -2525,7 +2524,7 @@ table th,
 	.main-navigation > div > ul > .menu-item-has-children > a::after {
 		content: "\00a0\25BC";
 		display: inline-block;
-		font-size: 0.75614rem;
+		font-size: 0.79012rem;
 		height: inherit;
 		width: inherit;
 	}
@@ -2587,7 +2586,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -2661,7 +2660,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	font-weight: 600;
 	padding: 16px;
 	color: currentColor;
@@ -2676,7 +2675,7 @@ table th,
 }
 
 .entry-title {
-	font-size: 2.01136rem;
+	font-size: 1.80203rem;
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -2686,7 +2685,7 @@ table th,
 	color: #767676;
 	clear: both;
 	float: none;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	display: block;
 }
 
@@ -2785,17 +2784,17 @@ table th,
 }
 
 .author-bio .author-title {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 }
 
 /* Next/Previous navigation */
 .post-navigation .meta-nav {
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 }
 
 .post-navigation .post-title {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.3225rem;
+	font-size: 1.26562rem;
 	font-weight: 600;
 }
 
@@ -2822,7 +2821,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
 	padding-right: calc(0.66 * 16px);
@@ -2870,12 +2869,12 @@ table th,
  * Comment Title
  */
 .comments-title {
-	font-size: 1.74901rem;
+	font-size: 1.60181rem;
 	letter-spacing: normal;
 }
 
 .comment-reply-title {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -2977,7 +2976,7 @@ table th,
 
 .comment-metadata,
 .reply {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 	line-height: 1.2;
 }
 
@@ -3105,7 +3104,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.15rem;
+	font-size: 1.125rem;
 	font-weight: 600;
 }
 
@@ -3137,13 +3136,13 @@ img#wpstats {
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: bold;
-	font-size: 0.86957rem;
+	font-size: 0.88889rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
 
 .page-title {
-	font-size: 1.52087rem;
+	font-size: 1.42383rem;
 }
 
 /**
@@ -3593,7 +3592,7 @@ a {
  * Content
  */
 .site-main > article > .entry-header {
-	margin: 48px 16px 16px;
+	margin: 48px 0 16px;
 	position: relative;
 }
 
@@ -3603,8 +3602,18 @@ a {
 	}
 }
 
+.site-main .page-header {
+	margin-top: 48px;
+}
+
+@media only screen and (min-width: 560px) {
+	.site-main .page-header {
+		margin-top: 96px;
+	}
+}
+
 .entry-title {
-	font-size: 2.31306rem;
+	font-size: 2.02729rem;
 	font-weight: 600;
 }
 
@@ -3631,6 +3640,10 @@ a {
 /**
  * Footer
  */
+#colophon {
+	max-width: 100%;
+}
+
 .footer-navigation .footer-menu a {
-	font-size: 0.75614rem;
+	font-size: 0.79012rem;
 }