Add custom CSS capability
tclift opened this issue · comments
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.
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;
}