Merge pull request #3904 from Automattic/mobile-post-header

Quadrat: mobile post header with featured image

quadrat/assets/theme.css

@@ -642,6 +642,7 @@ textarea:focus {
 @media (max-width: 479px) {
 	.post-meta {
 		padding-top: 0 !important;
+		margin-bottom: -20px;
 	}
 }
 
@@ -693,18 +694,31 @@ textarea:focus {
 	.post-header .wp-block-spacer {
 		display: none;
 	}
-}
-
-@media (max-width: 479px) {
+	.post-header .wp-block-post-featured-image {
+		order: -1;
+		height: 100vh;
+	}
+	.post-header .wp-block-post-featured-image img {
+		-o-object-fit: cover;
+		   object-fit: cover;
+		height: 100%;
+		width: 100%;
+	}
 	.single.admin-bar .post-header {
 		min-height: calc( 100vh - 46px);
 	}
+	.single.admin-bar .wp-block-post-featured-image {
+		height: calc( 100vh - 46px);
+	}
 	.single.admin-bar .site-header {
 		top: 46px;
 	}
 	.single.wp-custom-logo .post-header {
 		padding-top: 150px !important;
 	}
+	.single.wp-custom-logo .wp-block-post-featured-image {
+		margin-top: -150px !important;
+	}
 	.single .site-header {
 		position: absolute;
 		top: 0;

quadrat/sass/_meta.scss

@@ -3,6 +3,7 @@
 	justify-content: center;
 	@include break-mobile-only() {
 		padding-top: 0 !important;
+		margin-bottom: -20px;
 	}
 
 	.wp-block-post-date::before {

quadrat/sass/_post-header.scss

@@ -1,5 +1,7 @@
-.post-header {
-	@include break-mobile-only() {
+$admin-bar: 46px;
+
+@include break-mobile-only() {
+	.post-header {
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
@@ -21,17 +23,29 @@
 		.wp-block-spacer {
 			display: none;
 		}
+
+		.wp-block-post-featured-image {
+			order: -1;
+			height: 100vh;
+			img {
+				object-fit: cover;
+				height: 100%;
+				width: 100%;
+			}
+		}
+
 	}
-}
 
-@include break-mobile-only() {
 	.single {
 		&.admin-bar {
 			.post-header {
-				min-height: calc( 100vh - 46px );
+				min-height: calc( 100vh - #{$admin-bar} );
+			}
+			.wp-block-post-featured-image {
+				height: calc( 100vh - #{$admin-bar} );
 			}
 			.site-header{
-				top: 46px;
+				top: $admin-bar;
 			}
 		}
 
@@ -39,6 +53,9 @@
 			.post-header {
 				padding-top: 150px !important;
 			}
+			.wp-block-post-featured-image {
+				margin-top: -150px !important;
+			}
 		}
 
 		.site-header{