Full Site Editing: Update Navigation Menu style on Varia and Maywood (#1364)

Update the Navigation Menu style in Varia, and via both inheritance and overrides in Maywood.

See: https://github.com/Automattic/wp-calypso/pull/35880

maywood/sass/_full-site-editing-editor.scss

@@ -12,11 +12,35 @@
 		text-align: center;
 	}
 
-	.main-navigation ul {
-		justify-content: center;
+	.main-navigation {
+		text-align: center;
+		ul {
+			justify-content: center;
+			a {
+				font-size: 20px;
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+.site-footer {
+	.main-navigation .footer-menu {
+		justify-content: flex-start;
+		
+		@include media(mobile) {
+			justify-content: center;
+		}
+		@include media(tablet) {
+			justify-content: flex-end;
+		}
+
 		a {
-			font-size: 20px;
+			font-size: 16.6px;
 			text-decoration: none;
+			@include media(mobile-only) {
+				font-size: 13.8px;
+			}
 		}
 	}
-}
+}

maywood/sass/_full-site-editing.scss

@@ -1,8 +1,16 @@
+@import "../../varia/sass/full-site-editing/imports";
+
 .fse-enabled {
 	.site-header.entry-content {
 		margin-bottom: 0;
 		max-width: 100%;
 		padding: 0;
 		width: 100%;
+
+		@include media(mobile-only) {
+			.main-navigation .menu-primary-container {
+				padding: 0 32px;
+			}
+		}
 	}
 }

maywood/sass/style-child-theme-editor.scss

@@ -106,4 +106,4 @@ b, strong {
  * Full Site Editing
  * - Full Site Editing overrides
  */
- @import "full-site-editing-editor";
+@import "full-site-editing-editor";

maywood/style-editor.css

@@ -1269,12 +1269,12 @@ b, strong {
 	color: #685636;
 }
 
-.footer-navigation {
+.footer-navigation, .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -1283,37 +1283,37 @@ b, strong {
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 	color: #686868;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -1321,11 +1321,11 @@ b, strong {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .site-footer .main-navigation .footer-menu a:hover {
 	color: #685636;
 }
 
@@ -1363,6 +1363,98 @@ b, strong {
 	font-size: 15px;
 }
 
+.site-header .main-navigation {
+	/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Block Options
+ */
+}
+
+.site-header .main-navigation button,
+.site-header .main-navigation .button,
+.site-header .main-navigation input[type="submit"],
+.site-header .main-navigation .wp-block-button__link,
+.site-header .main-navigation .wp-block-file__button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: 700;
+	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 0.83333rem;
+	background-color: #897248;
+	border-radius: 5px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before {
+	margin-bottom: -0.12em;
+}
+
+.site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	margin-top: -0.11em;
+}
+
+.site-header .main-navigation button:hover,
+.site-header .main-navigation .button:hover,
+.site-header .main-navigation input:hover[type="submit"],
+.site-header .main-navigation .wp-block-button__link:hover,
+.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
+.site-header .main-navigation .button:focus,
+.site-header .main-navigation input:focus[type="submit"],
+.site-header .main-navigation .wp-block-button__link:focus,
+.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
+.site-header .main-navigation .has-focus.button,
+.site-header .main-navigation input.has-focus[type="submit"],
+.site-header .main-navigation .has-focus.wp-block-button__link,
+.site-header .main-navigation .has-focus.wp-block-file__button {
+	color: white;
+	background-color: #685636;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
+	color: #897248;
+	background: transparent;
+	border: 2px solid currentcolor;
+	padding: 14px 16px;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:focus, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+	color: #685636;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-squared .wp-block-button__link {
+	border-radius: 0;
+}
+
 .site-header .main-navigation a {
 	font-size: 21.6px;
 }
@@ -1373,23 +1465,24 @@ b, strong {
 	}
 }
 
+.site-footer .main-navigation {
+	display: block;
+}
+
+.site-footer .main-navigation .hide-visually,
+.site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
 @media only screen and (max-width: 559px) {
-	.main-navigation {
-		background-color: #897248;
-		border-radius: 5px;
-		color: white;
-		display: inline-block;
-		font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-		font-size: 18px;
-		font-weight: 700;
-		line-height: 1;
-		padding: 16px 16px;
+	.site-footer .main-navigation .menu-primary-container {
+		display: block;
 	}
-	.main-navigation:before {
-		content: "Menu";
+	.site-footer .main-navigation li {
+		width: auto;
 	}
-	.main-navigation:after {
-		content: "+";
+	.site-footer .main-navigation li .sub-menu {
+		display: none;
 	}
 }
 
@@ -1404,6 +1497,10 @@ b, strong {
 	text-align: center;
 }
 
+.site-header .main-navigation {
+	text-align: center;
+}
+
 .site-header .main-navigation ul {
 	justify-content: center;
 }
@@ -1412,3 +1509,30 @@ b, strong {
 	font-size: 20px;
 	text-decoration: none;
 }
+
+.site-footer .main-navigation .footer-menu {
+	justify-content: flex-start;
+}
+
+@media only screen and (min-width: 560px) {
+	.site-footer .main-navigation .footer-menu {
+		justify-content: center;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.site-footer .main-navigation .footer-menu {
+		justify-content: flex-end;
+	}
+}
+
+.site-footer .main-navigation .footer-menu a {
+	font-size: 16.6px;
+	text-decoration: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.site-footer .main-navigation .footer-menu a {
+		font-size: 13.8px;
+	}
+}

maywood/style-rtl.css

@@ -2604,12 +2604,12 @@ table th,
 	color: #685636;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2618,37 +2618,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #686868;
 	margin: 0;
 	padding-right: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -2656,11 +2656,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: #685636;
 }
 
@@ -3768,11 +3768,11 @@ p:not(.site-title) a:hover {
 /**
  * Footer Navigation
  */
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	padding: 0 8px;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	margin-left: -8px;
 }
 
@@ -3780,9 +3780,36 @@ p:not(.site-title) a:hover {
  * Full Site Editing
  * - Full Site Editing overrides
  */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}
+
 .fse-enabled .site-header.entry-content {
 	margin-bottom: 0;
 	max-width: 100%;
 	padding: 0;
 	width: 100%;
 }
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-header.entry-content .main-navigation .menu-primary-container {
+		padding: 0 32px;
+	}
+}

maywood/style.css

@@ -2621,12 +2621,12 @@ table th,
 	color: #685636;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2635,37 +2635,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #686868;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -2673,11 +2673,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: #685636;
 }
 
@@ -3797,11 +3797,11 @@ p:not(.site-title) a:hover {
 /**
  * Footer Navigation
  */
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	padding: 0 8px;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	margin-right: -8px;
 }
 
@@ -3809,9 +3809,36 @@ p:not(.site-title) a:hover {
  * Full Site Editing
  * - Full Site Editing overrides
  */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}
+
 .fse-enabled .site-header.entry-content {
 	margin-bottom: 0;
 	max-width: 100%;
 	padding: 0;
 	width: 100%;
 }
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-header.entry-content .main-navigation .menu-primary-container {
+		padding: 0 32px;
+	}
+}

varia/sass/full-site-editing/_editor.scss

@@ -36,8 +36,12 @@
 		font-size: 15px;
 	}
 
-	.main-navigation a {
-		font-size: 21.6px;
+	.main-navigation {
+		@import "../blocks/button/style";
+
+		a {
+			font-size: 21.6px;
+		}
 	}
 }
 
@@ -45,25 +49,28 @@
 	@include media(tablet) {
 		display: block;
 	}
-}
 
-.main-navigation {
-	@include media(mobile-only) {
-		background-color: #{map-deep-get($config-button, "color", "background")};
-		border-radius: #{map-deep-get($config-button, "border-radius")};
-		color: #{map-deep-get($config-button, "color", "text")};
-		display: inline-block;
-		font-family: #{map-deep-get($config-button, "font", "family")};
-		font-size: 18px;
-		font-weight: #{map-deep-get($config-button, "font", "weight")};
-		line-height: #{map-deep-get($config-button, "font", "line-height")};
-		padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+	.main-navigation {
+		@extend .footer-navigation;
 
-		&:before {
-			content: "Menu";
+		display: block;
+
+		.hide-visually,
+		#toggle-menu {
+			display: none;
 		}
-		&:after {
-			content: "+";
+
+		@include media(mobile-only) {
+			.menu-primary-container {
+				display: block;
+			}
+			li {
+				width: auto;
+
+				.sub-menu {
+					display: none;
+				}
+			}
 		}
 	}
 }

varia/sass/full-site-editing/_imports.scss

@@ -0,0 +1,27 @@
+.fse-enabled {
+	.site-footer {
+		.main-navigation {
+			@extend .footer-navigation;
+
+			display: block;
+
+			.hide-visually,
+			#toggle-menu {
+				display: none;
+			}
+
+			@include media(mobile-only) {
+				.menu-primary-container {
+					display: block;
+				}
+				li {
+					width: auto;
+
+					.sub-menu {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+}

varia/style-editor.css

@@ -1154,12 +1154,12 @@ table th,
 	color: indigo;
 }
 
-.footer-navigation {
+.footer-navigation, .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -1168,37 +1168,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 	color: #767676;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 	font-weight: bold;
@@ -1206,11 +1206,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .site-footer .main-navigation .footer-menu a:hover {
 	color: indigo;
 }
 
@@ -1248,6 +1248,98 @@ table th,
 	font-size: 15px;
 }
 
+.site-header .main-navigation {
+	/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Block Options
+ */
+}
+
+.site-header .main-navigation button,
+.site-header .main-navigation .button,
+.site-header .main-navigation input[type="submit"],
+.site-header .main-navigation .wp-block-button__link,
+.site-header .main-navigation .wp-block-file__button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before {
+	margin-bottom: -0.12em;
+}
+
+.site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	margin-top: -0.11em;
+}
+
+.site-header .main-navigation button:hover,
+.site-header .main-navigation .button:hover,
+.site-header .main-navigation input:hover[type="submit"],
+.site-header .main-navigation .wp-block-button__link:hover,
+.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
+.site-header .main-navigation .button:focus,
+.site-header .main-navigation input:focus[type="submit"],
+.site-header .main-navigation .wp-block-button__link:focus,
+.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
+.site-header .main-navigation .has-focus.button,
+.site-header .main-navigation input.has-focus[type="submit"],
+.site-header .main-navigation .has-focus.wp-block-button__link,
+.site-header .main-navigation .has-focus.wp-block-file__button {
+	color: white;
+	background-color: indigo;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
+	color: blue;
+	background: transparent;
+	border: 2px solid currentcolor;
+	padding: 14px 16px;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:focus, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+	color: indigo;
+}
+
+.site-header .main-navigation .wp-block-button.is-style-squared .wp-block-button__link {
+	border-radius: 0;
+}
+
 .site-header .main-navigation a {
 	font-size: 21.6px;
 }
@@ -1258,22 +1350,23 @@ table th,
 	}
 }
 
+.site-footer .main-navigation {
+	display: block;
+}
+
+.site-footer .main-navigation .hide-visually,
+.site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
 @media only screen and (max-width: 559px) {
-	.main-navigation {
-		background-color: blue;
-		border-radius: 9px;
-		color: white;
-		display: inline-block;
-		font-family: sans-serif;
-		font-size: 18px;
-		font-weight: bold;
-		line-height: 1;
-		padding: 16px 16px;
+	.site-footer .main-navigation .menu-primary-container {
+		display: block;
 	}
-	.main-navigation:before {
-		content: "Menu";
+	.site-footer .main-navigation li {
+		width: auto;
 	}
-	.main-navigation:after {
-		content: "+";
+	.site-footer .main-navigation li .sub-menu {
+		display: none;
 	}
 }

varia/style-rtl.css

@@ -2567,12 +2567,12 @@ table th,
 	color: indigo;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2581,37 +2581,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #767676;
 	margin: 0;
 	padding-right: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 	font-weight: bold;
@@ -2619,11 +2619,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: indigo;
 }
 
@@ -3363,3 +3363,28 @@ img#wpstats {
 .wp-block-jetpack-subscriptions form > *:last-child {
 	margin-bottom: 0;
 }
+
+/**
+ * Full Site Editing
+ * - Full Site Editing overrides
+ */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}

varia/style.css

@@ -2584,12 +2584,12 @@ table th,
 	color: indigo;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2598,37 +2598,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #767676;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 	font-weight: bold;
@@ -2636,11 +2636,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: indigo;
 }
 
@@ -3392,3 +3392,28 @@ img#wpstats {
 .wp-block-jetpack-subscriptions form > *:last-child {
 	margin-bottom: 0;
 }
+
+/**
+ * Full Site Editing
+ * - Full Site Editing overrides
+ */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}

varia/style.scss

@@ -77,3 +77,9 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
  * - Styles for 3rd party plugins and WP extensions
  */
 @import "sass/vendors/imports";
+
+/**
+ * Full Site Editing
+ * - Full Site Editing overrides
+ */
+ @import "sass/full-site-editing/imports";