Link in Bio with two columns and dark background

[alaczek]

<!-- wp:cover {"overlayColor":"black","minHeight":100,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"10vh","right":"5vw","bottom":"10vh","left":"5vw"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:10vh;padding-right:5vw;padding-bottom:10vh;padding-left:5vw;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"style":{"spacing":{"blockGap":"40%"}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"360px","layout":{"inherit":true}} -->
<div class="wp-block-column" style="flex-basis:360px"><!-- wp:paragraph {"style":{"color":{"text":"#ffffff99"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:#ffffff99">Adam Jones is an artist living in New York City who has a passion for generative art in the 3D space. Currently accepting new clients.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"5vh"} -->
<div style="height:5vh" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%","style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"3.8rem","letterSpacing":"-1px","lineHeight":"1.5"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">Instagram.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"3.8rem","letterSpacing":"-1px","lineHeight":"1.5"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">Twitter.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"3.8rem","letterSpacing":"-1px","lineHeight":"1.5"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">LinkedIn.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"3.8rem","letterSpacing":"-1px","lineHeight":"1.5"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">Email.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"3.8rem","letterSpacing":"-1px","lineHeight":"1.5"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">Dribbble.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"letterSpacing":"-1px","lineHeight":"1.5","fontSize":"3.8rem"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">Soundcloud.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"3.8rem","letterSpacing":"-1px","lineHeight":"1.5"}}} -->
<p class="has-link-color" style="font-size:3.8rem;letter-spacing:-1px;line-height:1.5"><a href="#">Website.</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

Preview: https://dotcompatterns.wordpress.com/?p=5869

[onuro]

I wonder if we should define px values for font sizes in patterns for large text for better mobile view(see example). Or ignore since we're getting fluid typography soon?

[alaczek]

How would switching to px values improve this design?

We can implement fluid typography when we're bundling these with the theme, but not for stand-alone patterns.

[onuro]

I mean a mobile first px size that will play well in mobile but yeah, fluid typo might be the wait for.

[alaczek]

I'm wondering why the line breaks are happening here, but not in https://github.com/Automattic/blockpatterns/issues/243 where we could really use them? Any ideas?

[alaczek]

I updated the code to optimize the spacing around the pattern on mobile (there was too much horizontal space). I also made the link's font size slightly smaller (from 4 to 3,8 rem) and increased the line-height to 1,5. And finally, I added a spacer after the paragraph on the left, so that there's some breathing room between the two on mobile. I feel like this gives us a good balance of mobile optimization while staying true to the design.

[alaczek]

Published!