Brompton: Rework header to add circle underneath

brompton/sass/_extra-child-theme.scss

@@ -3,6 +3,41 @@
  */
 // @import "";
 
+// Pgae
+#page {
+	position: relative;
+
+	&:before,
+	&:after {
+		background: #{map-deep-get($config-global, "color", "foreground", "default")};
+		border-top-left-radius: 200px;
+		border-top-right-radius: 200px;
+		content: "";
+		display: block;
+		height: 100px;
+		left: 50%;
+		margin-left: -100px;
+		position: absolute;
+		top: -#{map-deep-get($config-global, "spacing", "vertical")};
+		width: 200px;
+	}
+
+	&:before {
+		z-index: 1;
+	}
+
+	&:after {
+		background: #{map-deep-get($config-global, "color", "primary", "default")};
+		border-top-left-radius: 210px;
+		border-top-right-radius: 210px;
+		height: 110px;
+		margin-left: -105px;
+		transform: translateY(-5px);
+		width: 210px;
+		z-index: -1;
+	}
+}
+
 // Header
 #masthead {
 	align-content: center;
@@ -13,7 +48,7 @@
 	display: flex;
 	flex-flow: column wrap;
 	justify-content: space-between;
-	margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+	margin: #{2 * map-deep-get($config-global, "spacing", "vertical")} 0 #{map-deep-get($config-global, "spacing", "vertical")};
 	max-width: 100vw;
 	min-height: #{110 - map-deep-get($config-global, "spacing", "vertical")};
 	padding-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
@@ -22,25 +57,25 @@
 	&:before,
 	&:after {
 		background: #{map-deep-get($config-global, "color", "foreground", "default")};
-		border-top-left-radius: 200px;
-		border-top-right-radius: 200px;
+		border-bottom-left-radius: 200px;
+		border-bottom-right-radius: 200px;
 		content: "";
 		display: block;
 		height: 100px;
 		left: 50%;
 		margin-left: -100px;
 		position: absolute;
-		top: -#{map-deep-get($config-global, "spacing", "vertical")};
+		bottom: -#{map-deep-get($config-global, "spacing", "vertical")};
 		width: 200px;
 	}
 
 	&:after {
 		background: #{map-deep-get($config-global, "color", "primary", "default")};
-		border-top-left-radius: 210px;
-		border-top-right-radius: 210px;
+		border-bottom-left-radius: 210px;
+		border-bottom-right-radius: 210px;
 		height: 110px;
 		margin-left: -105px;
-		transform: translateY(-5px);
+		transform: translateY(5px);
 		width: 210px;
 		z-index: -1;
 	}
@@ -68,6 +103,7 @@
 		order: 3;
 		position: relative;
 		text-align: center;
+		z-index: 2;
 
 		& > div > ul {
 			text-align: left;
@@ -77,6 +113,7 @@
 	.social-navigation {
 		order: 2;
 		position: relative;
+		z-index: 2;
 	}
 
   @include media(mobile) {
@@ -189,11 +226,6 @@
 	justify-content: center;
 }
 
-// Main
-#main {
-	padding-top: 0;
-}
-
 // Hentry
 .entry-header {
 	.entry-meta {
@@ -207,10 +239,6 @@
 		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 		text-transform: uppercase;
 
-		@include media(mobile) {
-			margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
-		}
-
 		& + .entry-title {
 			margin-top: 0;
 		}
@@ -238,7 +266,8 @@
 }
 
 article .entry-header .entry-title,
-.page-title {
+.page-title,
+.a8c-posts-list .a8c-posts-list-item__title {
 	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 
   a {
@@ -251,10 +280,6 @@ article .entry-header .entry-title,
       color: #{map-deep-get($config-global, "color", "primary", "default")};
     }
   }
-
-	@include media(mobile) {
-		margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
-	}
 }
 
 // Cover & Hero block
@@ -300,24 +325,17 @@ table,
 	text-align: center;
 
 	.a8c-posts-list-item__featured {
+		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+
 		span {
 			border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
 			display: inline-block;
 			font-weight: 900;
 			text-transform: uppercase;
 		}
-	}
 
-	.a8c-posts-list-item__title {
-		a {
-			color: inherit;
-			text-decoration: none;
-
-			&:active,
-			&:focus,
-			&:hover {
-				color: #{map-deep-get($config-global, "color", "primary", "default")};
-			}
+		& + .a8c-posts-list-item__title {
+			margin-top: 0;
 		}
 	}
 

brompton/style-rtl.css

@@ -3115,6 +3115,39 @@ table th,
 /**
  * Extra Child Theme Styles
  */
+#page {
+	position: relative;
+}
+
+#page:before, #page:after {
+	background: #252E36;
+	border-top-right-radius: 200px;
+	border-top-left-radius: 200px;
+	content: "";
+	display: block;
+	height: 100px;
+	right: 50%;
+	margin-right: -100px;
+	position: absolute;
+	top: -32px;
+	width: 200px;
+}
+
+#page:before {
+	z-index: 1;
+}
+
+#page:after {
+	background: #C04239;
+	border-top-right-radius: 210px;
+	border-top-left-radius: 210px;
+	height: 110px;
+	margin-right: -105px;
+	transform: translateY(-5px);
+	width: 210px;
+	z-index: -1;
+}
+
 #masthead {
 	align-content: center;
 	align-items: center;
