Vertically Centered navigation. Shifted X button. Cleaned up style comments. (#5945)

pendant/style.css

@@ -206,6 +206,11 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	padding-left: 0;
 }
 
+/** Navigation text-decoration correction **/
+.wp-block-navigation:where(:not([class*=has-text-decoration])) a {
+	text-decoration-thickness: 1px;
+}
+
 /** Navigation sub-menu items **/
 .wp-block-navigation .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
 	text-transform: uppercase;
@@ -215,22 +220,38 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	letter-spacing: 0.1em;
 }
 
-/* Desktop responsive navigation layout */
+/** Desktop responsive navigation layout **/
 .wp-block-navigation.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-    margin: 0 auto;
-    max-width: 820px;
+	margin: 0 auto;
+	max-width: 820px;
+	height: 100%;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
 }
 
-.wp-block-navigation:where(:not([class*=has-text-decoration])) a {
-	text-decoration-thickness: 1px;
+.wp-block-navigation .wp-block-navigation__responsive-dialog,
+.wp-block-navigation .wp-block-navigation__responsive-close {
+	height: 100%;
+}
+.wp-block-navigation.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container {
+	justify-content: center;
+}
+.wp-block-navigation .wp-block-navigation__responsive-container-close {
+	left: 0;
+}
+.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
+	padding-top: 3vw;
 }
 
+/** Categories list block: remove list decoration **/
 .wp-block-categories {
 	list-style-type: none;
 }
 
-
- .pendant-post-navigation .wp-block-post-navigation-link .post-navigation-link__label {
+/** Post Navigation Styles **/
+.pendant-post-navigation .wp-block-post-navigation-link .post-navigation-link__label {
 	font-family: var(--wp--preset--font-family--body-font);
 	font-size: 0.9rem;
 	font-weight: 600;
@@ -238,7 +259,6 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	text-transform: uppercase;
 	line-height: 3;
 }
-
 @media (max-width: 599px) {
 	.pendant-post-navigation .post-navigation-link__title {
 		display: none;