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

102
assets/css/structures/_grid.scss
View File

@ -1,88 +1,62 @@
.grid {
display: grid;
grid-column-gap: 4rem;
grid-row-gap: 10rem;
grid-template-columns: repeat(4, [col] 1fr [col]);
grid-template-rows: fit-content, fit-content, auto;
display: grid;
grid-column-gap: 4rem;
grid-row-gap: 10rem;
grid-template-columns: repeat(4, [col] 1fr [col]);
grid-template-rows: fit-content, fit-content, auto;
}
.auto-grid {
display: grid;
grid-gap: var(--l-gap);
grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
display: grid;
grid-gap: var(--l-gap);
grid-template-columns: repeat(
auto-fit,
minmax(var(--auto-grid-min-size), 1fr)
);
}
@media screen and (max-width: 880px) {
.auto-grid {
display: flex;
flex-direction: column;
}
.auto-grid {
display: flex;
flex-direction: column;
}
}
.small-left-grid {
display: grid;
grid-gap: 1rem;
display: grid;
grid-gap: 1rem;
@media (min-width: #{pxToRem(800)}) {
grid-template-columns: 10rem 60ch;
}
@media (min-width: #{pxToRem(800)}) {
grid-template-columns: 10rem 60ch;
}
}
.block__dictionary {
margin-left: auto;
margin-right: auto;
max-width: 50rem;
padding: 0 1rem;
margin-left: auto;
margin-right: auto;
max-width: 50rem;
padding: 0 1rem;
}
.block__word {
display: flex;
flex-direction: column;
grid-column: span 2;
margin: 1rem;
display: flex;
flex-direction: column;
grid-column: span 2;
margin: 1rem;
}
.block__type {
align-items: flex-start;
display: grid;
grid-template-columns: 1fr 4fr;
align-items: flex-start;
display: grid;
grid-template-columns: 1fr 4fr;
}
.list {
margin: 1rem 0;
li {
margin: 0.75rem 0;
}
a {
word-break: break-word;
}
}
.box {
background: black;
color: white;
grid-column: span 2;
height: auto;
margin: 1rem 0;
padding: 1rem;
@media (min-width: #{pxToRem(768)}) {
margin: 1rem 0.5rem;
}
&--divider {
margin: 2rem 0;
}
a {
color: white;
&:focus {
background-color: $lt-background-color;
color: $black;
}
}
*::selection {
background: white; /* WebKit/Blink Browsers */
color: black;
}
margin: 1rem 0;
li {
margin: 0.75rem 0;
}
a {
word-break: break-word;
}
}