adapted single post header to fit design for mobile

quadrat/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="10" viewBox="0 0 23 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1829 9.09321L11.5006 9.35475L11.8184 9.09321L22.2055 0.543749C22.2735 0.487809 22.4081 0.485515 22.4816 0.536867L11.6408 9.45972C11.5749 9.5139 11.4291 9.51327 11.364 9.45874L11.3641 9.45873L11.3604 9.45575L0.522261 0.535065C0.596241 0.485575 0.728516 0.48847 0.795677 0.543748L11.1829 9.09321ZM0.499887 0.530792L0.49716 0.527479L0.499887 0.530792Z" stroke="#FFD1D1"/>
+</svg>

quadrat/assets/theme.css

@@ -485,6 +485,41 @@ a:active, a:focus {
 	color: var(--wp--custom--color--foreground);
 }
 
+@media (max-width: 479px) {
+	.post-header {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+	.post-header::after {
+		content: "";
+		height: 10px;
+		width: 23px;
+		-webkit-mask-image: url(arrow.svg);
+		        mask-image: url(arrow.svg);
+		-webkit-mask-repeat: no-repeat;
+		        mask-repeat: no-repeat;
+		background-color: var(--wp--custom--color--foreground);
+		transform: translateX(-50%);
+		position: absolute;
+		bottom: 1.5rem;
+		left: 50%;
+	}
+}
+
+@media (max-width: 479px) {
+	.single.admin-bar .post-header {
+		min-height: calc( 100vh - 46px);
+	}
+	.single .site-header {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+}
+
 .site-footer.wp-block-group {
 	position: relative;
 	overflow: visible;

quadrat/block-template-parts/single.html

@@ -1,3 +1,6 @@
+<!-- wp:group {"className":"post-header"} -->
+<div class="wp-block-group post-header">
+
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"170px"}}},"className":"post-meta"} -->
 <div class="wp-block-group post-meta" style="padding-top:170px">
 	<!-- wp:post-date {"textAlign":"center","fontSize":"tiny"} /-->
@@ -5,10 +8,8 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"60px","left":"20px"}}}} -->
-<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:30px;padding-left:20px">
-	<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
-</div>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"60px","left":"20px"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:60px;padding-left:20px"><!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:post-featured-image {"align":"full"} /-->
@@ -17,6 +18,9 @@
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
+</div>
+<!-- /wp:group -->
+
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
 <!-- wp:spacer {"height":150} -->

quadrat/sass/_post-header.scss

@@ -0,0 +1,38 @@
+.post-header {
+	@include break-mobile-only() {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		&::after {
+			content: "";
+			height: 10px;
+			width: 23px;
+			mask-image: url(arrow.svg);
+			mask-repeat: no-repeat;
+			background-color: var(--wp--custom--color--foreground);
+			transform: translateX(-50%);
+			position: absolute;
+			bottom: 1.5rem;
+			left: 50%;
+		}
+	}
+}
+
+@include break-mobile-only() {
+	.single {
+		&.admin-bar {
+			.post-header {
+				min-height: calc( 100vh - 46px );
+			}
+		}
+
+		.site-header{
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+}

quadrat/sass/theme.scss

@@ -19,6 +19,7 @@
 @import "elements/links";
 @import "header";
 @import "meta";
+@import "post-header";
 @import "footer";
 
 .wp-block-post-featured-image {