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

24
assets/css/base/_a.scss
View File

@ -1,18 +1,28 @@
a {
color: $black;
color: var(--clr-foreground);
font-family: $ext-sans;
margin: 1rem 0;
text-decoration-color: $dark-grey;
margin-left: -0.25rem;
margin-right: -0.25rem;
padding: 0.125rem 0.25rem;
text-decoration-color: var(--clr-border-main);
text-decoration-line: underline;
text-decoration-thickness: 0.1em;
&:hover,
&:focus {
text-decoration-color: $primary-color;
text-decoration-color: var(--clr-primary);
}
&:focus {
background-color: $lt-background-color;
color: $black;
outline: 0;
background-color: var(--clr-accent);
color: var(--clr-foreground);
// makes focus visible in windows high contrast mode, do not delete
outline: 2px solid transparent;
/* @media (prefers-color-scheme: dark) {
:root:not([data-user-theme='light']) & {
color: var(--clr-background);
}
} */
}
}

20
assets/css/base/_base.scss
View File

@ -1,25 +1,15 @@
body {
border-top: 1rem solid $primary-color;
background-color: var(--clr-background);
border-top: 1rem solid var(--clr-primary);
color: var(--clr-foreground);
font-family: $sans-serif;
font-size: pxToRem(20);
margin: 0;
padding: 2rem;
}
code {
background-color: $dark-grey;
border: pxToRem(1px) solid $black;
border-radius: 0.25em;
color: $white;
font-size: 95%;
padding: 0.15em;
pre & {
border: none;
border-radius: 0;
font-size: inherit;
padding: 0;
}
[hidden] {
display: none;
}
ul[class] {

15
assets/css/base/_code.scss Normal file
View File

@ -0,0 +1,15 @@
code {
background-color: var(--clr-foreground);
border: pxToRem(1px) solid var(--clr-foreground-transparent);
border-radius: 0.25em;
color: var(--clr-background);
font-size: 95%;
padding: 0.15em;
pre & {
border: none;
border-radius: 0;
font-size: inherit;
padding: 0;
}
}

63
assets/css/base/_custom-properties.scss
View File

@ -1,4 +1,67 @@
// create variables for all colours
@mixin raw-color-names {
@each $name, $value in $colors {
--clr-#{$name}: #{$value};
}
}
// map the raw colours to abstract names in standard color mode
// we map the colour values here to prepare for dark mode
// with these mapping we express the _design intention_ rather than the colour value
@mixin color-scheme-light {
--clr-primary: var(--clr-red);
--clr-secondary: var(--clr-green);
--clr-foreground: var(--clr-black);
--clr-foreground-transparent: var(--clr-black-transparent);
--clr-background: white;
--clr-accent: var(--clr-pink);
--clr-border-main: var(--clr-dark-grey);
--clr-positive: var(--clr-green);
--clr-positive-text: var(--clr-dark-green);
--clr-positive-background: var(--clr-pale-green);
--clr-warning: var(--clr-yellow);
--clr-warning-background: var(--clr-pale-yellow);
--clr-warning-text: var(--clr-dark-yellow);
--clr-avoid: var(--clr-red);
--clr-avoid-background: var(--clr-pink);
--clr-avoid-text: var(--clr-dark-red);
}
// update colors which need to change in dark mode
@mixin color-scheme-dark {
--clr-foreground: var(--clr-light-grey);
--clr-foreground-transparent: var(--clr-white-transparent);
--clr-background: var(--clr-black);
--clr-accent: var(--clr-berry);
--clr-positive-text: var(--clr-pale-green);
--clr-positive-background: var(--clr-dark-green);
--clr-warning-background: var(--clr-dark-yellow);
--clr-warning-text: var(--clr-pale-yellow);
--clr-avoid-background: var(--clr-dark-red);
--clr-avoid-text: var(--clr-pink);
}
:root {
@include raw-color-names();
@include color-scheme-light();
--auto-grid-min-size: 17rem;
--l-gap: 1rem;
}
@media (prefers-color-scheme: dark) {
:root:not([data-user-theme='light']) {
@include color-scheme-dark();
}
}
:root[data-user-theme='dark'] {
@include color-scheme-dark();
}

53
assets/css/base/_radio-buttons.scss Normal file
View File

@ -0,0 +1,53 @@
.radio-wrapper {
& + & {
margin-top: 0.25rem;
}
[type='radio'] {
opacity: 0;
position: absolute;
}
& label {
--inner-size: 0.25rem;
--outer-top: 0.33rem;
line-height: 1;
padding-left: 1.55rem;
position: relative;
&::after,
&::before {
border-radius: 50%;
content: '';
display: block;
position: absolute;
}
&::after {
border: var(--inner-size) solid var(--clr-foreground);
left: var(--inner-size);
opacity: 0;
top: calc(var(--inner-size) + var(--outer-top));
transition: opacity 0.12s ease-out;
}
&::before {
background: var(--clr-background);
border: 0.125rem solid var(--clr-foreground);
height: 1rem;
left: 0;
top: var(--outer-top);
width: 1rem;
}
}
[type='radio']:focus + label::before {
outline: 0.125rem solid var(--clr-foreground);
outline-offset: 0.125rem;
}
[type='radio']:checked + label::after {
opacity: 1;
}
}

4
assets/css/base/_selection.scss
View File

@ -1,4 +1,4 @@
::selection {
background-color: #000000cc;
color: white;
background-color: var(--clr-foreground-transparent);
color: var(--clr-background);
}

76
assets/css/base/_typography.scss
View File

@ -1,63 +1,71 @@
h1 {
font-family: $ext-sans;
font-weight: $bold;
font-family: $ext-sans;
font-weight: $bold;
}
h1,
h2,
h3,
h4 {
margin-bottom: 0.5em;
margin-top: 1em;
word-break: break-word;
margin-bottom: 0.5em;
margin-top: 1em;
word-break: break-word;
}
p {
font-size: 1.25rem;
line-height: 1.25;
margin: 0.75rem 0;
font-size: 1.25rem;
line-height: 1.25;
margin: 0.75rem 0;
}
.thicc-headline {
// a sensible base font size
font-size: 3rem;
line-height: 0.75;
margin: 0.5rem 0rem;
padding: 0;
// a sensible base font size
font-size: 3rem;
line-height: 0.75;
margin: 0.5rem 0rem;
padding: 0;
}
@media (min-width: 51rem) and (min-height: 400px) {
// a dramatic font size
.thicc-headline {
font-size: 12vh;
}
// a dramatic font size
.thicc-headline {
font-size: 12vh;
}
}
@media (min-width: 51rem) and (min-height: 850px) {
// cap the maximum font size of the title
// at the same size that 12vh computes to
// when the viewport is 850px high
// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
.thicc-headline {
font-size: 6.75rem;
}
// cap the maximum font size of the title
// at the same size that 12vh computes to
// when the viewport is 850px high
// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
.thicc-headline {
font-size: 6.75rem;
}
}
.main-headline {
font-family: orpheuspro, Palatino, Times, serif;
font-size: 3.5rem;
line-height: 1.2;
margin: 0;
font-family: orpheuspro, Palatino, Times, serif;
font-size: 3.5rem;
line-height: 1.2;
margin: 0;
}
.sub-headline {
font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $bold;
letter-spacing: 0.1;
margin: .75rem 0;
font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $bold;
letter-spacing: 0.1;
margin: 0.75rem 0;
}
.smcp-headline {
font-size: 1rem;
font-variant-caps: all-small-caps;
letter-spacing: 0.01em;
margin-top: 0;
word-spacing: 0.01em;
}
.small {
font-size: 0.75em;
font-size: 0.75em;
}