Brompton: Homepage, if first block is full-width + rework header circle

brompton/sass/_extra-child-theme.scss

@@ -7,8 +7,7 @@
 #page {
 	position: relative;
 
-	&:before,
-	&:after {
+	&:before {
 		background: #{map-deep-get($config-global, "color", "foreground", "default")};
 		border-top-left-radius: 200px;
 		border-top-right-radius: 200px;
@@ -18,24 +17,10 @@
 		left: 50%;
 		margin-left: -100px;
 		position: absolute;
-		top: -#{map-deep-get($config-global, "spacing", "vertical")};
+		top: -#{map-deep-get($config-global, "spacing", "vertical") + 5px};
 		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
@@ -50,12 +35,11 @@
 	justify-content: space-between;
 	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")};
+	min-height: #{100 - map-deep-get($config-global, "spacing", "vertical")};
 	padding-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 	position: relative;
 
-	&:before,
-	&:after {
+	&:before {
 		background: #{map-deep-get($config-global, "color", "foreground", "default")};
 		border-bottom-left-radius: 200px;
 		border-bottom-right-radius: 200px;
@@ -65,21 +49,10 @@
 		left: 50%;
 		margin-left: -100px;
 		position: absolute;
-		bottom: -#{map-deep-get($config-global, "spacing", "vertical")};
+		bottom: -#{map-deep-get($config-global, "spacing", "vertical") + 5px};
 		width: 200px;
 	}
 
-	&:after {
-		background: #{map-deep-get($config-global, "color", "primary", "default")};
-		border-bottom-left-radius: 210px;
-		border-bottom-right-radius: 210px;
-		height: 110px;
-		margin-left: -105px;
-		transform: translateY(5px);
-		width: 210px;
-		z-index: -1;
-	}
-
 	a {
 		text-decoration: none;
 	}
@@ -679,3 +652,21 @@ table,
     width: 100%;
   }
 }
+
+// Homepage, if first block is full-width
+.home.hide-homepage-title {
+	#masthead {
+		&:before {
+			z-index: 1;
+		}
+	}
+
+	.entry-content {
+		& > *:first-child {
+			&.alignfull {
+				margin-top: -#{2 * map-deep-get($config-global, "spacing", "vertical")};
+				position: relative;
+			}
+		}
+	}
+}

brompton/style-rtl.css

@@ -2166,6 +2166,11 @@ table th,
 	z-index: 1;
 }
 
+.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
+	cursor: pointer;
+	z-index: 99999;
+}
+
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2178,6 +2183,14 @@ table th,
 		/* Submenu display */
 	}
 	.main-navigation > div > ul li:hover > ul,
+	.main-navigation > div > ul li[focus-within] > ul,
+	.main-navigation > div > ul li ul:hover,
+	.main-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {
@@ -3106,7 +3119,7 @@ table th,
 	position: relative;
 }
 
-#page:before, #page:after {
+#page:before {
 	background: #252E36;
 	border-top-right-radius: 200px;
 	border-top-left-radius: 200px;
@@ -3116,25 +3129,11 @@ table th,
 	right: 50%;
 	margin-right: -100px;
 	position: absolute;
-	top: -32px;
+	top: -37px;
 	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;
@@ -3146,12 +3145,12 @@ table th,
 	justify-content: space-between;
 	margin: 64px 0 32px;
 	max-width: 100vw;
-	min-height: 78px;
+	min-height: 68px;
 	padding-top: 16px;
 	position: relative;
 }
 
-#masthead:before, #masthead:after {
+#masthead:before {
 	background: #252E36;
 	border-bottom-right-radius: 200px;
 	border-bottom-left-radius: 200px;
@@ -3161,21 +3160,10 @@ table th,
 	right: 50%;
 	margin-right: -100px;
 	position: absolute;
-	bottom: -32px;
+	bottom: -37px;
 	width: 200px;
 }
 
-#masthead:after {
-	background: #C04239;
-	border-bottom-right-radius: 210px;
-	border-bottom-left-radius: 210px;
-	height: 110px;
-	margin-right: -105px;
-	transform: translateY(5px);
-	width: 210px;
-	z-index: -1;
-}
-
 #masthead a {
 	text-decoration: none;
 }
@@ -3733,3 +3721,12 @@ table th,
 	margin-bottom: 8px;
 	width: 100%;
 }
+
+.home.hide-homepage-title #masthead:before {
+	z-index: 1;
+}
+
+.home.hide-homepage-title .entry-content > *:first-child.alignfull {
+	margin-top: -64px;
+	position: relative;
+}

brompton/style.css

@@ -2176,11 +2176,6 @@ table th,
 	z-index: 99999;
 }
 
-.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
-	cursor: pointer;
-	z-index: 99999;
-}
-
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2201,14 +2196,6 @@ table th,
 		display: block;
 	}
 	.main-navigation > div > ul li:hover > ul,
-	.main-navigation > div > ul li[focus-within] > ul,
-	.main-navigation > div > ul li ul:hover,
-	.main-navigation > div > ul li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
-	}
-	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {
@@ -3137,7 +3124,7 @@ table th,
 	position: relative;
 }
 
-#page:before, #page:after {
+#page:before {
 	background: #252E36;
 	border-top-left-radius: 200px;
 	border-top-right-radius: 200px;
@@ -3147,25 +3134,11 @@ table th,
 	left: 50%;
 	margin-left: -100px;
 	position: absolute;
-	top: -32px;
+	top: -37px;
 	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;
@@ -3177,12 +3150,12 @@ table th,
 	justify-content: space-between;
 	margin: 64px 0 32px;
 	max-width: 100vw;
-	min-height: 78px;
+	min-height: 68px;
 	padding-top: 16px;
 	position: relative;
 }
 
-#masthead:before, #masthead:after {
+#masthead:before {
 	background: #252E36;
 	border-bottom-left-radius: 200px;
 	border-bottom-right-radius: 200px;
@@ -3192,21 +3165,10 @@ table th,
 	left: 50%;
 	margin-left: -100px;
 	position: absolute;
-	bottom: -32px;
+	bottom: -37px;
 	width: 200px;
 }
 
-#masthead:after {
-	background: #C04239;
-	border-bottom-left-radius: 210px;
-	border-bottom-right-radius: 210px;
-	height: 110px;
-	margin-left: -105px;
-	transform: translateY(5px);
-	width: 210px;
-	z-index: -1;
-}
-
 #masthead a {
 	text-decoration: none;
 }
@@ -3764,3 +3726,12 @@ table th,
 	margin-bottom: 8px;
 	width: 100%;
 }
+
+.home.hide-homepage-title #masthead:before {
+	z-index: 1;
+}
+
+.home.hide-homepage-title .entry-content > *:first-child.alignfull {
+	margin-top: -64px;
+	position: relative;
+}