@@ -3124,7 +3157,7 @@ table th,
 	display: flex;
 	flex-flow: column wrap;
 	justify-content: space-between;
-	margin-top: 64px;
+	margin: 64px 0 32px;
 	max-width: 100vw;
 	min-height: 78px;
 	padding-top: 16px;
@@ -3133,25 +3166,25 @@ table th,
 
 #masthead:before, #masthead:after {
 	background: #252E36;
-	border-top-right-radius: 200px;
-	border-top-left-radius: 200px;
+	border-bottom-right-radius: 200px;
+	border-bottom-left-radius: 200px;
 	content: "";
 	display: block;
 	height: 100px;
 	right: 50%;
 	margin-right: -100px;
 	position: absolute;
-	top: -32px;
+	bottom: -32px;
 	width: 200px;
 }
 
 #masthead:after {
 	background: #C04239;
-	border-top-right-radius: 210px;
-	border-top-left-radius: 210px;
+	border-bottom-right-radius: 210px;
+	border-bottom-left-radius: 210px;
 	height: 110px;
 	margin-right: -105px;
-	transform: translateY(-5px);
+	transform: translateY(5px);
 	width: 210px;
 	z-index: -1;
 }
@@ -3179,6 +3212,7 @@ table th,
 	order: 3;
 	position: relative;
 	text-align: center;
+	z-index: 2;
 }
 
 #masthead .main-navigation > div > ul {
@@ -3188,6 +3222,7 @@ table th,
 #masthead .social-navigation {
 	order: 2;
 	position: relative;
+	z-index: 2;
 }
 
 @media only screen and (min-width: 560px) {
@@ -3283,10 +3318,6 @@ table th,
 	justify-content: center;
 }
 
-#main {
-	padding-top: 0;
-}
-
 .entry-header .entry-meta {
 	display: none;
 }
@@ -3299,12 +3330,6 @@ table th,
 	text-transform: uppercase;
 }
 
-@media only screen and (min-width: 560px) {
-	.entry-header .sticky-post {
-		margin-top: 64px;
-	}
-}
-
 .entry-header .sticky-post + .entry-title {
 	margin-top: 0;
 }
@@ -3328,12 +3353,14 @@ table th,
 }
 
 article .entry-header .entry-title,
-.page-title {
+.page-title,
+.a8c-posts-list .a8c-posts-list-item__title {
 	margin-top: 32px;
 }
 
 article .entry-header .entry-title a,
-.page-title a {
+.page-title a,
+.a8c-posts-list .a8c-posts-list-item__title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3341,17 +3368,13 @@ article .entry-header .entry-title a,
 article .entry-header .entry-title a:active, article .entry-header .entry-title a:focus, article .entry-header .entry-title a:hover,
 .page-title a:active,
 .page-title a:focus,
-.page-title a:hover {
+.page-title a:hover,
+.a8c-posts-list .a8c-posts-list-item__title a:active,
+.a8c-posts-list .a8c-posts-list-item__title a:focus,
+.a8c-posts-list .a8c-posts-list-item__title a:hover {
 	color: #C04239;
 }
 
-@media only screen and (min-width: 560px) {
-	article .entry-header .entry-title,
-	.page-title {
-		margin-top: 64px;
-	}
-}
-
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-coblocks-hero .wp-block-coblocks-hero__box > * {
 	margin-top: 21.312px;
@@ -3391,6 +3414,10 @@ table th,
 	text-align: center;
 }
 
+.a8c-posts-list .a8c-posts-list-item__featured {
+	margin-top: 32px;
+}
+
 .a8c-posts-list .a8c-posts-list-item__featured span {
 	border-radius: 4px;
 	display: inline-block;
@@ -3398,13 +3425,8 @@ table th,
 	text-transform: uppercase;
 }
 
-.a8c-posts-list .a8c-posts-list-item__title a {
-	color: inherit;
-	text-decoration: none;
-}
-
-.a8c-posts-list .a8c-posts-list-item__title a:active, .a8c-posts-list .a8c-posts-list-item__title a:focus, .a8c-posts-list .a8c-posts-list-item__title a:hover {
-	color: #C04239;
+.a8c-posts-list .a8c-posts-list-item__featured + .a8c-posts-list-item__title {
+	margin-top: 0;
 }
 
 .a8c-posts-list .a8c-posts-list-item__meta a {

brompton/style.css

@@ -3120,6 +3120,39 @@ table th,
 /**
  * Extra Child Theme Styles
  */
+#page {
+	position: relative;
+}
+
+#page:before, #page:after {
+	background: #252E36;
+	border-top-left-radius: 200px;
+	border-top-right-radius: 200px;
+	content: "";
+	display: block;
+	height: 100px;
+	left: 50%;
+	margin-left: -100px;
+	position: absolute;
+	top: -32px;
+	width: 200px;
+}
+
+#page:before {
+	z-index: 1;
+}
+
+#page:after {
+	background: #C04239;
+	border-top-left-radius: 210px;
+	border-top-right-radius: 210px;
+	height: 110px;
+	margin-left: -105px;
+	transform: translateY(-5px);
+	width: 210px;
+	z-index: -1;
+}
+
 #masthead {
 	align-content: center;
 	align-items: center;
@@ -3129,7 +3162,7 @@ table th,
 	display: flex;
 	flex-flow: column wrap;
 	justify-content: space-between;
-	margin-top: 64px;
+	margin: 64px 0 32px;
 	max-width: 100vw;
 	min-height: 78px;
 	padding-top: 16px;
@@ -3138,25 +3171,25 @@ table th,
 
 #masthead:before, #masthead:after {
 	background: #252E36;
-	border-top-left-radius: 200px;
-	border-top-right-radius: 200px;
+	border-bottom-left-radius: 200px;
+	border-bottom-right-radius: 200px;
 	content: "";
 	display: block;
 	height: 100px;
 	left: 50%;
 	margin-left: -100px;
 	position: absolute;
-	top: -32px;
+	bottom: -32px;
 	width: 200px;
 }
 
 #masthead:after {
 	background: #C04239;
