Consider default link colour in #front-main #3007
Comments
|
How about if you add a new variable |
zarino
added a commit
that referenced
this issue
May 13, 2020
The colour and text decoration of links inside `#front-main` can now be customised via `$primary_link_*` Sass variables. Text decoration is set in base.scss (like global link text decoration) while colour is handled in layout.scss (which is where `#front-main` is given its background colour, so likely also the time you’ll want to set a contrasting colour for links inside it). The variables are set to `null` by default, meaning that no colour or text decoration rules for those links will be compiled by default, enabling the links to inherit the global link style, which previously wasn’t possible. We’ve set most cobrands to give their `#front-main` links an underline, because about a third of cobrands set the link colour to match the text colour, so an underline there will help to provide contrast. One cobrand (cheshireeast) uses border-bottom for its link underlines, so we leave the underlines off there, and two cobrands (oxfordshire and tfl) previously set their `#geolocate_link`s to be styled as non-underlined links before, so we’ve respected that and left the underlines off. Fixes #3007.
zarino
added a commit
that referenced
this issue
May 15, 2020
The colour and text decoration of links inside `#front-main` can now be customised via `$primary_link_*` Sass variables. Text decoration is set in base.scss (like global link text decoration) while colour is handled in layout.scss (which is where `#front-main` is given its background colour, so likely also the time you’ll want to set a contrasting colour for links inside it). The variables are set to `null` by default, meaning that no colour or text decoration rules for those links will be compiled by default, enabling the links to inherit the global link style, which previously wasn’t possible. We’ve set most cobrands to give their `#front-main` links an underline, because about a third of cobrands set the link colour to match the text colour, so an underline there will help to provide contrast. One cobrand (cheshireeast) uses border-bottom for its link underlines, so we leave the underlines off there, and two cobrands (oxfordshire and tfl) previously set their `#geolocate_link`s to be styled as non-underlined links before, so we’ve respected that and left the underlines off. Fixes #3007.
zarino
added a commit
that referenced
this issue
May 15, 2020
The colour and text decoration of links inside `#front-main` can now be customised via `$primary_link_*` Sass variables. Text decoration is set in _base.scss (like global link text decoration) while colour is handled in _layout.scss (which is where `#front-main` is given its background colour, so likely also the time you’ll want to set a contrasting colour for links inside it). The colour variables are set to `null` by default, meaning that no colour or rules for those links will be compiled, enabling the links to inherit the global link colour style, which previously wasn’t possible. The decoration variables are set to `underline` by default, because most cobrands set their #front-main links to be the same colour as the surrounding text, so adding an underline is a sensible default. You can disable the underlines by setting `$primary_link_decoration: null` in your cobrand’s _colours.scss file, as cheshireeast and oxfordshire do. Fixes #3007.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
While working on #3006, I noticed that a fair few cobrands where having to override the colour of
a#geolocate_linkbecause they want it to look like a normal (usually blue) link butweb/cobrands/sass/_layout.scssis setting#front-main a { color: inherit }which, in most cases, would result in a black or white link.Oxfordshire and Peterborough are two examples of this:
I decided to test every cobrand, to see which ones actually set a custom text colour for
a#geolocate_link, and of the remainder, which ones actually need thecolor: inheritfrom core, and which could happily do without thecolor: inheriton links in#front-main.Annoyingly, I ended up with three nice neat lists of almost 8 cobrands a piece. So there’s no obvious benefit to changing it either way:
Cobrands where
a#geolocate_linkis given a custom colour in layout.scss, to override thecolor: inheritapplied to#front-main ain_layout.scss.Cobrands where the
color: inheritin_layout.scssis actually needed.(eg: because #front-main has a dark background colour, so the links need to inherit the black or white text colour of a parent element, rather than a generic blue link colour.)
Cobrands where the
color: inheritin_layout.scssdoesn’t make a big difference, so could be kept or removed, dealer’s choice.(eg: all the
inheritdoes is change dark blue links to black links.)My instinct is that links in
#front-mainshould be left to inherit the default page-wide link colour.But really, if we do that, then
#front-mainshouldn’t be given a background-color in the default styles either, because that’s what’s causing all of this. In this new regime, if cobrands wanted to opt in to a coloured#front-main, then they should also override their#front-mainlink colours (perhaps tocolor: inherit, or to something else!) at the same time.As I say, there’s not a huge benefit to doing this, though, so I figured I’d document what I’d discovered, and leave it for another day. I expect, as more council cobrands start moving away from the default (2012) fixmystreet styling with the big coloured band on the homepage, and instead start adopting a more stripped-back, GOV.UK style form design, then the list of cobrands having to override the
color: inheritfrom_layout.scsswill tip the balance in favour of changing the default.The text was updated successfully, but these errors were encountered: