Oscar 7f7943d2fc
🌓 Adds Dark Mode (#210)
* 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
2020-08-26 03:10:24 -07:00

28 lines
498 B
SCSS

.flag {
border-radius: 1rem;
display: inline-block;
font-size: 0.9rem;
font-weight: bold;
margin: 0.5rem 0.75rem 0.25rem 0;
padding: 0.45rem 0.65rem;
text-transform: lowercase;
&--red {
background-color: var(--clr-avoid-background);
&:before {
@include icon__avoid();
@include icon__embed();
}
}
&--yellow {
background-color: var(--clr-warning-background);
&:before {
@include icon__warning();
@include icon__embed();
}
}
}