This PR is built on the back of the other open PRs which should be reviewed and merged first.
Adds relevant classes to the Tailwind safelist to allow the making of "offset backdrops" through the CMS - be that using the Classes field on a component or by creating a custom background style taxonomy term. This first pass is a balance between generic classes for Wilson and not wanting to overly increase the size of the compiled CSS. If a client site built on top of Wilson needs something specific (like more colour options) then that client's theme could be extended.
As an example of what I mean by "offset backdrop" consider the below screenshot.
The first floorplan image has a transparent (i.e. white) background and then a yellow 50% high ::before element offset to the bottom of the section.
Uses classes relative before:bg-primary before:absolute before:top-1/2 before:right-0 before:bottom-0 before:left-0
The second floorplan image has a black background with a yellow 50% high ::before element offset to the top of the section.
Uses classes relative bg-secondary before:bg-primary before:absolute before:top-0 before:right-0 before:bottom-1/2 before:left-0
Using different class combinations you could achieve different colour transitions to suit.
This PR is built on the back of the other open PRs which should be reviewed and merged first.
Adds relevant classes to the Tailwind safelist to allow the making of "offset backdrops" through the CMS - be that using the Classes field on a component or by creating a custom background style taxonomy term. This first pass is a balance between generic classes for Wilson and not wanting to overly increase the size of the compiled CSS. If a client site built on top of Wilson needs something specific (like more colour options) then that client's theme could be extended.
As an example of what I mean by "offset backdrop" consider the below screenshot.
::beforeelement offset to the bottom of the section. Uses classesrelative before:bg-primary before:absolute before:top-1/2 before:right-0 before:bottom-0 before:left-0::beforeelement offset to the top of the section. Uses classesrelative bg-secondary before:bg-primary before:absolute before:top-0 before:right-0 before:bottom-1/2 before:left-0Using different class combinations you could achieve different colour transitions to suit.