Brompton: Rework the circle as part of the header

brompton/sass/_extra-child-theme.scss

@@ -15,27 +15,30 @@
 	justify-content: space-between;
 	margin-top: #{5 + map-deep-get($config-global, "spacing", "vertical")};
 	max-width: 100vw;
-	min-height: #{210 - map-deep-get($config-global, "spacing", "vertical")};
+	min-height: #{110 - map-deep-get($config-global, "spacing", "vertical")};
 	padding-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 	position: relative;
 
 	&:before,
 	&:after {
 		background: #{map-deep-get($config-global, "color", "foreground", "default")};
-		border-radius: 50%;
+		border-top-left-radius: 200px;
+		border-top-right-radius: 200px;
 		content: "";
 		display: block;
-		position: absolute;
-		top: -#{map-deep-get($config-global, "spacing", "vertical")};
+		height: 100px;
 		left: 50%;
 		margin-left: -100px;
+		position: absolute;
+		top: -#{map-deep-get($config-global, "spacing", "vertical")};
 		width: 200px;
-		height: 200px;
 	}
 
 	&:after {
 		background: #{map-deep-get($config-global, "color", "primary", "default")};
-		height: 210px;
+		border-top-left-radius: 210px;
+		border-top-right-radius: 210px;
+		height: 110px;
 		margin-left: -105px;
 		transform: translateY(-5px);
 		width: 210px;

brompton/style-rtl.css

@@ -3126,27 +3126,28 @@ table th,
 	justify-content: space-between;
 	margin-top: 37px;
 	max-width: 100vw;
-	min-height: 178px;
+	min-height: 78px;
 	padding-top: 16px;
 	position: relative;
 }
 
 #masthead:before, #masthead:after {
 	background: #252E36;
-	border-radius: 50%;
+	border-top-right-radius: 200px;
+	border-top-left-radius: 200px;
 	content: "";
 	display: block;
-	position: absolute;
-	top: -32px;
+	height: 100px;
 	right: 50%;
 	margin-right: -100px;
+	position: absolute;
+	top: -32px;
 	width: 200px;
-	height: 200px;
 }
 
 #masthead:after {
 	background: #C04239;
-	height: 210px;
+	height: 110px;
 	margin-right: -105px;
 	transform: translateY(-5px);
 	width: 210px;
@@ -3433,6 +3434,7 @@ table th,
 }
 
 #colophon {
+	flex-direction: column;
 	padding-bottom: 5px;
 }
 

brompton/style.css

@@ -3131,27 +3131,30 @@ table th,
 	justify-content: space-between;
 	margin-top: 37px;
 	max-width: 100vw;
-	min-height: 178px;
+	min-height: 78px;
 	padding-top: 16px;
 	position: relative;
 }
 
 #masthead:before, #masthead:after {
 	background: #252E36;
-	border-radius: 50%;
+	border-top-left-radius: 200px;
+	border-top-right-radius: 200px;
 	content: "";
 	display: block;
-	position: absolute;
-	top: -32px;
+	height: 100px;
 	left: 50%;
 	margin-left: -100px;
+	position: absolute;
+	top: -32px;
 	width: 200px;
-	height: 200px;
 }
 
 #masthead:after {
 	background: #C04239;
-	height: 210px;
+	border-top-left-radius: 210px;
+	border-top-right-radius: 210px;
+	height: 110px;
 	margin-left: -105px;
 	transform: translateY(-5px);
 	width: 210px;