Ibis: New Templates, Template Parts, Typescale, and Grid

Adding new Templates, Template Parts, Typescale, and Grid to allow more "robust" site design options.

ibis/block-template-parts/header-front-page.html

@@ -0,0 +1,49 @@
+<!-- wp:cover {"overlayColor":"secondary","align":"full"} -->
+<div class="wp-block-cover alignfull has-secondary-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:columns {"verticalAlignment":null,"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"verticalAlignment":"center","width":33.33} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:site-title {"fontSize":"normal"} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center","width":66.66} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","textColor":"background","itemsJustification":"right"} -->
+<!-- wp:navigation-link {"label":"Home","url":"http://home"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading {"align":"center","level":1,"style":{"typography":{"fontSize":60}}} -->
+<h1 class="has-text-align-center" style="font-size:60px"><strong>Patterns Forming</strong> and Taking Shape</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">And since, when asked, I’m not saying who you are, as yet, you too, in the meantime, can take the name of Ibis.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons {"align":"center"} -->
+<div class="wp-block-buttons aligncenter"><!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Services</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"className":"is-style-fill"} -->
+<div class="wp-block-button is-style-fill"><a class="wp-block-button__link">About Us</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

ibis/block-template-parts/header-page.html

@@ -0,0 +1,29 @@
+<!-- wp:cover {"overlayColor":"secondary","align":"full"} -->
+<div class="wp-block-cover alignfull has-secondary-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"verticalAlignment":"center","width":33.33} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:site-title {"fontSize":"normal"} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center","width":66.66} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","textColor":"background","itemsJustification":"right"} -->
+<!-- wp:navigation-link {"label":"Home","url":"http://home"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontSize":60}}} /-->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div></div>
+<!-- /wp:cover -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

ibis/block-template-parts/header.html

@@ -1,17 +1,27 @@
-<!-- wp:group {"align":"full","backgroundColor":"background"} -->
-<div class="wp-block-group alignfull has-background-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":20} -->
-<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:columns {"align":"wide"} -->
-<div class="wp-block-columns alignwide"><!-- wp:column {"width":33.33} -->
-<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:site-title {"style":{"typography":{"fontSize":32}}} /--></div>
+<!-- wp:cover {"overlayColor":"background","align":"full"} -->
+<div class="wp-block-cover alignfull has-background-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"verticalAlignment":"center","width":33.33} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:site-title {"fontSize":"normal"} /--></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"width":66.66} -->
-<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- wp:column {"verticalAlignment":"center","width":66.66} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
 <!-- wp:navigation-link {"label":"Home","url":"http://home"} /-->
 <!-- /wp:navigation --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div></div>
-<!-- /wp:group -->
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div></div>
+<!-- /wp:cover -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

ibis/block-templates/front-page.html

@@ -0,0 +1,13 @@
+<!-- wp:group {"align":"full","tagName":"header"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"header-front-page","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"site-content","tagName":"main"} -->
+<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container">
+<!-- wp:post-title /-->
+<!-- wp:post-content {"align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","tagName":"footer"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"footer","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->

ibis/block-templates/index.html

@@ -3,11 +3,27 @@
 <!-- /wp:group -->
 
 <!-- wp:group {"align":"full","className":"site-content","tagName":"main"} -->
-<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container"><!-- wp:query-loop -->
+
+<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":66.66} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:query {"queryId":0} -->
+<!-- wp:query-loop -->
 <!-- wp:post-title /-->
 
 <!-- wp:post-content /-->
-<!-- /wp:query-loop --></div></div>
+<!-- /wp:query-loop -->
+
+<!-- wp:query-pagination /-->
+<!-- /wp:query --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":33.33} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:paragraph -->
+<p>This will be the sidebar template</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
 <!-- /wp:group -->
 
 <!-- wp:group {"align":"full","tagName":"footer"} -->

ibis/block-templates/page.html

@@ -0,0 +1,12 @@
+<!-- wp:group {"align":"full","tagName":"header"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"header-page","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"site-content","tagName":"main"} -->
+<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container">
+<!-- wp:post-content {"align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","tagName":"footer"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"footer","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->

ibis/style.css

@@ -32,6 +32,11 @@ GNU General Public License for more details.
  * and that just makes doubling up on the :root selector really cool.
  */
 :root:root {
+	/* Line Height */
+	--global--line-height-base: 1;
+	--global--line-height-body: 1.67;
+	--global--line-height-heading: 1.3;
+
 	/* Font Family */
 	--global--font-primary: var(--font-headings, Lora, serif);
 	--global--font-secondary: var(--font-base, Lora, sans-serif);
@@ -46,6 +51,19 @@ GNU General Public License for more details.
 	--global--font-size-xl: var(--wp--preset--font-size--extra-large);
 	--global--font-size-xxl: var(--wp--preset--font-size--huge);
 	--global--font-size-xxxl: var(--wp--preset--font-size--gigantic);
+	--heading--line-height: 1.3;
+	--heading--font-size-h6: var(--global--font-size-base);
+	--heading--font-size-h5: var(--global--font-size-md);
+	--heading--font-size-h4: var(--global--font-size-lg);
+	--heading--font-size-h3: var(--global--font-size-xl);
+	--heading--font-size-h2: var(--global--font-size-xxl);
+	--heading--font-size-h1: var(--global--font-size-xxxl);
+	--heading--line-height-h6: 1.3;
+	--heading--line-height-h5: 1.3;
+	--heading--line-height-h4: 1.3;
+	--heading--line-height-h3: var(--heading--line-height);
+	--heading--line-height-h2: var(--heading--line-height);
+	--heading--line-height-h1: var(--heading--line-height);	
 	--heading--font-weight: 600;
 	--heading--font-weight-strong: 700;	
 
@@ -100,8 +118,8 @@ GNU General Public License for more details.
 }
 @media only screen and (min-width: 1024px) {
 	:root:root {
-		--responsive--aligndefault-width: calc(750px - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(990px - var(--responsive--spacing-horizontal));
+		--responsive--aligndefault-width: calc(610px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(1202px - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}