Sass variables for customising links in #front-main

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: none` in
your cobrand’s _colours.scss file, as cheshireeast and oxfordshire do.

Fixes #3007.

22 files changed, 40 insertions, 60 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c576808d0..19429b6cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@
     - Admin improvements:
         - Display user name/email for contributed as reports. #2990
         - Interface for enabling anonymous reports for certain categories. #2989
+    - Development improvements:
+        - `#geolocate_link` is now easier to re-style. #3006
+        - Links inside `#front-main` can be customised using `$primary_link_*` Sass variables. #3007
 
 * v3.0.1 (6th May 2020)
     - New features:
diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss
index 0340b3eda..c9503ae04 100644
--- a/web/cobrands/bathnes/_colours.scss
+++ b/web/cobrands/bathnes/_colours.scss
@@ -18,9 +18,11 @@ $site-width: 60em;
 
 @import "pattern-lib/colours";
 
-$primary: #00728F;
+$primary: $bathnes-primary;
 $primary_b: #0b0b0c;
-$primary_text: #0b0c0c;
+$primary_text: #fff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: white;
 $base_fg: #0b0c0c;
diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
index 22fdcf60c..c2ba57afe 100644
--- a/web/cobrands/bristol/layout.scss
+++ b/web/cobrands/bristol/layout.scss
@@ -95,10 +95,6 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
   }
 }
 
-a#geolocate_link {
-  color: $b3; // override default `#front-main a`
-}
-
 body.mappage {
   // Add a red border-bottom *inside* the header
   #site-header {
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index 9528f5403..53f6bc2c6 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -9,6 +9,8 @@ $bromley_dark_green: #505050;
 $primary: $bromley_blue;
 $primary_b: #ffffff;
 $primary_text: #ffffff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $link-color: $bromley_green;
 $link-hover-color: $bromley_green;
diff --git a/web/cobrands/cheshireeast/_colours.scss b/web/cobrands/cheshireeast/_colours.scss
index 363214bd0..e0bc13b08 100644
--- a/web/cobrands/cheshireeast/_colours.scss
+++ b/web/cobrands/cheshireeast/_colours.scss
@@ -27,6 +27,7 @@ $col_button_hover: $green;
 $primary: $white;
 $primary_b: $green;
 $primary_text: $text_black;
+$primary_link_decoration: none;
 
 $base_bg: $white;
 $base_fg: $text_black;
diff --git a/web/cobrands/cheshireeast/layout.scss b/web/cobrands/cheshireeast/layout.scss
index 4505b3a26..ad5c6580b 100644
--- a/web/cobrands/cheshireeast/layout.scss
+++ b/web/cobrands/cheshireeast/layout.scss
@@ -31,12 +31,7 @@ body.frontpage .content {
 }
 
 a#geolocate_link {
-    color: #2e3191; // override default `#front-main a`
     margin-top: 1em;
-
-    &:hover {
-        text-decoration: none;
-    }
 }
 
 .ce-footer {
diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
index dbb33a3d2..d5fb3fc0d 100644
--- a/web/cobrands/eastherts/layout.scss
+++ b/web/cobrands/eastherts/layout.scss
@@ -127,10 +127,6 @@
     }
 }
 
-a#geolocate_link {
-    color: $eh_green; // override default `#front-main a`
-}
-
 body.mappage {
     .eh-footer {
         display: none;
diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss
index 907065d36..cd5ed0c47 100644
--- a/web/cobrands/fiksgatami/_colours.scss
+++ b/web/cobrands/fiksgatami/_colours.scss
@@ -7,6 +7,8 @@ $bg: #1a4f7f;
 $primary: #99bfe1;
 $primary_b: #000000;
 $primary_text: #222222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: $bg;
 $base_fg: #fff;
diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss
index dbdd92e5b..c718a102b 100644
--- a/web/cobrands/fixamingata/_colours.scss
+++ b/web/cobrands/fixamingata/_colours.scss
@@ -5,6 +5,8 @@ $menu-image: 'menu-black';
 $primary: #00b1da;
 $primary_b: #0087a6;
 $primary_text: #222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: #eee url(images/tile.jpg) 0 0 repeat;
 $base_fg: $primary_text;
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index d28cf11e2..b0de8eacb 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -3,6 +3,8 @@
 $primary: #FFD000;
 $primary_b: #F3B11E; // For the box around the front page postcode form only
 $primary_text: #222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 // Tiled main body background
 $base_bg: #272727 url(images/tile.jpg) 0 0 repeat;
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index d79126bae..321b893ad 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -8,6 +8,8 @@ $col_fixed_label: $hart_primary;
 
 $primary_b: #000000;
 $primary_text: #ffffff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $link-color: #369;
 $link-hover-color: #369;
diff --git a/web/cobrands/hounslow/_colours.scss b/web/cobrands/hounslow/_colours.scss
index 0a4476720..622055e82 100644
--- a/web/cobrands/hounslow/_colours.scss
+++ b/web/cobrands/hounslow/_colours.scss
@@ -21,6 +21,8 @@ $primary: $purple;
 //$primary: #dce6f2; // From bexley.gov.uk/services
 $primary_b: #222;
 $primary_text: $white;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: $white;
 $base_fg: #222;
diff --git a/web/cobrands/isleofwight/_colours.scss b/web/cobrands/isleofwight/_colours.scss
index 688eb66e0..511fcef02 100644
--- a/web/cobrands/isleofwight/_colours.scss
+++ b/web/cobrands/isleofwight/_colours.scss
@@ -11,9 +11,11 @@ $green: #75c044;
 
 //Any 20% tint of the above
 
-$primary_text: #fff;
 $primary: $cyan;
 $primary_b: #222;
+$primary_text: #fff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: #fff;
 $base_fg: #222;
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index 7ef941660..d52571721 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -14,6 +14,7 @@ $color-oxfordshire-link-blue: #0a549d;
 $primary: $color-oxfordshire-bright-green;
 $primary_b: $color-oxfordshire-dark-green;
 $primary_text: #fff;
+$primary_link_decoration: none;
 
 $link-color: $color-oxfordshire-link-blue;
 $link-hover-color: $color-oxfordshire-bright-yellow;
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index e482b1eaf..91ea8c4d1 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -132,14 +132,6 @@ $mappage-header-height: 10em;
     }
 }
 
