Brompton: Add support for the footer-navigation

brompton/sass/_extra-child-theme.scss

@@ -459,6 +459,44 @@ table,
 			z-index: -1;
 		}
 	}
+
+	.footer-navigation {
+		background: #{map-deep-get($config-global, "color", "foreground", "default")};
+		border-top: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
+		display: block;
+		margin-bottom: 0;
+		padding: #{0.5 * map-deep-get($config-global, "spacing", "vertical")} #{map-deep-get($config-global, "spacing", "horizontal")};
+		position: relative;
+		text-align: center;
+		text-transform: uppercase;
+		z-index: 1;
+
+		@extend %responsive-width-full;
+
+		@include media(tablet) {
+			flex: 1 100%;
+			order: 1;
+
+			.footer-menu {
+				justify-content: center;
+			}
+		}
+
+		a {
+			text-decoration: none;
+		}
+
+		& + .site-info {
+			border-top: 0;
+			margin-top: 0;
+			min-height: 0;
+			padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")} #{0.666 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+		& > div {
+			display: block;
+		}
+	}
 }
 
 // Comments

brompton/style-rtl.css

@@ -2166,11 +2166,6 @@ 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;
@@ -2183,14 +2178,6 @@ 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 {
@@ -2979,7 +2966,7 @@ table th,
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
@@ -2987,7 +2974,7 @@ table th,
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
@@ -2996,7 +2983,7 @@ table th,
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
@@ -3005,7 +2992,7 @@ table th,
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3014,7 +3001,7 @@ table th,
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3023,7 +3010,7 @@ table th,
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3410,6 +3397,10 @@ table th,
 	text-decoration: none;
 }
 
+.a8c-posts-list .a8c-posts-list-item__meta a:active, .a8c-posts-list .a8c-posts-list-item__meta a:focus, .a8c-posts-list .a8c-posts-list-item__meta a:hover {
+	color: #C04239;
+}
+
 .a8c-posts-list .a8c-posts-list-item__excerpt {
 	text-align: right;
 }
@@ -3526,6 +3517,43 @@ table th,
 	z-index: -1;
 }
 
+#colophon .footer-navigation {
+	background: #252E36;
+	border-top: 5px solid #C04239;
+	display: block;
+	margin-bottom: 0;
+	padding: 16px 16px;
+	position: relative;
+	text-align: center;
+	text-transform: uppercase;
+	z-index: 1;
+}
+
+@media only screen and (min-width: 640px) {
+	#colophon .footer-navigation {
+		flex: 1 100%;
+		order: 1;
+	}
+	#colophon .footer-navigation .footer-menu {
+		justify-content: center;
+	}
+}
+
+#colophon .footer-navigation a {
+	text-decoration: none;
+}
+
+#colophon .footer-navigation + .site-info {
+	border-top: 0;
+	margin-top: 0;
+	min-height: 0;
+	padding: 0 16px 21.312px;
+}
+
+#colophon .footer-navigation > div {
+	display: block;
+}
+
 .comments-area .comment-list,
 .comments-area .children {
 	border: 0;

brompton/style.css

@@ -2176,6 +2176,11 @@ 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;
@@ -2196,6 +2201,14 @@ 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 {
@@ -2984,7 +2997,7 @@ table th,
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
@@ -2992,7 +3005,7 @@ table th,
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
@@ -3001,7 +3014,7 @@ table th,
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
@@ -3010,7 +3023,7 @@ table th,
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3019,7 +3032,7 @@ table th,
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3028,7 +3041,7 @@ table th,
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #colophon .site-info, #colophon .footer-navigation {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3535,6 +3548,43 @@ table th,
 	z-index: -1;
 }
 
+#colophon .footer-navigation {
+	background: #252E36;
+	border-top: 5px solid #C04239;
+	display: block;
+	margin-bottom: 0;
+	padding: 16px 16px;
+	position: relative;
+	text-align: center;
+	text-transform: uppercase;
+	z-index: 1;
+}
+
+@media only screen and (min-width: 640px) {
+	#colophon .footer-navigation {
+		flex: 1 100%;
+		order: 1;
+	}
+	#colophon .footer-navigation .footer-menu {
+		justify-content: center;
+	}
+}
+
+#colophon .footer-navigation a {
+	text-decoration: none;
+}
+
+#colophon .footer-navigation + .site-info {
+	border-top: 0;
+	margin-top: 0;
+	min-height: 0;
+	padding: 0 16px 21.312px;
+}
+
+#colophon .footer-navigation > div {
+	display: block;
+}
+
 .comments-area .comment-list,
 .comments-area .children {
 	border: 0;