blue links are default
Previously orange was the default link colour. Now changed to a custom blue. Blue as a link colour is more natural and obvious UX choice. Contrast rules are now passing AAA tier WCAG 2 criterion, allowing us to move towards legible textual information. Please find $link-color in `settings/_colors.scss`. The hover shade was also reworked to pass AA WCAG 2. Extra blue variants exist but are not accessible, they are placed in settings to cover the future development of a dark theme. Be cautious when reusing these shades.
This commit is contained in:
parent
3aa00471fe
commit
3b314bdf9f
|
@ -16,6 +16,13 @@ h4, .h4 { @include font-size($h4-font-size); }
|
||||||
h5, .h5 { @include font-size($h5-font-size); }
|
h5, .h5 { @include font-size($h5-font-size); }
|
||||||
h6, .h6 { @include font-size($h6-font-size); }
|
h6, .h6 { @include font-size($h6-font-size); }
|
||||||
|
|
||||||
|
|
||||||
|
.body-font {
|
||||||
|
@include font-size(22px);
|
||||||
|
max-width: $paragraph-reading-width;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
// lead paragraph
|
// lead paragraph
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
|
@ -24,4 +31,3 @@ h6, .h6 { @include font-size($h6-font-size); }
|
||||||
font-weight: $lead-font-weight;
|
font-weight: $lead-font-weight;
|
||||||
margin-top:0;
|
margin-top:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import "settings/colors";
|
|
||||||
@import "settings/font";
|
@import "settings/font";
|
||||||
@import "settings/font-families";
|
@import "settings/font-families";
|
||||||
@import "settings/headings";
|
@import "settings/headings";
|
||||||
@import "settings/measurements";
|
@import "settings/measurements";
|
||||||
@import "settings/spacing";
|
@import "settings/spacing";
|
||||||
|
@import "settings/colors";
|
||||||
|
|
|
@ -32,6 +32,10 @@ $secondary-color: $orange !default;
|
||||||
|
|
||||||
$orange-100: adjust-hue($orange,10%);
|
$orange-100: adjust-hue($orange,10%);
|
||||||
$orange-900: adjust-hue($orange,-10%);
|
$orange-900: adjust-hue($orange,-10%);
|
||||||
|
|
||||||
|
$blue-shade-1: adjust-hue($blue,10%);
|
||||||
|
$blue-shade-9: adjust-hue($blue,-10%);
|
||||||
|
|
||||||
// body background color
|
// body background color
|
||||||
$bg-color: $white !default;
|
$bg-color: $white !default;
|
||||||
|
|
||||||
|
@ -59,16 +63,18 @@ $success-text: $green !default;
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
|
||||||
// normal link color
|
// normal link color
|
||||||
$link-color: $orange !default;
|
$link-color: #04768F !default;
|
||||||
|
|
||||||
// visted link color
|
// visted link color
|
||||||
$link-visited-color:$orange !default;
|
$link-visited-color: $link-color !default;
|
||||||
|
|
||||||
// link hover color
|
// link hover color
|
||||||
$link-hover-color:$orange-900 !default;
|
$link-hover-color: lighten($link-color,10%) !default;
|
||||||
|
|
||||||
// active link color
|
// active link color
|
||||||
$link-active-color:$orange-100 !default;
|
$link-active-color: $link-color !default;
|
||||||
|
|
||||||
|
$link-font-weight: $font-weight-bold !default;
|
||||||
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Nav
|
// Nav
|
||||||
|
|
Reference in New Issue