LibreGaming
/
frontend-styles
Archived
14
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

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:
spongycake 2022-02-27 00:48:30 +00:00
parent 3aa00471fe
commit 3b314bdf9f
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/scss/core/_type.scss
View File

@ -16,6 +16,13 @@ h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-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 {
@ -24,4 +31,3 @@ h6, .h6 { @include font-size($h6-font-size); }
font-weight: $lead-font-weight;
margin-top:0;
}

2
src/scss/settings.scss
View File

@ -1,6 +1,6 @@
@import "settings/colors";
@import "settings/font";
@import "settings/font-families";
@import "settings/headings";
@import "settings/measurements";
@import "settings/spacing";
@import "settings/colors";

14
src/scss/settings/_colors.scss
View File

@ -32,6 +32,10 @@ $secondary-color: $orange !default;
$orange-100: 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
$bg-color: $white !default;
@ -59,16 +63,18 @@ $success-text: $green !default;
// =============================================================================
// normal link color
$link-color: $orange !default;
$link-color: #04768F !default;
// visted link color
$link-visited-color:$orange !default;
$link-visited-color: $link-color !default;
// link hover color
$link-hover-color:$orange-900 !default;
$link-hover-color: lighten($link-color,10%) !default;
// active link color
$link-active-color:$orange-100 !default;
$link-active-color: $link-color !default;
$link-font-weight: $font-weight-bold !default;
// =============================================================================
// Nav