feat(frontend): update sass compiler/toolchain

[ewdurbin]

This updates us to the latest dart based implementation of sass,

• Vendors compass/susy which used to be provided via ruby installation
• patches susy to comply with [email protected]'s expectations for line continuation
• updates our scss files to comply with [email protected]'s expectations
• add a check to ensure compiled SCSS matches committed CSS
• move to GitHub Actions for CI
• Add a Makefile with runserver, sass, and sass-watch targets.

Notes:

Used dart implementation of Sass from https://github.com/sass/dart-sass/releases/tag/1.30.0

[ewdurbin]

@berinhard this is ready for review. I think the main concern is making sure that the dev workflow (install, compile, watch, ci) makes sense and feels usable!

Otherwise a general review of the resulting CSS is probably good.

We might also consider dealing with the Deprecations/Warnings that sass is outputting at this junction?

[berinhard]

@ewdurbin I've reviewed the PR and I was able to run everything with success after a minor fix in the Makefile. But while reviewing the frontend, I noticed a few style differences:

• Header/buttons with ligthen/darken colors appears to be more solid
• Sign In page as a single column;
• Mission logo at the bottom of the home page at "Python Software Foundation" section
  • Same happens in About/Downloads/Documentation/Community/Success stories header
• All the fonts seems to have a greater font-weight than what I can see at prod

[berinhard]

I'll start to work on each one of then today so we can merge and deploy this PR, ok?

[ewdurbin]

Absolutely!

[berinhard]

@ewdurbin I spent some time on this, but I guess my CSS/Sass skills aren't enough for this task. I'll share my discoveries on each topic:

Header/buttons with ligthen/darken colors appears to be more solid

This probably has to do with the usage of darken/lighten functions to define the button colors. Sass' docs lists warnings about how to use them, advising against it and explaining why they were removed from the new color module system.

Sign In page as a single column;

For some reason, the float and margin properties from .right-sidebar class have invalid values. It seems to me that the values weren't processed at all because there's a property named margin-opposite-position(left) with the value 0. The same thing happens with the sign up page:

And in production:

Mission logo at the bottom of the home page at "Python Software Foundation" section

A similar thing like the sidebar classes is happening with every image defined via CSS. The background property ends up with invalid values, such as, background: top left no-repeat image-url("python-logo-large.png") transparent;.

All the fonts seems to have a greater font-weight than what I can see at prod

I couldn't figure this out yet, but it's a slight difference.

[JacobCoffee]

offtopic

😬

is this still a thing we want to do?

[ewdurbin]

Unsure! It would be nice to actually be able to compile sass in an automated way, but now many more years on there may be another way!