Vetro: update alignment and use columns to collapse better on mobile (#6800)

* Update vetro alignment to use site wide padding and columns to collapse better.

* Add main closing tag and fix search input color.

* Fix search input color.

vetro/patterns/about.php

@@ -6,18 +6,18 @@
  */
 ?>
 
-<!-- wp:heading {"textAlign":"left","level":1,"align":"full","style":{"typography":{"lineHeight":"1.1","fontStyle":"normal","fontWeight":"600","letterSpacing":"-3px","fontSize":"4rem"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
-<h1 class="alignfull has-text-align-left" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:4rem;font-style:normal;font-weight:600;letter-spacing:-3px;line-height:1.1"><?php echo esc_html__( 'United Architects Collab is a studio focused on sustainable design, interiors and landscapes.', 'vetro' ); ?></h1>
+<!-- wp:heading {"textAlign":"left","level":1,"align":"full","style":{"typography":{"lineHeight":"1.1","fontStyle":"normal","fontWeight":"600","letterSpacing":"-3px","fontSize":"4rem"},"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<h1 class="alignfull has-text-align-left" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;font-size:4rem;font-style:normal;font-weight:600;letter-spacing:-3px;line-height:1.1"><?php echo esc_html__( 'United Architects Collab is a studio focused on sustainable design, interiors and landscapes.', 'vetro' ); ?></h1>
 <!-- /wp:heading -->
 
 <!-- wp:spacer {"height":"45px"} -->
 <div style="height:45px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"0px"}}} -->
-<div class="wp-block-columns alignwide" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
-<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","lineHeight":"1.4"}},"fontSize":"small"} -->
+<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"0px"}}} -->
+<div class="wp-block-columns alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","bottom":"0px"},"blockGap":"0px"}}} -->
+<div class="wp-block-column" style="padding-top:0px;padding-bottom:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","lineHeight":"1.4"}},"fontSize":"small"} -->
 <p class="has-small-font-size" style="font-style:normal;font-weight:500;line-height:1.4"><?php echo esc_html__( 'Working as a full-service firm, UA — C delivers contemporary projects, from our client-oriented creative process to the latest building methodologies and construction techniques applied to building sites. And we are proud to achieve that through close collaboration within team members, consultants, contractors and trades.', 'vetro' ); ?></p>
 <!-- /wp:paragraph -->
 

vetro/patterns/hidden-404.php

@@ -6,9 +6,9 @@
  */
 ?>
 
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"160px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:160px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"}}}} -->
-<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontWeight":"600","lineHeight":"1","fontStyle":"normal","fontSize":"8rem"}},"className":"has-text-align-center"} -->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"160px","bottom":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:160px;padding-bottom:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","bottom":"0px"}}}} -->
+<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontWeight":"600","lineHeight":"1","fontStyle":"normal","fontSize":"8rem"}},"className":"has-text-align-center"} -->
 <h2 class="alignwide has-text-align-left has-text-align-center" style="font-size:8rem;font-style:normal;font-weight:600;line-height:1"><?php echo esc_html__( 'Oops...', 'vetro' ); ?></h2>
 <!-- /wp:heading -->
 
