@samueldr I'm not so sure I did a good job with the flex box, but I got it working on the end. I think you should look at this to make sure I'm not complicating things unnecessary.

🚀 Deployed on https://5f6cc2d0b277c70123fe16de--nixos-homepage.netlify.app

Totally not reviewing the important bits first.

When working with the DOM, we are using RSCSS to help keep class names coherent.

• https://github.com/NixOS/nixos-homepage/blob/master/site-styles/README.md#how-this-is-laid-out

With this one notable addendum:

With one addendum that for qualified layout elements like body > header the component will not be named (e.g. page-header); the qualified name for the innate structure of the document is enough.

It's a bit hard sometimes to distinguish what is a component in our setup.

• https://rscss.io/components.html

I would argue that, here, the component is the header nav (because of that addendum). So we're now dealing with elements.

• https://rscss.io/elements.html

Thus the element would be search or searchitem or searchlink.

In the next, and upcoming comment: actually reviewing the meat of the change.

🚀 Deployed on https://5f6e5e603bbe860143b702f3--nixos-homepage.netlify.app

Some misc. tidbits:

We should remove unused styles, to prevent rot. If unused, but the intent is to re-use it soon, adding a comment stating so would be helpful. (Please call me out on it if I do it!)

No actionable elements should have an empty body! Right now this link is just empty if there is a lack of styles, or a lack of sight!

It seems there was an issue with image replacement stemming form the way LESS applies :extend. I fixed it.

This allows us to define the image replacement strictly for the proper media queries.

But why is the #svg definition applied outside the media query? For the same reason! Though here we definitely don't want to make #svg mixins that copy the whole SVG for each elements. This is not an issue because the :after pseudo-element won't show up in narrow viewports.

Finally, it'd be better to include this as part of the main navigation. It's weird to have an option that's not available for narrow viewports.

@samueldr thank you for all the explanation. Agree with your decisions on every point.

🚀 Deployed on https://5f704b96bce561356903e7b4--nixos-homepage.netlify.app