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

6
assets/css/structures/_definition-content.scss
View File

@ -81,7 +81,7 @@
text-transform: uppercase;
&--avoid {
--word-signal-color: $dark-red;
--word-signal-color: var(--clr-avoid-text);
&:before {
@include icon__avoid();
@ -90,7 +90,7 @@
}
&--better {
--word-signal-color: $dark-green;
--word-signal-color: var(--clr-positive-text);
&:before {
@include icon__alt();
@ -106,7 +106,7 @@
}
&--warning {
--word-signal-color: $dark-yellow;
--word-signal-color: var(--clr-warning-text);
&:before {
@include icon__warning();

9
assets/css/structures/_definition-navigation.scss
View File

@ -15,15 +15,6 @@
}
}
.definition-navigation__sub-headline {
color: #333;
font-size: 1rem;
font-variant-caps: all-small-caps;
letter-spacing: 0.01em;
margin-top: 0;
word-spacing: 0.01em;
}
.definition-navigation__nav {
flex: 0 0 max-content;

8
assets/css/structures/_footer.scss
View File

@ -1,8 +1,12 @@
.site-footer {
display: flex;
flex-wrap: wrap;
grid-column: 1 / -1;
margin-top: 3rem;
ul > li {
display: inline-block;
& > * {
flex: 0 1 19rem;
margin-bottom: 1em;
margin-right: 1rem;
}
}

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;
}
}