mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-11 05:11:40 +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

35
assets/css/components/_definitions.scss
View File

@ -1,32 +1,23 @@
.word__type {
font-family: $con-sans;
font-size: 0.85rem;
padding-right: 1rem;
text-align: right;
text-transform: uppercase;
}
.word__link {
border-bottom: darkgrey solid 0.1em;
color: black;
font-family: $ext-sans;
text-decoration: none;
}
.word__breakdown {
border-left: 0.1rem solid lightgrey;
font-family: $sans-serif;
padding-left: 1rem;
font-family: $con-sans;
font-size: 0.85rem;
padding-right: 1rem;
text-align: right;
text-transform: uppercase;
}
.content-flag {
background-color: $lt-background-color-warning;
background-color: var(--clr-warning-background);
overflow: hidden;
padding: 0 1rem 0 3rem;
position: relative;
& a:focus {
background-color: var(--clr-background);
}
&:before {
content: "⚠️";
content: '⚠️';
left: 1rem;
position: absolute;
top: 50%;
@ -34,10 +25,10 @@
}
&--avoid {
background-color: $pink;
background-color: var(--clr-avoid-background);
&:before {
content: "🚨";
content: '🚨';
}
}
}