Archeo: Add navigation styles (#5462)

* Archeo: Add navigation styles

* Fix left alignment, remove site tagline and image.

* Fix top spacing.

* Fix close button position.

* Add custom CSS for navigation links in the overlay

Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

archeo/parts/header.html

@@ -1,27 +1,15 @@
 <!-- wp:group {"layout":{"inherit":"true"}} -->
 <div class="wp-block-group">
-    <!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--medium)","top":"var(--wp--custom--spacing--medium)"}}}} -->
-    <div class="wp-block-group alignfull" style="padding-bottom:var(--wp--custom--spacing--medium);padding-top:var(--wp--custom--spacing--medium)">
-    
-        <!-- wp:group {"layout":{"type":"flex"}} -->
-        <div class="wp-block-group">
-            <!-- wp:site-logo {"width":64} /-->
-    
-            <!-- wp:group -->
-            <div class="wp-block-group">
-                <!-- wp:site-title /-->
-                <!-- wp:site-tagline /-->
-            </div>
-            <!-- /wp:group -->
-        </div>
-        <!-- /wp:group -->
-    
-        <!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"},"overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"50px"}},"fontSize":"small"} -->
+    <!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--medium)","top":"var(--wp--custom--spacing--outer)"}}}} -->
+    <div class="wp-block-group alignfull" style="padding-bottom:var(--wp--custom--spacing--medium);padding-top:var(--wp--custom--spacing--outer)">
+        <!-- wp:site-title /-->
+
+        <!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"overlayBackgroundColor":"foreground","overlayTextColor":"background","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"50px"}},"fontSize":"small"} -->
             <!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
         <!-- /wp:navigation -->
-        
+
     </div>
     <!-- /wp:group -->
-    
+
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

archeo/style.css

@@ -148,3 +148,26 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	margin-right: auto !important;
 	width: inherit;
 }
+
+/*
+ * Responsive menu container padding.
+ * This ensures the responsive container inherits the same
+ * spacing defined above. This behavior may be built into
+ * the Block Editor in the future.
+ */
+
+.wp-block-navigation__responsive-container.is-menu-open {
+	padding-top: var(--wp--custom--spacing--outer);
+	padding-bottom: var(--wp--custom--spacing--large);
+	padding-right: var(--wp--custom--spacing--outer);
+	padding-left: var(--wp--custom--spacing--outer);
+}
+
+/*
+ * We need this until https://github.com/WordPress/gutenberg/issues/37035 is fixed.
+ */
+.wp-block-navigation__responsive-container.is-menu-open ul {
+	font-size: var(--wp--preset--font-size--large) !important;
+	font-weight: 300;
+	gap: var(--wp--style--block-gap);
+}