-	border-top-left-radius: 210px;
-	border-top-right-radius: 210px;
+	border-bottom-left-radius: 210px;
+	border-bottom-right-radius: 210px;
 	height: 110px;
 	margin-left: -105px;
-	transform: translateY(-5px);
+	transform: translateY(5px);
 	width: 210px;
 	z-index: -1;
 }
@@ -3184,6 +3217,7 @@ table th,
 	order: 3;
 	position: relative;
 	text-align: center;
+	z-index: 2;
 }
 
 #masthead .main-navigation > div > ul {
@@ -3193,6 +3227,7 @@ table th,
 #masthead .social-navigation {
 	order: 2;
 	position: relative;
+	z-index: 2;
 }
 
 @media only screen and (min-width: 560px) {
@@ -3288,10 +3323,6 @@ table th,
 	justify-content: center;
 }
 
-#main {
-	padding-top: 0;
-}
-
 .entry-header .entry-meta {
 	display: none;
 }
@@ -3304,12 +3335,6 @@ table th,
 	text-transform: uppercase;
 }
 
-@media only screen and (min-width: 560px) {
-	.entry-header .sticky-post {
-		margin-top: 64px;
-	}
-}
-
 .entry-header .sticky-post + .entry-title {
 	margin-top: 0;
 }
@@ -3333,12 +3358,14 @@ table th,
 }
 
 article .entry-header .entry-title,
-.page-title {
+.page-title,
+.a8c-posts-list .a8c-posts-list-item__title {
 	margin-top: 32px;
 }
 
 article .entry-header .entry-title a,
-.page-title a {
+.page-title a,
+.a8c-posts-list .a8c-posts-list-item__title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3346,17 +3373,13 @@ article .entry-header .entry-title a,
 article .entry-header .entry-title a:active, article .entry-header .entry-title a:focus, article .entry-header .entry-title a:hover,
 .page-title a:active,
 .page-title a:focus,
-.page-title a:hover {
+.page-title a:hover,
+.a8c-posts-list .a8c-posts-list-item__title a:active,
+.a8c-posts-list .a8c-posts-list-item__title a:focus,
+.a8c-posts-list .a8c-posts-list-item__title a:hover {
 	color: #C04239;
 }
 
-@media only screen and (min-width: 560px) {
-	article .entry-header .entry-title,
-	.page-title {
-		margin-top: 64px;
-	}
-}
-
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-coblocks-hero .wp-block-coblocks-hero__box > * {
 	margin-top: 21.312px;
@@ -3396,6 +3419,10 @@ table th,
 	text-align: center;
 }
 
+.a8c-posts-list .a8c-posts-list-item__featured {
+	margin-top: 32px;
+}
+
 .a8c-posts-list .a8c-posts-list-item__featured span {
 	border-radius: 4px;
 	display: inline-block;
@@ -3403,13 +3430,8 @@ table th,
 	text-transform: uppercase;
 }
 
-.a8c-posts-list .a8c-posts-list-item__title a {
-	color: inherit;
-	text-decoration: none;
-}
-
-.a8c-posts-list .a8c-posts-list-item__title a:active, .a8c-posts-list .a8c-posts-list-item__title a:focus, .a8c-posts-list .a8c-posts-list-item__title a:hover {
-	color: #C04239;
+.a8c-posts-list .a8c-posts-list-item__featured + .a8c-posts-list-item__title {
+	margin-top: 0;
 }
 
 .a8c-posts-list .a8c-posts-list-item__meta a {