Proposal: Use a base set of CSS variables across PureScript resources

[thomashoneyman]

CSS variables have 95% support on caniuse.com. These variables are particularly useful for theming: a set of variables representing colors, fonts, font sizes, spacing units, and more can be used when styling HTML elements; changing the value of a variable will update values throughout the CSS.

What if we had a set of CSS variables representing the PureScript theme or brand? We could use these variables to implement the CSS across PureScript resources (the homepage, Try PureScript, Pursuit, and so on) and it could be reused by other resources that want to look PureScript-y, like Halogen Storybook or other documentation sites.

Admittedly, the PureScript CSS doesn't change much. But it still seems useful to be able to rely on a consistent base of colors, fonts, sizing, and so on when working on any core PureScript resource or implementing third-party sites. It would also make it easy to support a light / dark theme on core resources if we ever want that.

[hdgarrood]

I would rather use a CSS preprocessor like Less. It’s very easy to compile to CSS and that way the colours will display correctly in all browsers. We do have this right now: it’s https://github.com/purescript/purescript/blob/master/app/static/pursuit.less