adjusted patterns for more responsiveness

dist/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'd20fed8b272b7abcfdba');
+<?php return array('dependencies' => array(), 'version' => '617fd6474dbeb5ca4813');

patterns/dswp-default-heading.php

@@ -7,8 +7,8 @@
  * @package Design-System-WordPress-Theme
  */
 ?>
-<!-- wp:group {"metadata":{"name":"dswp-default-heading"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"className":"is-style-heading-callout"} -->
+<!-- wp:group {"metadata":{"name":"dswp-default-heading","categories":["text"],"patternName":"design-system-wordpress-theme/dswp-default-heading"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"className":"is-style-heading-callout"} -->
     <h2 class="wp-block-heading is-style-heading-callout">Lorem Ipsum</h2>
     <!-- /wp:heading -->
 </div>

patterns/dswp-horizontal-card-large-img-no-shadow.php

@@ -7,11 +7,11 @@
  * @package Design-System-WordPress-Theme
  */
 ?>
-<!-- wp:group {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"categories":["text"],"patternName":"design-system-wordpress-theme/dswp-horizontal-card-large-no-shadow","name":"DSWP Horizontal Card Large Img No Shadow"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|70","left":"var:preset|spacing|70"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><!-- wp:columns {"templateLock":false,"lock":{"move":false,"remove":false},"align":"wide","className":"dswp-horizontal-card-large-img-no-shadow","style":{"border":{"width":"0px","style":"none"}}} -->
-    <div class="wp-block-columns alignwide dswp-horizontal-card-large-img-no-shadow" style="border-style:none;border-width:0px"><!-- wp:column {"verticalAlignment":"stretch","width":"60%","style":{"spacing":{"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|40","left":"0"}}},"layout":{"type":"default"}} -->
-        <div class="wp-block-column is-vertically-aligned-stretch" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:0;flex-basis:60%"><!-- wp:heading {"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|60"}},"elements":{"link":{"color":{"text":"var:preset|color|font dark"}}}},"textColor":"font dark"} -->
-            <h2 class="wp-block-heading is-style-default has-font-dark-color has-text-color has-link-color" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--60)">Neque porro quisquamSed</h2>
+<!-- wp:group {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"categories":["text"],"patternName":"design-system-wordpress-theme/dswp-horizontal-card-large-img-no-shadow","name":"DSWP Horizontal Card Large Img No Shadow"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:columns {"templateLock":false,"lock":{"move":false,"remove":false},"align":"wide","className":"dswp-horizontal-card-large-img-no-shadow","style":{"border":{"width":"0px","style":"none"}}} -->
+    <div class="wp-block-columns alignwide dswp-horizontal-card-large-img-no-shadow" style="border-style:none;border-width:0px"><!-- wp:column {"verticalAlignment":"center","width":"60%","style":{"spacing":{"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|40","left":"0"}}},"layout":{"type":"default"}} -->
+        <div class="wp-block-column is-vertically-aligned-center" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:0;flex-basis:60%"><!-- wp:heading {"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|60"}},"elements":{"link":{"color":{"text":"var:preset|color|font dark"}}}},"textColor":"font dark"} -->
+            <h2 class="wp-block-heading is-style-default has-font-dark-color has-text-color has-link-color" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--60)"><strong>Neque porro quisquamSed</strong></h2>
             <!-- /wp:heading -->
 
             <!-- wp:group {"layout":{"type":"constrained"}} -->
@@ -31,36 +31,6 @@
                     <!-- wp:list-item -->
                     <li><a href="#test">lorem Ipsum</a></li>
                     <!-- /wp:list-item -->
