twentytwentythree icon indicating copy to clipboard operation
twentytwentythree copied to clipboard

Variation: "Block-out" (WIP)

Open critterverse opened this issue 2 years ago • 2 comments

I've been messing around with a weird idea for a variation that blocks out your images and featured images with a color fill effect, which I was thinking could be a duotone filter that uses ~the same color~ similar colors for the shadow and highlight.

It could look like this:

tt3-final tt3-colors-final

Figma: https://www.figma.com/file/1yAfz3sRZoHw1XxNaDPw5N/Block-out-style-variation?node-id=0%3A1

critterverse avatar Aug 26 '22 22:08 critterverse

I've changed the colors on the duotone so that the image shows a little bit, figured that might be slightly more practical 😂

^ Updated above and in the Figma!

critterverse avatar Aug 27 '22 11:08 critterverse

Here's the theme.json: block-out.json.zip

critterverse avatar Aug 28 '22 13:08 critterverse

This style variation has been selected to be bundled with the Twenty Twenty-Three default theme! @critterverse and I have made some tweaks to the submission as a part of the curation process to ensure that all the selected variations work together nicely as a collection. Here are the requested changes:

Block Out

  • The shadow and highlight colors used in the duotone effect are a bit too close — we’ve updated these colors with more contrast so that the images are slightly more visible.
  • New shadow color: #E2161D
  • New highlight color: #FF9C9C
  • Add duotone effect in more places (site logo, etc)

No explicit next steps are needed — feel free to update theme.json files where relevant or they will be updated in development. Thanks for the contribution!

beafialho avatar Sep 07 '22 17:09 beafialho