When refining the layout of the blog and testing it at different viewport sizes, I saw that at smaller sizes it was not feasible to include both the main body (post list) and the sidebar. What to do? Well, studying the layouts of other blogs, they often moved the sidebar functions into a menu at a certain breakpoint.

So, at below tablet viewport size, I did the same. The search and archive functions would be in a menu that was, for the most part, identical to the sidebar in design and functionality, and accessed by pressing a fixed floating hamburger menu button.

The issue was, between the banner image and the white background for the body below it, having the menu button be any one fixed colour wasn't ideal for contrast (at least in my opinion). To resolve this, I had the idea to implement a dynamic colour fill for the button, where it would be white against the banner image, and then transition to black as it crossed the banner/body boundary during scrolling. When the menu was open/active, the fill would be black irrespective of the boundary.

I looked for simple, built-in solutions and found that the mix-blend-mode CSS property set to difference could be the mechanism for this. Indeed, this property is capable of dynamic colour changes during scrolling, but it requires both the foreground and background to be monochrome to have the effect I had in mind. The banner image would cause unpredictable inverted colour fill.

For peace of mind and to completely implement my vision, I opted to use JavaScript instead. There would be a scroll event listener checking the overlap percentage of elements in the button relative to the banner/header, using an inline gradient style linear-gradient(white 100%, black 0%) as a starting point for the fill. The percentage of white fill decreased dynamically as the overlap decreased, and vice versa, with this style applying a discrete black/white split.

Admittedly, it was rather tricky to achieve the result as I had imagined it, but in the end also reassuring that it was possible and didn't have to resort to using mix-blend-mode and compromise the design to make it work. It was also good practice in using element metrics such as getBoundingClientRect() and exposure to as-yet-unfamiliar CSS properties such as border-image-source.