-
-                    <!-- wp:list-item -->
-                    <li><a href="#test">lorem Ipsum</a></li>
-                    <!-- /wp:list-item -->
-                </ul>
-                <!-- /wp:list -->
-            </div>
-            <!-- /wp:group -->
-
-            <!-- wp:group {"layout":{"type":"constrained"}} -->
-            <div class="wp-block-group"><!-- wp:heading {"level":5,"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|font dark"}}}},"textColor":"font dark"} -->
-                <h5 class="wp-block-heading is-style-default has-font-dark-color has-text-color has-link-color" style="margin-top:0;margin-bottom:0">Neque porro quisquamSed</h5>
-                <!-- /wp:heading -->
-
-                <!-- wp:list {"style":{"typography":{"lineHeight":"2"},"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} -->
-                <ul style="padding-right:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);line-height:2" class="wp-block-list"><!-- wp:list-item -->
-                    <li><a href="#test">lorem Ipsum</a></li>
-                    <!-- /wp:list-item -->
-
-                    <!-- wp:list-item -->
-                    <li><a href="#test">lorem Ipsum</a></li>
-                    <!-- /wp:list-item -->
-
-                    <!-- wp:list-item -->
-                    <li><a href="#test">lorem Ipsum</a></li>
-                    <!-- /wp:list-item -->
-
-                    <!-- wp:list-item -->
-                    <li><a href="#test">lorem Ipsum</a></li>
-                    <!-- /wp:list-item -->
                 </ul>
                 <!-- /wp:list -->
             </div>
@@ -69,8 +39,8 @@
         <!-- /wp:column -->
 
         <!-- wp:column {"verticalAlignment":"top","width":"40%","templateLock":false,"lock":{"move":false,"remove":false},"className":"dswp-image-column","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"default"}} -->
-        <div class="wp-block-column is-vertically-aligned-top dswp-image-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:40%"><!-- wp:image {"id":15586,"className":"size-full"} -->
-            <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-512.png' ); ?>" alt="" class="wp-image-15586" /></figure>
+        <div class="wp-block-column is-vertically-aligned-top dswp-image-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:40%"><!-- wp:image {"id":13862,"sizeSlug":"large","linkDestination":"none","className":"size-full"} -->
+            <figure class="wp-block-image size-large size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-512.png' ); ?>" alt="" class="wp-image-13862" /></figure>
             <!-- /wp:image -->
         </div>
         <!-- /wp:column -->

patterns/dswp-secondary-hero-image-with-title.php

@@ -7,11 +7,22 @@
  * @package Design-System-WordPress-Theme
  */
 ?>
-<!-- wp:cover {"overlayColor":"typography-primary-color","minHeight":239,"minHeightUnit":"px","style":{"color":{"duotone":"unset"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-cover" style="min-height:239px"><span aria-hidden="true" class="wp-block-cover__background has-typography-primary-color-background-color has-background-dim-100 has-background-dim"></span>
-    <div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","fontSize":"large"} -->
-        <h2 class="wp-block-heading has-text-align-left has-large-font-size">Lorem ipsum dolor sit amet</h2>
-        <!-- /wp:heading -->
+<!-- wp:group {"className":"dswp-secondary-hero-image-with-title","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"0","bottom":"0"}}},"backgroundColor":"typography-primary-color","layout":{"type":"constrained"}} -->
+<div class="wp-block-group dswp-secondary-hero-image-with-title has-typography-primary-color-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"padding":{"right":"0","left":"0","top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
+    <div class="wp-block-columns" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"verticalAlignment":"center","width":"30%"} -->
+        <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:heading {"textAlign":"left","style":{"elements":{"link":{"color":{"text":"var:preset|color|background-white"}}}},"textColor":"background-white","fontSize":"large"} -->
+            <h2 class="wp-block-heading has-text-align-left has-background-white-color has-text-color has-link-color has-large-font-size"><strong>Lorem</strong></h2>
+            <!-- /wp:heading -->
+        </div>
+        <!-- /wp:column -->
+
+        <!-- wp:column {"width":"70%","className":"dswp-image-container","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
+        <div class="wp-block-column dswp-image-container" style="padding-top:0;padding-bottom:0;flex-basis:70%"><!-- wp:image {"id":16680,"width":"auto","height":"216px","sizeSlug":"full","linkDestination":"none","align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
+            <figure class="wp-block-image alignright size-full is-resized" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-512.png' ); ?>" alt="" class="wp-image-16680" style="width:auto;height:216px" title="" /></figure>
+            <!-- /wp:image -->
+        </div>
+        <!-- /wp:column -->
     </div>
+    <!-- /wp:columns -->
 </div>
-<!-- /wp:cover -->
+<!-- /wp:group -->

src/styles/index.scss

@@ -11,3 +11,4 @@
 @import "./patterns/dswp-card-with-hyperlink-list";
 @import "./patterns/dswp-vertical-cards-with-icon";
 @import "./patterns/dswp-horizontal-card-large-img-right-no-shadow";
+@import "./patterns/dswp-secondary-hero-image-with-title"

src/styles/patterns/dswp-secondary-hero-image-with-title.scss

@@ -0,0 +1,21 @@
+.dswp-secondary-hero-image-with-title {
+	height: 13.6rem;
+	align-content: center;
+
+	.dswp-image-container {
+
+		img {
+			height: 216px;
+		}
+	}
+}
+
+@media (max-width: $break-medium) {
+
+	.dswp-secondary-hero-image-with-title {
+
+		.dswp-image-container {
+			display: none !important;
+		}
+	}
+}