mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-10-31 14:18:32 +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

3
.browserslistrc Normal file
View File

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not ie 10

2
.eleventy.js
View File

@@ -198,6 +198,8 @@ module.exports = function(config) {
config.setLibrary('md', mdIt); config.setLibrary('md', mdIt);
config.addPassthroughCopy({ [`./11ty/assets/js/**/*`]: '/js' });
// You can return your Config object (optional). // You can return your Config object (optional).
return { return {
dir: { dir: {

5
.postcssrc Normal file
View File

@@ -0,0 +1,5 @@
{
"plugins": {
"postcss-preset-env": true
}
}

7
11ty/_data/site.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
themes: [
{ value: 'system', label: 'Operating System' },
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' }
]
};

29
11ty/_includes/components/base/site-footer.njk Normal file
View File

@@ -0,0 +1,29 @@
<footer class="site-footer">
<nav aria-label="Complimentary">
<ul class="navigation-list">
<li>
<a href="/documentation/">Documentation</a>
</li>
<li>
<a href="/content-warning-guidelines/">Content Warning Guidelines</a>
</li>
<li>
<a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
</li>
</ul>
</nav>
<div role="group" class="js-theme-switch" aria-labelledby="clrmd-hl" hidden>
<h2 id="clrmd-hl" class="smcp-headline">Colour mode</h2>
{% for theme in site.themes %}
<div class="radio-wrapper">
<input
type="radio"
name="display-mode"
value="{{ theme.value }}"
id="display-mode-{{ theme.value }}"
>
<label for="display-mode-{{ theme.value }}">{{ theme.label }}</label>
</div>
{% endfor %}
</div>
</footer>

17
11ty/_includes/layouts/base.njk
View File

@@ -42,22 +42,9 @@
</head> </head>
<body> <body>
{% block content %}{% endblock content %} {% block content %}{% endblock content %}
<footer class="site-footer"> {% include 'components/base/site-footer.njk' %}
<nav aria-label="Complimentary">
<ul class="navigation-list">
<li>
<a href="/documentation/">Documentation</a>
</li>
<li>
<a href="/content-warning-guidelines/">Content Warning Guidelines</a>
</li>
<li>
<a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
</li>
</ul>
</nav>
</footer>
{% block pageScript %} {% block pageScript %}
{% endblock pageScript %} {% endblock pageScript %}
</body> </body>
<script defer src="/js/theme-switcher.js"></script>
</html> </html>

63
11ty/assets/js/theme-switcher.js Normal file
View File

@@ -0,0 +1,63 @@
function initThemeSwitch() {
let $switchContainer = document.querySelector('.js-theme-switch');
if (!$switchContainer) return;
$switchContainer.hidden = false;
let userOverwrite = ['light', 'dark'];
let $buttons = $switchContainer.querySelectorAll('[type="radio"]');
/**
* @type String
*/
let userThemeSetting = localStorage.getItem('sdUserTheme');
function setInitialState() {
if (userThemeSetting) {
document.documentElement.setAttribute(
'data-user-theme',
userThemeSetting
);
$switchContainer.querySelector(
`[value="${userThemeSetting}"]`
).checked = true;
} else {
$switchContainer.querySelector('[value="system"]').checked = true;
}
}
function setUserPreference(value) {
localStorage.setItem('sdUserTheme', value);
document.documentElement.setAttribute('data-user-theme', value);
}
function unsetUserPreference() {
localStorage.removeItem('sdUserTheme');
document.documentElement.removeAttribute('data-user-theme');
}
Array.from($buttons).forEach(function($button) {
$button.addEventListener('change', function() {
// only run the switch functionality for the currently active radio button
if (!$button.checked) return;
if (userOverwrite.includes($button.value)) {
setUserPreference($button.value);
} else {
unsetUserPreference();
}
});
});
setInitialState();
}
if (document.readyState === 'complete') {
initThemeSwitch();
} else {
window.addEventListener('load', function() {
initThemeSwitch();
});
}

8
11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js
View File

@@ -11,11 +11,11 @@ test('first item', (t) => {
renderDefinitionContentNextEntries(title, slug, testCollection), renderDefinitionContentNextEntries(title, slug, testCollection),
`<section class="definition-navigation definition__further-definitions_nav"> `<section class="definition-navigation definition__further-definitions_nav">
<h2 class="visually-hidden">Browse</h2> <h2 class="visually-hidden">Browse</h2>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3> <div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-previous"> <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
</nav> </nav>
</div> </div>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3> <div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-next"><ul class="definition-navigation__list"><li><a href=/definitions/ableism/>Ableism</a></li><li><a href=/definitions/barbaric/>Barbaric</a></li><li><a href=/definitions/biromantic/>Biromantic</a></li></ul></nav> <nav class="definition-navigation__nav" aria-labelledby="context-nav-next"><ul class="definition-navigation__list"><li><a href=/definitions/ableism/>Ableism</a></li><li><a href=/definitions/barbaric/>Barbaric</a></li><li><a href=/definitions/biromantic/>Biromantic</a></li></ul></nav>
</div> </div>
</section>` </section>`
@@ -28,11 +28,11 @@ test('last item', (t) => {
renderDefinitionContentNextEntries(title, slug, testCollection), renderDefinitionContentNextEntries(title, slug, testCollection),
`<section class="definition-navigation definition__further-definitions_nav"> `<section class="definition-navigation definition__further-definitions_nav">
<h2 class="visually-hidden">Browse</h2> <h2 class="visually-hidden">Browse</h2>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3> <div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-previous"> <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
<ul class="definition-navigation__list"><li><a href=/definitions/transgender/>Transgender</a></li><li><a href=/definitions/unreal/>unreal</a></li><li><a href=/definitions/white-fragility/>White Fragility</a></li></ul></nav> <ul class="definition-navigation__list"><li><a href=/definitions/transgender/>Transgender</a></li><li><a href=/definitions/unreal/>unreal</a></li><li><a href=/definitions/white-fragility/>White Fragility</a></li></ul></nav>
</div> </div>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3> <div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-next"></nav> <nav class="definition-navigation__nav" aria-labelledby="context-nav-next"></nav>
</div> </div>
</section>` </section>`

4
11ty/shortcodes/renderDefinitionContentNextEntries.js
View File

@@ -19,7 +19,7 @@ module.exports = function definitionContentNextEntries(
return `<section class="definition-navigation definition__further-definitions_nav"> return `<section class="definition-navigation definition__further-definitions_nav">
<h2 class="visually-hidden">Browse</h2> <h2 class="visually-hidden">Browse</h2>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3> <div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-previous"> <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
${ ${
previous.length previous.length
@@ -29,7 +29,7 @@ module.exports = function definitionContentNextEntries(
: '' : ''
}</nav> }</nav>
</div> </div>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3> <div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-next">${ <nav class="definition-navigation__nav" aria-labelledby="context-nav-next">${
next.length next.length
? `<ul class="definition-navigation__list">${next ? `<ul class="definition-navigation__list">${next

11
assets/css/_sass/_colours.scss
View File

@@ -1,11 +0,0 @@
$primary-color: hsl(0, 100%, 50%);
$secondary-color: hsl(120, 100%, 25%);
$dark-red: hsl(0, 100%, 32.2%);
$pink: hsl(349.5, 100%, 87.6%);
$black: hsl(0, 0%, 13%);
$white: hsl(0, 0%, 100%);
$dark-grey: hsl(0, 0%, 31%);
$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only

11
assets/css/abstracts/_colours.scss
View File

@@ -1,11 +0,0 @@
$primary-color: hsl(0, 100%, 50%);
$secondary-color: hsl(120, 100%, 25%);
$dark-red: hsl(0, 100%, 32.2%);
$pink: hsl(349.5, 100%, 87.6%);
$black: hsl(0, 0%, 13%);
$white: hsl(0, 0%, 100%);
$dark-grey: hsl(0, 0%, 31%);
$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only

36
assets/css/abstracts/_variables.scss
View File

@@ -1,20 +1,20 @@
$primary-color: hsl(0, 100%, 50%); $colors: (
$secondary-color: hsl(120, 100%, 25%); red: hsl(0, 100%, 50%),
green: hsl(120, 100%, 25%),
$dark-red: hsl(0, 100%, 32.2%); dark-red: hsl(0, 100%, 32.2%),
$pink: hsl(349.5, 100%, 87.6%); pink: hsl(349.5, 100%, 87.6%),
$dark-green: hsl(120, 100%, 15%); berry: hsl(350deg 54% 44%),
$yellow: hsl(50, 100%, 50%); dark-green: hsl(120s, 100%, 15%),
$dark-yellow: hsl(50, 100%, 20%); pale-green: hsl(120, 73%, 80%),
$pale-yellow: hsl(50, 100%, 86%); yellow: hsl(50, 100%, 50%),
$black: hsl(0, 0%, 13%); dark-yellow: hsl(50, 100%, 20%),
$white: hsl(0, 0%, 100%); pale-yellow: hsl(50, 100%, 86%),
black: hsl(0, 0%, 13%),
$dark-grey: hsl(0, 0%, 31%); black-transparent: hsla(0, 0%, 13%, 85%),
$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y white-transparent: hsl(0, 0%, 100%, 85%),
$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only light-grey: hsl(0, 0%, 92%),
dark-grey: hsl(0, 0%, 31%),
mid-grey: hsl(0, 0%, 46.3%)
);
$browser-context: 16; $browser-context: 16;
$lt-background-color: $pink;
$lt-background-color-warning: $pale-yellow;

4
assets/css/base.scss
View File

@@ -10,7 +10,7 @@
// 3. Base stuff // 3. Base stuff
@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection', @import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
'base/typography', './base/a', 'base/helpers'; 'base/typography', './base/a', 'base/helpers', 'base/radio-buttons', 'base/code';
// 4. Layout-related sections // 4. Layout-related sections
@import 'structures/header', 'structures/footer', 'structures/grid', @import 'structures/header', 'structures/footer', 'structures/grid',
@@ -18,7 +18,7 @@
'./structures/definition-content', './structures/definition-navigation'; './structures/definition-content', './structures/definition-navigation';
// 5. Components // 5. Components
@import 'components/word', 'components/lists', 'components/definitions', @import 'components/word', './components/box', 'components/lists', 'components/definitions',
'components/flag', 'components/alertbox'; 'components/flag', 'components/alertbox';
// 6. Page-specific styles // 6. Page-specific styles

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

@@ -1,18 +1,28 @@
a { a {
color: $black; color: var(--clr-foreground);
font-family: $ext-sans; font-family: $ext-sans;
margin: 1rem 0; margin-left: -0.25rem;
text-decoration-color: $dark-grey; margin-right: -0.25rem;
padding: 0.125rem 0.25rem;
text-decoration-color: var(--clr-border-main);
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-thickness: 0.1em; text-decoration-thickness: 0.1em;
&:hover, &:hover,
&:focus { &:focus {
text-decoration-color: $primary-color; text-decoration-color: var(--clr-primary);
} }
&:focus { &:focus {
background-color: $lt-background-color; background-color: var(--clr-accent);
color: $black; color: var(--clr-foreground);
outline: 0; // 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 { 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-family: $sans-serif;
font-size: pxToRem(20); font-size: pxToRem(20);
margin: 0; margin: 0;
padding: 2rem; padding: 2rem;
} }
code { [hidden] {
background-color: $dark-grey; display: none;
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;
}
} }
ul[class] { 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 { :root {
@include raw-color-names();
@include color-scheme-light();
--auto-grid-min-size: 17rem; --auto-grid-min-size: 17rem;
--l-gap: 1rem; --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 { ::selection {
background-color: #000000cc; background-color: var(--clr-foreground-transparent);
color: white; color: var(--clr-background);
} }

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

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

2
assets/css/components/_alertbox.scss
View File

@@ -1,5 +1,5 @@
.alertbox { .alertbox {
border: 2px solid black; border: 2px solid var(--clr-foreground);
padding: 2.25rem; padding: 2.25rem;
&__title { &__title {

31
assets/css/components/_box.scss Normal file
View File

@@ -0,0 +1,31 @@
.box {
background: var(--clr-foreground);
color: var(--clr-background);
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: var(--clr-background);
@media (prefers-color-scheme: dark) {
:root:not([data-user-theme='light']) &:focus {
background-color: var(--clr-pink);
}
}
}
*::selection {
background: var(--clr-background);
color: var(--clr-foreground);
}
}

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

@@ -1,32 +1,23 @@
.word__type { .word__type {
font-family: $con-sans; font-family: $con-sans;
font-size: 0.85rem; font-size: 0.85rem;
padding-right: 1rem; padding-right: 1rem;
text-align: right; text-align: right;
text-transform: uppercase; 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;
} }
.content-flag { .content-flag {
background-color: $lt-background-color-warning; background-color: var(--clr-warning-background);
overflow: hidden; overflow: hidden;
padding: 0 1rem 0 3rem; padding: 0 1rem 0 3rem;
position: relative; position: relative;
& a:focus {
background-color: var(--clr-background);
}
&:before { &:before {
content: "⚠️"; content: '⚠️';
left: 1rem; left: 1rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -34,10 +25,10 @@
} }
&--avoid { &--avoid {
background-color: $pink; background-color: var(--clr-avoid-background);
&:before { &:before {
content: "🚨"; content: '🚨';
} }
} }
} }

11
assets/css/components/_flag.scss
View File

@@ -6,19 +6,22 @@
margin: 0.5rem 0.75rem 0.25rem 0; margin: 0.5rem 0.75rem 0.25rem 0;
padding: 0.45rem 0.65rem; padding: 0.45rem 0.65rem;
text-transform: lowercase; text-transform: lowercase;
&--red { &--red {
background-color:$lt-background-color; background-color: var(--clr-avoid-background);
&:before { &:before {
@include icon__avoid(); @include icon__avoid();
@include icon__embed(); @include icon__embed();
} }
} }
&--yellow { &--yellow {
background-color: $lt-background-color-warning; background-color: var(--clr-warning-background);
&:before { &:before {
@include icon__warning(); @include icon__warning();
@include icon__embed(); @include icon__embed();
} }
} }
} }

8
assets/css/components/_word.scss
View File

@@ -74,7 +74,7 @@
text-transform: uppercase; text-transform: uppercase;
&--avoid { &--avoid {
--word-signal-color: $dark-red; --word-signal-color: var(--clr-dark-red);
&:before { &:before {
@include icon__avoid(); @include icon__avoid();
@@ -83,7 +83,7 @@
} }
&--better { &--better {
--word-signal-color: $dark-green; --word-signal-color: var(--clr-positive-text);
&:before { &:before {
@include icon__alt(); @include icon__alt();
@@ -97,8 +97,10 @@
@include icon__hanging(); @include icon__hanging();
} }
} }
&--warning { &--warning {
--word-signal-color: $dark-yellow; --word-signal-color: var(--clr-warning-text);
&:before { &:before {
@include icon__warning(); @include icon__warning();
@include icon__hanging(); @include icon__hanging();

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

@@ -81,7 +81,7 @@
text-transform: uppercase; text-transform: uppercase;
&--avoid { &--avoid {
--word-signal-color: $dark-red; --word-signal-color: var(--clr-avoid-text);
&:before { &:before {
@include icon__avoid(); @include icon__avoid();
@@ -90,7 +90,7 @@
} }
&--better { &--better {
--word-signal-color: $dark-green; --word-signal-color: var(--clr-positive-text);
&:before { &:before {
@include icon__alt(); @include icon__alt();
@@ -106,7 +106,7 @@
} }
&--warning { &--warning {
--word-signal-color: $dark-yellow; --word-signal-color: var(--clr-warning-text);
&:before { &:before {
@include icon__warning(); @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 { .definition-navigation__nav {
flex: 0 0 max-content; flex: 0 0 max-content;

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

@@ -1,8 +1,12 @@
.site-footer { .site-footer {
display: flex;
flex-wrap: wrap;
grid-column: 1 / -1; grid-column: 1 / -1;
margin-top: 3rem; 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 { .grid {
display: grid; display: grid;
grid-column-gap: 4rem; grid-column-gap: 4rem;
grid-row-gap: 10rem; grid-row-gap: 10rem;
grid-template-columns: repeat(4, [col] 1fr [col]); grid-template-columns: repeat(4, [col] 1fr [col]);
grid-template-rows: fit-content, fit-content, auto; grid-template-rows: fit-content, fit-content, auto;
} }
.auto-grid { .auto-grid {
display: grid; display: grid;
grid-gap: var(--l-gap); grid-gap: var(--l-gap);
grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr)); grid-template-columns: repeat(
auto-fit,
minmax(var(--auto-grid-min-size), 1fr)
);
} }
@media screen and (max-width: 880px) { @media screen and (max-width: 880px) {
.auto-grid { .auto-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
.small-left-grid { .small-left-grid {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
@media (min-width: #{pxToRem(800)}) { @media (min-width: #{pxToRem(800)}) {
grid-template-columns: 10rem 60ch; grid-template-columns: 10rem 60ch;
} }
} }
.block__dictionary { .block__dictionary {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 50rem; max-width: 50rem;
padding: 0 1rem; padding: 0 1rem;
} }
.block__word { .block__word {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-column: span 2; grid-column: span 2;
margin: 1rem; margin: 1rem;
} }
.block__type { .block__type {
align-items: flex-start; align-items: flex-start;
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;
} }
.list { .list {
margin: 1rem 0; margin: 1rem 0;
li { li {
margin: 0.75rem 0; margin: 0.75rem 0;
} }
a { a {
word-break: break-word; 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;
}
} }

452
package-lock.json generated
View File

@@ -1029,6 +1029,12 @@
} }
} }
}, },
"@csstools/convert-colors": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
"dev": true
},
"@iarna/toml": { "@iarna/toml": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
@@ -1913,27 +1919,27 @@
} }
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001066", "version": "1.0.30001084",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz",
"integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==", "integrity": "sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==",
"dev": true "dev": true
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.3.453", "version": "1.3.477",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.477.tgz",
"integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==", "integrity": "sha512-81p6DZ/XmHDD7O0ITJMa7ESo9bSCfE+v3Fny3MIYR0y77xmhoriu2ShNOLXcPS4eowF6dkxw6d2QqxTkS3DjBg==",
"dev": true "dev": true
}, },
"node-releases": { "node-releases": {
"version": "1.1.57", "version": "1.1.58",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
"integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw==", "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
"dev": true "dev": true
}, },
"postcss": { "postcss": {
"version": "7.0.31", "version": "7.0.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
"integrity": "sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==", "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
"dev": true, "dev": true,
"requires": { "requires": {
"chalk": "^2.4.2", "chalk": "^2.4.2",
@@ -4365,6 +4371,15 @@
"integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
"dev": true "dev": true
}, },
"css-blank-pseudo": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
"integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
"dev": true,
"requires": {
"postcss": "^7.0.5"
}
},
"css-color-names": { "css-color-names": {
"version": "0.0.4", "version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4381,6 +4396,16 @@
"timsort": "^0.3.0" "timsort": "^0.3.0"
} }
}, },
"css-has-pseudo": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
"integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
"dev": true,
"requires": {
"postcss": "^7.0.6",
"postcss-selector-parser": "^5.0.0-rc.4"
}
},
"css-modules-loader-core": { "css-modules-loader-core": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz", "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
@@ -4444,6 +4469,15 @@
} }
} }
}, },
"css-prefers-color-scheme": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
"integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
"dev": true,
"requires": {
"postcss": "^7.0.5"
}
},
"css-select": { "css-select": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -4537,6 +4571,12 @@
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==", "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
"dev": true "dev": true
}, },
"cssdb": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
"integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==",
"dev": true
},
"cssesc": { "cssesc": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -6056,6 +6096,12 @@
"integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==", "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
"dev": true "dev": true
}, },
"flatten": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
"dev": true
},
"follow-redirects": { "follow-redirects": {
"version": "1.5.10", "version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
@@ -8665,6 +8711,12 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
}, },
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
"dev": true
},
"lodash.clone": { "lodash.clone": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz", "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
@@ -8724,6 +8776,25 @@
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
"dev": true "dev": true
}, },
"lodash.template": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
"integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
"dev": true,
"requires": {
"lodash._reinterpolate": "^3.0.0",
"lodash.templatesettings": "^4.0.0"
}
},
"lodash.templatesettings": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
"integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
"dev": true,
"requires": {
"lodash._reinterpolate": "^3.0.0"
}
},
"lodash.uniq": { "lodash.uniq": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -10653,6 +10724,35 @@
} }
} }
}, },
"postcss-attribute-case-insensitive": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
"integrity": "sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-selector-parser": "^6.0.2"
},
"dependencies": {
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
"postcss-selector-parser": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
"integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
}
}
},
"postcss-calc": { "postcss-calc": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
@@ -10665,6 +10765,58 @@
"postcss-value-parser": "^3.3.1" "postcss-value-parser": "^3.3.1"
} }
}, },
"postcss-color-functional-notation": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
"integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-color-gray": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
"integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
"dev": true,
"requires": {
"@csstools/convert-colors": "^1.4.0",
"postcss": "^7.0.5",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-color-hex-alpha": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
"integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
"dev": true,
"requires": {
"postcss": "^7.0.14",
"postcss-values-parser": "^2.0.1"
}
},
"postcss-color-mod-function": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
"integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
"dev": true,
"requires": {
"@csstools/convert-colors": "^1.4.0",
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-color-rebeccapurple": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
"integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-colormin": { "postcss-colormin": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz", "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -10688,6 +10840,45 @@
"postcss-value-parser": "^3.0.0" "postcss-value-parser": "^3.0.0"
} }
}, },
"postcss-custom-media": {
"version": "7.0.8",
"resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
"integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
"dev": true,
"requires": {
"postcss": "^7.0.14"
}
},
"postcss-custom-properties": {
"version": "8.0.11",
"resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
"integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
"dev": true,
"requires": {
"postcss": "^7.0.17",
"postcss-values-parser": "^2.0.1"
}
},
"postcss-custom-selectors": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
"integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-selector-parser": "^5.0.0-rc.3"
}
},
"postcss-dir-pseudo-class": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
"integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-selector-parser": "^5.0.0-rc.3"
}
},
"postcss-discard-comments": { "postcss-discard-comments": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -10724,6 +10915,62 @@
"postcss": "^7.0.0" "postcss": "^7.0.0"
} }
}, },
"postcss-double-position-gradients": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
"integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
"dev": true,
"requires": {
"postcss": "^7.0.5",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-env-function": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
"integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-focus-visible": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
"integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-focus-within": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
"integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-font-variant": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz",
"integrity": "sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-gap-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
"integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-html": { "postcss-html": {
"version": "0.36.0", "version": "0.36.0",
"resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz", "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
@@ -10733,6 +10980,37 @@
"htmlparser2": "^3.10.0" "htmlparser2": "^3.10.0"
} }
}, },
"postcss-image-set-function": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
"integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-initial": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
"integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
"dev": true,
"requires": {
"lodash.template": "^4.5.0",
"postcss": "^7.0.2"
}
},
"postcss-lab-function": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
"integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
"dev": true,
"requires": {
"@csstools/convert-colors": "^1.4.0",
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-less": { "postcss-less": {
"version": "3.1.4", "version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz", "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
@@ -10742,6 +11020,24 @@
"postcss": "^7.0.14" "postcss": "^7.0.14"
} }
}, },
"postcss-logical": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
"integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-media-minmax": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
"integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-media-query-parser": { "postcss-media-query-parser": {
"version": "0.2.3", "version": "0.2.3",
"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -10999,6 +11295,15 @@
} }
} }
}, },
"postcss-nesting": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
"integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-normalize-charset": { "postcss-normalize-charset": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -11109,6 +11414,89 @@
"postcss-value-parser": "^3.0.0" "postcss-value-parser": "^3.0.0"
} }
}, },
"postcss-overflow-shorthand": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
"integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-page-break": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
"integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-place": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
"integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-values-parser": "^2.0.0"
}
},
"postcss-preset-env": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
"integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
"dev": true,
"requires": {
"autoprefixer": "^9.6.1",
"browserslist": "^4.6.4",
"caniuse-lite": "^1.0.30000981",
"css-blank-pseudo": "^0.1.4",
"css-has-pseudo": "^0.10.0",
"css-prefers-color-scheme": "^3.1.1",
"cssdb": "^4.4.0",
"postcss": "^7.0.17",
"postcss-attribute-case-insensitive": "^4.0.1",
"postcss-color-functional-notation": "^2.0.1",
"postcss-color-gray": "^5.0.0",
"postcss-color-hex-alpha": "^5.0.3",
"postcss-color-mod-function": "^3.0.3",
"postcss-color-rebeccapurple": "^4.0.1",
"postcss-custom-media": "^7.0.8",
"postcss-custom-properties": "^8.0.11",
"postcss-custom-selectors": "^5.1.2",
"postcss-dir-pseudo-class": "^5.0.0",
"postcss-double-position-gradients": "^1.0.0",
"postcss-env-function": "^2.0.2",
"postcss-focus-visible": "^4.0.0",
"postcss-focus-within": "^3.0.0",
"postcss-font-variant": "^4.0.0",
"postcss-gap-properties": "^2.0.0",
"postcss-image-set-function": "^3.0.1",
"postcss-initial": "^3.0.0",
"postcss-lab-function": "^2.0.1",
"postcss-logical": "^3.0.0",
"postcss-media-minmax": "^4.0.0",
"postcss-nesting": "^7.0.0",
"postcss-overflow-shorthand": "^2.0.0",
"postcss-page-break": "^2.0.0",
"postcss-place": "^4.0.1",
"postcss-pseudo-class-any-link": "^6.0.0",
"postcss-replace-overflow-wrap": "^3.0.0",
"postcss-selector-matches": "^4.0.0",
"postcss-selector-not": "^4.0.0"
}
},
"postcss-pseudo-class-any-link": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
"integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
"dev": true,
"requires": {
"postcss": "^7.0.2",
"postcss-selector-parser": "^5.0.0-rc.3"
}
},
"postcss-reduce-initial": { "postcss-reduce-initial": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz", "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -11133,6 +11521,15 @@
"postcss-value-parser": "^3.0.0" "postcss-value-parser": "^3.0.0"
} }
}, },
"postcss-replace-overflow-wrap": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
"integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
"dev": true,
"requires": {
"postcss": "^7.0.2"
}
},
"postcss-reporter": { "postcss-reporter": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
@@ -11207,6 +11604,26 @@
"postcss": "^7.0.6" "postcss": "^7.0.6"
} }
}, },
"postcss-selector-matches": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
"integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"postcss": "^7.0.2"
}
},
"postcss-selector-not": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
"integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"postcss": "^7.0.2"
}
},
"postcss-selector-parser": { "postcss-selector-parser": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
@@ -11271,6 +11688,17 @@
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true "dev": true
}, },
"postcss-values-parser": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
"integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
"dev": true,
"requires": {
"flatten": "^1.0.2",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
},
"posthtml": { "posthtml": {
"version": "0.11.6", "version": "0.11.6",
"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.11.6.tgz", "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.11.6.tgz",

2
package.json
View File

@@ -60,6 +60,7 @@
"markdown-it-prism": "^2.0.5" "markdown-it-prism": "^2.0.5"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.8.0",
"ava": "^3.8.2", "ava": "^3.8.2",
"concurrently": "^5.2.0", "concurrently": "^5.2.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
@@ -70,6 +71,7 @@
"lint-staged": "^10.2.7", "lint-staged": "^10.2.7",
"markdownlint-cli": "^0.23.1", "markdownlint-cli": "^0.23.1",
"parcel-bundler": "^1.12.4", "parcel-bundler": "^1.12.4",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"sass": "^1.26.7", "sass": "^1.26.7",
"slugify": "^1.4.0", "slugify": "^1.4.0",