Create defined breakpoints, and apply them to homepage

Step 1: Homepage

This serves as a proof-of-concept for using breakpoints

Unfortunately with plain css, we can't use css variables (--var-name), as media queries happen above the root level. For this it's much easier to use scss, as scss variables can be used at the pre-processor level.

Importing breakpoints

To enable directly importing breakpoint mixins, the angular.json file needed to be adjusted:

"stylePreprocessorOptions": {
	"includePaths": ["lib/scss"]
}

This allows easly importing the breakpoints in any scss file via:

@import 'mixins/breakpoints';

Note this also needed adding to the test section of angular.json so the unit tests would work

Using breakpoints

The mixins can be used via the @include directive

.my-component-class {
  color: red;  // Default value

  @include mobile {
    color: blue; // value for mobile only
  }

  @include xLarge {
    color: green; // value for x-large screens
  }
}

Here mobile will have blue text, middle screens will have the default red text, and x-large screens will have green text

Breakpoint-specific root variables

Here we're using the breakpoints to alter the width of the content-area, as per designs, within the common theme.scss

:root {
    // ...
	@include mobile {
		--rcc-content-width: 376px;
	}

	@include desktop {
		--rcc-content-width: 880px;
	}

	@include xLarge {
		--rcc-content-width: 1080px;
	}
}

Note that the mobile breakpoint here is not needed, but is included in order to be explicit

Likewise in future we could apply these for other variables

Padding remains constant for all viewports.

mobile first

Generally the breakpoints are considered mobile-first, meaning the default css for mobile can be written without breakpoint, and >= mobile can use the desktop breakpoint example:

.my-component-class {
  // default mobile css
  font-size: 1rem;

  // Only for > mobile
  @include desktop {
    font-size: 2rem;
  }
}

For some exceptions however you may want to override the default css for mobile only, in which case the @include mobile breakpoint is used only for viewports below the first breakpoint

Another exception, if css should only apply for medium sized screens (although it's not currently being used), can be done with

@include smallDesktop { }

Which is only then for viewports between the first and second breakpoints

Part of #859 (closed)