Hero - colorful dots

[alaczek]

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2020/08/dots_bg.png","id":1933,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://dotcompatterns.files.wordpress.com/2020/08/dots_bg.png)"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":10.4} -->
<div class="wp-block-column" style="flex-basis:10.4%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":35.5} -->
<div class="wp-block-column" style="flex-basis:35.5%"><!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020">WELCOME TO</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"lineHeight":1.6},"color":{"text":"#202020"}}} -->
<h2 class="has-text-color" style="line-height:1.6;color:#202020">LIFE-LONG LEARNERS</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020">This is my little corner of the Internet, where I talk about homeschooling, curriculum, planning, journaling, and more!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020"><em><a href="#">New to the site? Start here</a></em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":319,"width":375,"height":375,"sizeSlug":"large","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2020/08/tabitha-turner-susbeyxyssc-unsplash_square.jpg?w=750" alt="" class="wp-image-319" width="375" height="375"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

[ianstewart]

This one is pretty neat. I can see it being popular when we get tracking in. :)

It'd be nice to have a bit more control of the grid and positioning at various sizes to generally (wouldn't always be true) avoid things like …

… how the W and T touch this circle.

[iamtakashi]

It feels that "welcome to" and "life-long learners" are too apart from each other. I think if they're a little closer it would have a better rhythm.

[iamtakashi]

I'm curious about why it needs to be 3-column. It suffers an odd layout in tablet size of viewports. Can it be 2-column instead?

[alaczek]

It'd be nice to have a bit more control of the grid and positioning at various sizes

Ian, you are killing me! (╯°□°）╯︵ ┻━┻

It feels that "welcome to" and "life-long learners" are too apart from each other.

Agreed, I'll tighten this up.

I'm curious about why it needs to be 3-column.

I used three columns because I wanted the text column to have some extra space on the left while keeping the text left-aligned. Without it, the text column is too far from the image, and the whole thing is a bit off-balance. Ideally, we'd be able to center the text in the column while keeping it left-aligned.

For now though I converted it to two columns:

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2020/08/dots_bg.png","id":1933,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://dotcompatterns.files.wordpress.com/2020/08/dots_bg.png)"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":35.5} -->
<div class="wp-block-column" style="flex-basis:35.5%"><!-- wp:paragraph {"className":"margin-bottom-none","style":{"color":{"text":"#202020"}}} -->
<p class="margin-bottom-none has-text-color" style="color:#202020">WELCOME TO</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"margin-top-none","style":{"typography":{"lineHeight":1.6},"color":{"text":"#202020"}}} -->
<h2 class="margin-top-none has-text-color" style="line-height:1.6;color:#202020">LIFE-LONG LEARNERS</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020">This is my little corner of the Internet, where I talk about homeschooling, curriculum, planning, journaling, and more!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020"><em><a href="#">New to the site? Start here</a></em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":319,"width":375,"height":375,"sizeSlug":"large","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2020/08/tabitha-turner-susbeyxyssc-unsplash_square.jpg?w=750" alt="" class="wp-image-319" width="375" height="375"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

[iamtakashi]

The line-height for the heading "life-long learners" seems too tall especially with it's being all uppercase. I think it'd look better if it was tighter.

Currently, "Welcome to" and "life-long learners" are both uppercase. I wonder if they look better if either of them is normal so that they have better contrast between them.

[alaczek]

Yeah, I think your right on both counts. Here's how I originally envisioned this:

I made "Welcome to" lower case, and italics (to match the link at the bottom, which makes it closer to the original design):

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2020/08/dots_bg.png","id":1933,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://dotcompatterns.files.wordpress.com/2020/08/dots_bg.png)"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":35.5} -->
<div class="wp-block-column" style="flex-basis:35.5%"><!-- wp:paragraph {"className":"margin-bottom-half","style":{"color":{"text":"#202020"}}} -->
<p class="margin-bottom-half has-text-color" style="color:#202020"><em>Welcome to</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"margin-top-half","style":{"typography":{"lineHeight":"1.2"},"color":{"text":"#202020"}}} -->
<h2 class="margin-top-half has-text-color" style="line-height:1.2;color:#202020">LIFE-LONG LEARNERS</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020">This is my little corner of the Internet, where I talk about homeschooling, curriculum, planning, journaling, and more!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#202020"}}} -->
<p class="has-text-color" style="color:#202020"><em><a href="#">New to the site? Start here</a></em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":319,"width":375,"height":375,"sizeSlug":"large","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2020/08/tabitha-turner-susbeyxyssc-unsplash_square.jpg?w=750" alt="" class="wp-image-319" width="375" height="375"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

[iamtakashi]

LGTM! 👍

[pablohoneyhoney]

• Heading-body hierarchy could improve with a larger heading size or shorter body.
• Image feels stocky.
• Can we avoid widows?

[alaczek]

Can we avoid widows?

The short answer is no, there are just too many variables we can't control. In this case, the content sits inside columns block, which has a width defined in %, so depending on screen resolution (and the amount of text, font-size), you'll run into a widow at some point.

For example, here's how this pattern looks like inserted on a site running the Seedlet theme. I believe it's the same resolution as the screenshot, but the widow is not there because of different font family and font-sized used (both theme dependent).

Heading-body hierarchy could improve with a larger heading size or shorter body.

Good point, I'll work on increasing the header font-size. I'm also wondering if I should ditch the uppercase on the title too, as it won't look good with many fonts, including the Playfair Display example in the screenshot above.

[iamtakashi]

Just a suggestion, but how about like this? The image might still be slightly "stocky", but I tried to take an opportunity for DEI while keeping the topic of the pattern intended. I've also adjusted the typography.

Can we avoid widows?

I've made an issue in Gutenberg to discuss about a feature like Widon't for paragraph block: https://github.com/WordPress/gutenberg/issues/25517

[alaczek]

Oooh I like the new photo! Changing "Life-long" to one word also works brilliantly!

[alaczek]

Closing the loop on that one, as it's already launched.