mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-10 21:01:41 +00:00
Code Issues Projects Releases Wiki Activity

🌓 Adds Dark Mode (#210)

Browse Source 
* feat(dark mode): set up first set of colors

* feat(dark mode): define state colours

* 🧹

* feat(dark mode): variablify all teh wordz

* feat(dark mode): set colors on body

* feat(dark mode): replace hard coded color value

* feat(dark mode): 🌑

* feat(a11y): update link focus styles

- restores visible focus in windows high contrast mode
- increases visibility in boxes with bg colour

* feat(dark mode): enable postcss

* 💅

* feat(dark mode): add user control

* chore: use generic headline name

* feat(dark mode): hide switch until script loads

* feat(dark mode): increase link contrast

* add content warning to footer nav partial

* feat(dark mode): replace hard coded colour value in alertbox

* feat(dark mode): tone down text colour

* feat(dark mode): properly invert code elements

* 🧹 move box styles into own partial

* feat(dark mode): use darker colour as background for links
This commit is contained in:
Oscar
2020-08-26 12:10:24 +02:00
committed by GitHub
parent 7f11b552a6
commit 7f7943d2fc
31 changed files with 880 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/abstracts/_colours.scss
View File

@ -1,11 +0,0 @@
$primary-color: hsl(0, 100%, 50%);
$secondary-color: hsl(120, 100%, 25%);
$dark-red: hsl(0, 100%, 32.2%);
$pink: hsl(349.5, 100%, 87.6%);
$black: hsl(0, 0%, 13%);
$white: hsl(0, 0%, 100%);
$dark-grey: hsl(0, 0%, 31%);
$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only

36
assets/css/abstracts/_variables.scss
View File

@ -1,20 +1,20 @@
$primary-color: hsl(0, 100%, 50%);
$secondary-color: hsl(120, 100%, 25%);
$dark-red: hsl(0, 100%, 32.2%);
$pink: hsl(349.5, 100%, 87.6%);
$dark-green: hsl(120, 100%, 15%);
$yellow: hsl(50, 100%, 50%);
$dark-yellow: hsl(50, 100%, 20%);
$pale-yellow: hsl(50, 100%, 86%);
$black: hsl(0, 0%, 13%);
$white: hsl(0, 0%, 100%);
$dark-grey: hsl(0, 0%, 31%);
$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
$colors: (
red: hsl(0, 100%, 50%),
green: hsl(120, 100%, 25%),
dark-red: hsl(0, 100%, 32.2%),
pink: hsl(349.5, 100%, 87.6%),
berry: hsl(350deg 54% 44%),
dark-green: hsl(120s, 100%, 15%),
pale-green: hsl(120, 73%, 80%),
yellow: hsl(50, 100%, 50%),
dark-yellow: hsl(50, 100%, 20%),
pale-yellow: hsl(50, 100%, 86%),
black: hsl(0, 0%, 13%),
black-transparent: hsla(0, 0%, 13%, 85%),
white-transparent: hsl(0, 0%, 100%, 85%),
light-grey: hsl(0, 0%, 92%),
dark-grey: hsl(0, 0%, 31%),
mid-grey: hsl(0, 0%, 46.3%)
);
$browser-context: 16;
$lt-background-color: $pink;
$lt-background-color-warning: $pale-yellow;