Browse Source

Archeo: fix footer spacing at mobile (#5640)

* Left align footer items

* Add CSS for row-gap

* Set header/footer blockGap to small spacing var
Sarah Norris 3 years ago
parent
commit
b4ade01106
3 changed files with 11 additions and 4 deletions
  1. 3 3
      archeo/inc/patterns/footer.php
  2. 1 1
      archeo/parts/header.html
  3. 7 0
      archeo/style.css

+ 3 - 3
archeo/inc/patterns/footer.php

@@ -8,10 +8,10 @@ return array(
 	'blockTypes' => array( 'core/template-part/footer' ),
 	'content'    => '<!-- wp:group {"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" style="padding-top: var(--wp--custom--spacing--medium); padding-bottom: var(--wp--custom--spacing--medium);">
-		<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center"},"overlayMenu":"never","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"50px"}},"fontSize":"small"} /-->
+		<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"overlayMenu":"never","className":"site-footer","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"var(--wp--custom--spacing--small)"}},"fontSize":"small"} /-->
 	
-		<!-- wp:paragraph {"align":"center","fontSize":"small","style":{"spacing":{"margin":{"top":0}}}} -->
-		<p class="has-text-align-center has-small-font-size" style="margin-top: 0;">' .
+		<!-- wp:paragraph {"align":"left","fontSize":"small","style":{"spacing":{"margin":{"top":0}}}} -->
+		<p class="has-small-font-size" style="margin-top: 0;">' .
 		sprintf(
 			/* Translators: WordPress link. */
 			esc_html__( 'Proudly powered by %s', 'archeo' ),

+ 1 - 1
archeo/parts/header.html

@@ -2,7 +2,7 @@
 <div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--outer)","top":"var(--wp--custom--spacing--outer)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--custom--spacing--outer);padding-bottom:var(--wp--custom--spacing--outer)"><!-- wp:site-title /-->
 
-<!-- wp:navigation {"overlayBackgroundColor":"foreground","overlayTextColor":"background","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"50px"}}} -->
+<!-- wp:navigation {"overlayBackgroundColor":"foreground","overlayTextColor":"background","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"var(--wp--custom--spacing--small)"}},"fontSize":"small"} -->
 <!-- wp:page-list /-->
 <!-- /wp:navigation --></div>
 <!-- /wp:group --></div>

+ 7 - 0
archeo/style.css

@@ -224,3 +224,10 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	height: auto;
 	max-width: 100%;
 }
+
+/*
+ * Needed until https://github.com/WordPress/gutenberg/issues/34529 is fixed.
+ */
+.site-footer {
+	row-gap: 0.5rem !important;
+}