Add custom CSS capability

[Tom Clift]

Prior to version 4 I was using public/fonts.css as an escape hatch to override CSS, so that we could make the radar feel more like our own.

When fonts.css was removed (ref #90), we lost this capability.

Aside from importing fonts, setting @font-face and overriding various tag font settings, we also had an "always show the back arrow" hack:

/* always show the back arrow (hidden by default on entry pages) */
.logo-link__slide {
    transform: none !important;
}

/* always show the back arrow (hidden by default on entry pages) */
.logo-link--small .logo-link__icon {
    opacity: 1 !important;
}

It would be nice to provide a similar mechanism for loading custom CSS, e.g. public/custom.css. It doesn't need to be pretty or supported (it's OK for CSS rules to break on any upgrade), it's just nice to have the capability for arbitrary CSS overrides.

[Tom Clift]

Thanks for your work on this @mathiasschopmans! With this issue released, along with #432 and #431, we were able to upgrade from v3 to v4.

For reference, here's what we're doing in custom.css to set fonts:

@import url('https://fonts.googleapis.com/css?family=Barlow|Source+Sans+Pro&display=swap');

@font-face {
	font-family: 'Barlow', sans-serif;
	font-weight: normal;
}

@font-face {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Barlow', sans-serif !important;
}

[class*="className__roboto_"] [class*="content__ItemDetail__"],
[class*="className__roboto_"] [class*="link__ItemList__"] {
	font-family: 'Source Sans Pro', sans-serif !important;
}

and always showing the back arrow on entry pages (to make it clear that it's a back action; people were confused / couldn't find it):

/* always show the back arrow (hidden by default on entry pages) */
[class*="small__Logo__"] {
	padding-left: 30px !important;
}

/* always show the back arrow (hidden by default on entry pages) */
[class*="small__Logo__"]:before {
	opacity: 1 !important;
}

and a hack to show links with underlines, but (hopefully) only on the about page content:

/* restore underline to links in "How to use". target=_blank is a hack to avoid targeting other pages. */
[class*="content__Layout__"] a[target=_blank] {
  text-decoration: underline !important;
}