-a#geolocate_link {
-    color: $color-oxfordshire-link-blue; // override default `#front-main a`
-
-    &:hover {
-        color: $color-oxfordshire-bright-yellow; // override default `#front-main a`
-    }
-}
-
 .frontpage {
     .content h2 {
         font-size: 2em;
diff --git a/web/cobrands/peterborough/layout.scss b/web/cobrands/peterborough/layout.scss
index cd209f530..de5c5f9a9 100644
--- a/web/cobrands/peterborough/layout.scss
+++ b/web/cobrands/peterborough/layout.scss
@@ -31,15 +31,6 @@ body.frontpage #front-main {
     }
 }
 
-a#geolocate_link {
-    color: $link-color; // override default `#front-main a`
-    &:hover,
-    &:active,
-    &:focus {
-        color: $link-hover-color; // override default `#front-main a`
-    }
-}
-
 #postcodeForm .form-hint {
     color: $grey;
 }
diff --git a/web/cobrands/rutland/_colours.scss b/web/cobrands/rutland/_colours.scss
index aabedb0f1..e81ce2554 100755
--- a/web/cobrands/rutland/_colours.scss
+++ b/web/cobrands/rutland/_colours.scss
@@ -14,6 +14,8 @@ $RCCbg: #F1F1F1;
 $primary: $RCCGreen;
 $primary_b: #000000;
 $primary_text: #222222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: $RCCbg;
 $base_fg: #000;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 29b000fbc..f86af2386 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -11,6 +11,9 @@ $link-visited-color: $link-color !default;
 $link-text-decoration: none !default;
 $link-hover-text-decoration: underline !default;
 
+$primary_link_decoration: underline !default;
+$primary_link_hover_decoration: $primary_link_decoration !default;
+
 $itemlist_item_background: #f6f6f6 !default;
 $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #666 !default;
@@ -2373,6 +2376,12 @@ label .muted {
       }
     }
   }
+  a {
+    text-decoration: $primary_link_decoration;
+    &:hover {
+      text-decoration: $primary_link_hover_decoration;
+    }
+  }
 }
 
 a#geolocate_link {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index e02da2bcc..8b3406d9d 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -13,6 +13,9 @@ $header-top-border: $header-top-border-width solid $primary !default;
 
 $container-max-width: 60em !default;
 
+$primary_link_color: null !default;
+$primary_link_hover_color: null !default;
+
 .internal-link-fixed-header {
     display: block;
     position: relative;
@@ -854,21 +857,13 @@ textarea.form-error {
     }
   }
   a {
-    color: inherit;
-    text-decoration: underline;
+    color: $primary_link_color;
     &:hover {
-      text-decoration: none;
+      color: $primary_link_hover_color;
     }
   }
 }
 
-a#geolocate_link {
-  text-decoration: none; // override `#front-main a`
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 #front-howto {
   border-#{$right}: 1em solid transparent;
 }
diff --git a/web/cobrands/tfl/layout.scss b/web/cobrands/tfl/layout.scss
index 6f63fa06d..751a71672 100644
--- a/web/cobrands/tfl/layout.scss
+++ b/web/cobrands/tfl/layout.scss
@@ -68,11 +68,6 @@ h1 {
   }
 }
 
-a#geolocate_link {
-  color: $beck-blue; // override default `#front-main a`
-  text-decoration: underline;
-}
-
 .frontpage .content {
   padding: 2em 0;
 }
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index 37cd88b4e..fdf3524cd 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -45,14 +45,6 @@
     }
 }
 
-a#geolocate_link {
-    color: $link-color; // override default `#front-main a`
-
-    &:hover {
-        color: $link-hover-color; // override default `#front-main a`
-    }
-}
-
 .site-footer__section {
     @include box-sizing(border-box);
     float: left;
diff --git a/web/cobrands/westminster/layout.scss b/web/cobrands/westminster/layout.scss
index eac7a8432..6e5c30ced 100644
--- a/web/cobrands/westminster/layout.scss
+++ b/web/cobrands/westminster/layout.scss
@@ -36,10 +36,6 @@
     }
 }
 
-a#geolocate_link {
-    color: $westminster-blue; // override default `#front-main a`
-}
-
 body.mappage {
     #site-header {
         box-sizing: border-box; // count padding as part of height, so border-bottom is visible