@@ -16,17 +16,17 @@
 <div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"20px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontStyle":"normal","fontWeight":"500","lineHeight":1.4}},"fontSize":"small"} -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"20px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontStyle":"normal","fontWeight":"500","lineHeight":1.4}},"fontSize":"small"} -->
 <p class="has-text-align-left has-small-font-size" style="font-style:normal;font-weight:500;line-height:1.4"><?php echo esc_html__( 'This page could not be found.', 'vetro' ); ?><br><?php echo esc_html__( 'Maybe try a search?', 'vetro' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:search {"label":"<?php echo esc_html__( 'Search', 'vetro' ); ?>","showLabel":false,"width":100,"widthUnit":"%","buttonText":"<?php echo esc_html__( 'Search', 'vetro' ); ?>","buttonUseIcon":true,"align":"center","style":{"border":{"radius":"4px","width":"1px"}},"borderColor":"foreground","backgroundColor":"foreground","textColor":"foreground"} /--></div>
+<!-- wp:search {"label":"<?php echo esc_html__( 'Search', 'vetro' ); ?>","showLabel":false,"width":100,"widthUnit":"%","buttonText":"<?php echo esc_html__( 'Search', 'vetro' ); ?>","buttonUseIcon":true,"align":"center","style":{"border":{"radius":"4px","width":"1px"}},"borderColor":"foreground","backgroundColor":"foreground"} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:spacer {"height":"90px"} -->
 <div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
-<!-- /wp:group --></div>
+<!-- /wp:group --></main>
 <!-- /wp:group -->
 <!-- /wp:spacer -->

vetro/templates/archive.html

@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}}} -->
-<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"30%"},"margin":{"top":"180px","bottom":"90px"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"0px","bottom":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"30%"},"margin":{"top":"180px","bottom":"90px"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
 <div class="wp-block-group alignwide" style="margin-top:180px;margin-bottom:90px;padding-top:0px;padding-right:30%;padding-bottom:0px;padding-left:0px"><!-- wp:query {"queryId":30,"query":{"perPage":"10","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":2},"layout":{"type":"default"}} -->
 <div class="wp-block-query"><!-- wp:post-template -->
 <!-- wp:post-featured-image {"isLink":true,"width":"","height":"360px","style":{"border":{"radius":"8px"},"color":{"duotone":["#111111","#dadada"]}}} /-->

vetro/templates/page.html

@@ -1,15 +1,21 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px","margin":{"top":"160px","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
-<main class="wp-block-group" style="margin-top:160px;margin-bottom:80px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"25%","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:25%;padding-bottom:0px;padding-left:0px"><!-- wp:post-title {"level":1,"isLink":true,"align":"wide","style":{"typography":{"fontSize":"4rem","fontStyle":"normal","fontWeight":"600","letterSpacing":"-3px"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontFamily":"inter"} /-->
+<main class="wp-block-group" style="margin-top:160px;margin-bottom:80px"><!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"width":"80%"} -->
+<div class="wp-block-column" style="flex-basis:80%"><!-- wp:post-title {"level":1,"isLink":true,"align":"wide","style":{"typography":{"fontSize":"4rem","fontStyle":"normal","fontWeight":"600","letterSpacing":"-3px"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontFamily":"inter"} /-->
 
 <!-- wp:spacer {"height":"30px"} -->
 <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:post-content {"align":"wide","layout":{"type":"default"},"style":{"typography":{"lineHeight":1.4,"fontSize":"1.45rem","fontStyle":"normal","fontWeight":"500"}}} /--></div>
-<!-- /wp:group --></main>
+<!-- wp:post-content {"align":"wide","style":{"typography":{"lineHeight":1.4,"fontSize":"1.45rem","fontStyle":"normal","fontWeight":"500"}},"layout":{"type":"default"}} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></main>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

vetro/templates/search.html

@@ -1,12 +1,12 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}}} -->
-<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"40%","bottom":"0px","left":"0px"},"margin":{"top":"180px","bottom":"90px"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"0px","bottom":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"40%","bottom":"0px","left":"0px"},"margin":{"top":"180px","bottom":"90px"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
 <div class="wp-block-group alignwide" style="margin-top:180px;margin-bottom:90px;padding-top:0px;padding-right:40%;padding-bottom:0px;padding-left:0px"><!-- wp:group {"style":{"spacing":{"padding":{"bottom":"40px","top":"0px","right":"0px","left":"0px"},"blockGap":"0px"},"typography":{"fontStyle":"normal","fontWeight":"500"}},"layout":{"inherit":true,"type":"constrained"},"fontSize":"small"} -->
-<div class="wp-block-group has-small-font-size" style="padding-top:0px;padding-right:0px;padding-bottom:40px;padding-left:0px;font-style:normal;font-weight:500"><!-- wp:search {"label":"Search","showLabel":false,"width":100,"widthUnit":"%","buttonText":"Search","buttonUseIcon":true,"style":{"border":{"radius":"4px","width":"1px"}},"borderColor":"custom-eggplant","backgroundColor":"foreground","textColor":"foreground"} /--></div>
+<div class="wp-block-group has-small-font-size" style="padding-top:0px;padding-right:0px;padding-bottom:40px;padding-left:0px;font-style:normal;font-weight:500"><!-- wp:search {"label":"Search","showLabel":false,"width":100,"widthUnit":"%","buttonText":"Search","buttonUseIcon":true,"style":{"border":{"radius":"4px","width":"1px"}},"borderColor":"custom-eggplant","backgroundColor":"foreground"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":30,"query":{"perPage":"6","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":2},"layout":{"type":"default"}} -->
+<!-- wp:query {"query":{"perPage":"6","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":2},"layout":{"type":"default"}} -->
 <div class="wp-block-query"><!-- wp:post-template -->
 <!-- wp:post-featured-image {"isLink":true,"width":"","height":"640px","style":{"border":{"radius":"8px"},"color":{"duotone":["#111111","#dadada"]}}} /-->
 

vetro/templates/single.html

@@ -29,15 +29,25 @@
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"25%","bottom":"0px","left":"0px"},"margin":{"top":"180px","bottom":"90px"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:180px;margin-bottom:90px;padding-top:0px;padding-right:25%;padding-bottom:0px;padding-left:0px"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"4rem","letterSpacing":"-3px"}},"fontFamily":"inter"} /-->
+<!-- wp:spacer {"height":"110px"} -->
+<div style="height:110px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"width":"80%"} -->
+<div class="wp-block-column" style="flex-basis:80%"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"4rem","letterSpacing":"-3px"}},"fontFamily":"inter"} /-->
 
 <!-- wp:spacer {"height":"30px"} -->
 <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:post-content {"align":"wide","layout":{"type":"default"},"style":{"typography":{"lineHeight":1.4,"fontSize":"1.45rem","fontStyle":"normal","fontWeight":"500"}}} /--></div>
-<!-- /wp:group -->
+<!-- wp:post-content {"align":"wide","style":{"typography":{"lineHeight":1.4,"fontSize":"1.45rem","fontStyle":"normal","fontWeight":"500"}},"layout":{"type":"default"}} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"20%"} -->
+<div class="wp-block-column" style="flex-basis:20%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
 
 <!-- wp:spacer {"height":"90px"} -->
 <div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>