Background theming

[tameTNT]

A basic gradient that passes through the main theme colours as shown in the mockup with adjustable waypoints (where the colour changes) so these can later be aligned with headings.

For a general look, observe the mockup as a whole:

[Lordfirespeed]

I'm concerned that if we hard-code the stops to particular lengths or percentages, viewing on different platforms is gonna be a bad experience as content wrapping will lead to the gradient not lining up in the same way. I think that some kind of programmatic solution is going to be necessary 😬

[Lordfirespeed]

It could also be implemented by having separate gradient backgrounds for each section that mesh together. I think I'm gonna give that a go.

Edit: This is really tricky as the stops aren't always aligned with sections.

[Lordfirespeed]

Okay, made some significant progress on this. Will need changing pending updated mockups, and a few of the colours are off, but I'm happy with what I've got so far.

See here for source.

[tameTNT]

I'm concerned that if we hard-code the stops to particular lengths or percentages, viewing on different platforms is gonna be a bad experience as content wrapping will lead to the gradient not lining up in the same way.

Ah I worded the suggestion badly 😅. What I meant was if there was any way to fix the gradient stops/transitions/waypoints to the actual position of the headers on the document? So for example, the blue transition would always happen 20px above the FAQ heading no matter the viewport something like that. That way the gradient could adjust dynamically based on the header position influenced by viewport size.

[tameTNT]

I can see this is essentially what you've done via the separate gradients! Perfect - the meaning got there one way or another 😅 It seems to work well with me pasting lorem ipsum in sections to expand them out 👍