settings/_colors.scss is populated with the color variables from
variables.scss, alongside additional link variables. $body-color was
renamed to $body-text-color to avoid confusion.
Production sees a sass compressed under the filename style.min.css.
Alternatively development mode instead creates an uncompressed version
under style.css -- `npm run build:dev`
The scripts.js in `public` dir was previously known as app.js.
Container's max-width was reflected to setting $container-page-width found within settings.
Container makes use of $gutter-half from settings for easier coding and
consistency.
Container now makes use of media queries. We add and subtract margins based on screen size. In particular, we register margin gutters when the viewport width is within the container-page-width.
.full-width-container is set to 100% width, expanding fully for each screen size. This additional class is expected to be used for content outside of textual information e.g. artwork.
We wish to create human-friendly labels around our CSS breakpoints.
Typically you would show numbers to represent media types. Now, we can
simplify and ask for "desktop", "mobile", "tablet". It should be self-explanatory to the developers.
You can find out more about the mixins SASS MQ provides here: https://sass-mq.github.io/sass-mq/