diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 00000000..8ef3c8de
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie 10
diff --git a/.eleventy.js b/.eleventy.js
index 7e285be7..eda76520 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -198,6 +198,8 @@ module.exports = function(config) {
config.setLibrary('md', mdIt);
+ config.addPassthroughCopy({ [`./11ty/assets/js/**/*`]: '/js' });
+
// You can return your Config object (optional).
return {
dir: {
diff --git a/.postcssrc b/.postcssrc
new file mode 100644
index 00000000..0430e173
--- /dev/null
+++ b/.postcssrc
@@ -0,0 +1,5 @@
+{
+ "plugins": {
+ "postcss-preset-env": true
+ }
+}
diff --git a/11ty/_data/site.js b/11ty/_data/site.js
new file mode 100644
index 00000000..b4daab26
--- /dev/null
+++ b/11ty/_data/site.js
@@ -0,0 +1,7 @@
+module.exports = {
+ themes: [
+ { value: 'system', label: 'Operating System' },
+ { value: 'light', label: 'Light' },
+ { value: 'dark', label: 'Dark' }
+ ]
+};
diff --git a/11ty/_includes/components/base/site-footer.njk b/11ty/_includes/components/base/site-footer.njk
new file mode 100644
index 00000000..245c47de
--- /dev/null
+++ b/11ty/_includes/components/base/site-footer.njk
@@ -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>
diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk
index 8bb518d2..f3a4dc96 100644
--- a/11ty/_includes/layouts/base.njk
+++ b/11ty/_includes/layouts/base.njk
@@ -42,22 +42,9 @@
</head>
<body>
{% block content %}{% endblock content %}
- <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>
- </footer>
+ {% include 'components/base/site-footer.njk' %}
{% block pageScript %}
{% endblock pageScript %}
</body>
+ <script defer src="/js/theme-switcher.js"></script>
</html>
diff --git a/11ty/assets/js/theme-switcher.js b/11ty/assets/js/theme-switcher.js
new file mode 100644
index 00000000..9edffcd1
--- /dev/null
+++ b/11ty/assets/js/theme-switcher.js
@@ -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();
+ });
+}
diff --git a/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js b/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js
index 4c80f390..561f51d9 100644
--- a/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js
+++ b/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js
@@ -11,11 +11,11 @@ test('first item', (t) => {
renderDefinitionContentNextEntries(title, slug, testCollection),
`<section class="definition-navigation definition__further-definitions_nav">
<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>
</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>
</div>
</section>`
@@ -28,11 +28,11 @@ test('last item', (t) => {
renderDefinitionContentNextEntries(title, slug, testCollection),
`<section class="definition-navigation definition__further-definitions_nav">
<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">
<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><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>
</div>
</section>`
diff --git a/11ty/shortcodes/renderDefinitionContentNextEntries.js b/11ty/shortcodes/renderDefinitionContentNextEntries.js
index 66207429..c621f511 100644
--- a/11ty/shortcodes/renderDefinitionContentNextEntries.js
+++ b/11ty/shortcodes/renderDefinitionContentNextEntries.js
@@ -19,7 +19,7 @@ module.exports = function definitionContentNextEntries(
return `<section class="definition-navigation definition__further-definitions_nav">
<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">
${
previous.length
@@ -29,7 +29,7 @@ module.exports = function definitionContentNextEntries(
: ''
}</nav>
</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">${
next.length
? `<ul class="definition-navigation__list">${next
diff --git a/assets/css/_sass/_colours.scss b/assets/css/_sass/_colours.scss
deleted file mode 100644
index 85477f53..00000000
--- a/assets/css/_sass/_colours.scss
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/assets/css/abstracts/_colours.scss b/assets/css/abstracts/_colours.scss
deleted file mode 100644
index 85477f53..00000000
--- a/assets/css/abstracts/_colours.scss
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss
index d1bf4240..28353d07 100644
--- a/assets/css/abstracts/_variables.scss
+++ b/assets/css/abstracts/_variables.scss
@@ -1,20 +1,20 @@
-$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%);
-$dark-green: hsl(120, 100%, 15%);
-$yellow: hsl(50, 100%, 50%);
-$dark-yellow: hsl(50, 100%, 20%);
-$pale-yellow: hsl(50, 100%, 86%);
-$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
+$colors: (
+ red: hsl(0, 100%, 50%),
+ green: hsl(120, 100%, 25%),
+ dark-red: hsl(0, 100%, 32.2%),
+ pink: hsl(349.5, 100%, 87.6%),
+ berry: hsl(350deg 54% 44%),
+ dark-green: hsl(120s, 100%, 15%),
+ pale-green: hsl(120, 73%, 80%),
+ yellow: hsl(50, 100%, 50%),
+ dark-yellow: hsl(50, 100%, 20%),
+ pale-yellow: hsl(50, 100%, 86%),
+ black: hsl(0, 0%, 13%),
+ black-transparent: hsla(0, 0%, 13%, 85%),
+ white-transparent: hsl(0, 0%, 100%, 85%),
+ light-grey: hsl(0, 0%, 92%),
+ dark-grey: hsl(0, 0%, 31%),
+ mid-grey: hsl(0, 0%, 46.3%)
+);
$browser-context: 16;
-
-$lt-background-color: $pink;
-$lt-background-color-warning: $pale-yellow;
diff --git a/assets/css/base.scss b/assets/css/base.scss
index 07e65e2a..7956537e 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -10,7 +10,7 @@
// 3. Base stuff
@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
@import 'structures/header', 'structures/footer', 'structures/grid',
@@ -18,7 +18,7 @@
'./structures/definition-content', './structures/definition-navigation';
// 5. Components
-@import 'components/word', 'components/lists', 'components/definitions',
+@import 'components/word', './components/box', 'components/lists', 'components/definitions',
'components/flag', 'components/alertbox';
// 6. Page-specific styles
diff --git a/assets/css/base/_a.scss b/assets/css/base/_a.scss
index b475a7d8..51b3f2ae 100644
--- a/assets/css/base/_a.scss
+++ b/assets/css/base/_a.scss
@@ -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);
+ }
+ } */
}
}
diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss
index 4a860828..01b2ef02 100644
--- a/assets/css/base/_base.scss
+++ b/assets/css/base/_base.scss
@@ -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] {
diff --git a/assets/css/base/_code.scss b/assets/css/base/_code.scss
new file mode 100644
index 00000000..f7d03430
--- /dev/null
+++ b/assets/css/base/_code.scss
@@ -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;
+ }
+}
diff --git a/assets/css/base/_custom-properties.scss b/assets/css/base/_custom-properties.scss
index 8a227a85..33acdc4a 100644
--- a/assets/css/base/_custom-properties.scss
+++ b/assets/css/base/_custom-properties.scss
@@ -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();
+}
diff --git a/assets/css/base/_radio-buttons.scss b/assets/css/base/_radio-buttons.scss
new file mode 100644
index 00000000..166c6283
--- /dev/null
+++ b/assets/css/base/_radio-buttons.scss
@@ -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;
+ }
+}
diff --git a/assets/css/base/_selection.scss b/assets/css/base/_selection.scss
index 065797ba..cab37b72 100644
--- a/assets/css/base/_selection.scss
+++ b/assets/css/base/_selection.scss
@@ -1,4 +1,4 @@
::selection {
- background-color: #000000cc;
- color: white;
+ background-color: var(--clr-foreground-transparent);
+ color: var(--clr-background);
}
diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss
index c5815b16..3623ca6d 100644
--- a/assets/css/base/_typography.scss
+++ b/assets/css/base/_typography.scss
@@ -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;
}
diff --git a/assets/css/components/_alertbox.scss b/assets/css/components/_alertbox.scss
index 2d9ccd62..5dbbee7e 100644
--- a/assets/css/components/_alertbox.scss
+++ b/assets/css/components/_alertbox.scss
@@ -1,5 +1,5 @@
.alertbox {
- border: 2px solid black;
+ border: 2px solid var(--clr-foreground);
padding: 2.25rem;
&__title {
diff --git a/assets/css/components/_box.scss b/assets/css/components/_box.scss
new file mode 100644
index 00000000..2e27b1e5
--- /dev/null
+++ b/assets/css/components/_box.scss
@@ -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);
+ }
+}
diff --git a/assets/css/components/_definitions.scss b/assets/css/components/_definitions.scss
index 9ef076f6..492edd5d 100644
--- a/assets/css/components/_definitions.scss
+++ b/assets/css/components/_definitions.scss
@@ -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: '🚨';
}
}
}
diff --git a/assets/css/components/_flag.scss b/assets/css/components/_flag.scss
index f1409b0c..31533069 100644
--- a/assets/css/components/_flag.scss
+++ b/assets/css/components/_flag.scss
@@ -6,19 +6,22 @@
margin: 0.5rem 0.75rem 0.25rem 0;
padding: 0.45rem 0.65rem;
text-transform: lowercase;
+
&--red {
- background-color:$lt-background-color;
+ background-color: var(--clr-avoid-background);
+
&:before {
@include icon__avoid();
@include icon__embed();
}
}
+
&--yellow {
- background-color: $lt-background-color-warning;
-
+ background-color: var(--clr-warning-background);
+
&:before {
@include icon__warning();
@include icon__embed();
}
}
-}
\ No newline at end of file
+}
diff --git a/assets/css/components/_word.scss b/assets/css/components/_word.scss
index 17e6c016..15ea5bfc 100644
--- a/assets/css/components/_word.scss
+++ b/assets/css/components/_word.scss
@@ -74,7 +74,7 @@
text-transform: uppercase;
&--avoid {
- --word-signal-color: $dark-red;
+ --word-signal-color: var(--clr-dark-red);
&:before {
@include icon__avoid();
@@ -83,7 +83,7 @@
}
&--better {
- --word-signal-color: $dark-green;
+ --word-signal-color: var(--clr-positive-text);
&:before {
@include icon__alt();
@@ -97,8 +97,10 @@
@include icon__hanging();
}
}
+
&--warning {
- --word-signal-color: $dark-yellow;
+ --word-signal-color: var(--clr-warning-text);
+
&:before {
@include icon__warning();
@include icon__hanging();
diff --git a/assets/css/structures/_definition-content.scss b/assets/css/structures/_definition-content.scss
index 27d4a9cc..19a12493 100644
--- a/assets/css/structures/_definition-content.scss
+++ b/assets/css/structures/_definition-content.scss
@@ -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();
diff --git a/assets/css/structures/_definition-navigation.scss b/assets/css/structures/_definition-navigation.scss
index 53462a97..f5ab81c3 100644
--- a/assets/css/structures/_definition-navigation.scss
+++ b/assets/css/structures/_definition-navigation.scss
@@ -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;
diff --git a/assets/css/structures/_footer.scss b/assets/css/structures/_footer.scss
index c3eca870..32748275 100644
--- a/assets/css/structures/_footer.scss
+++ b/assets/css/structures/_footer.scss
@@ -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;
}
}
diff --git a/assets/css/structures/_grid.scss b/assets/css/structures/_grid.scss
index e6841075..887ad922 100644
--- a/assets/css/structures/_grid.scss
+++ b/assets/css/structures/_grid.scss
@@ -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;
+ }
}
diff --git a/package-lock.json b/package-lock.json
index 2720fcb8..421614f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
@@ -1913,27 +1919,27 @@
}
},
"caniuse-lite": {
- "version": "1.0.30001066",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
- "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==",
+ "version": "1.0.30001084",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz",
+ "integrity": "sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==",
"dev": true
},
"electron-to-chromium": {
- "version": "1.3.453",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
- "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==",
+ "version": "1.3.477",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.477.tgz",
+ "integrity": "sha512-81p6DZ/XmHDD7O0ITJMa7ESo9bSCfE+v3Fny3MIYR0y77xmhoriu2ShNOLXcPS4eowF6dkxw6d2QqxTkS3DjBg==",
"dev": true
},
"node-releases": {
- "version": "1.1.57",
- "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
- "integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw==",
+ "version": "1.1.58",
+ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
+ "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
"dev": true
},
"postcss": {
- "version": "7.0.31",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.31.tgz",
- "integrity": "sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==",
+ "version": "7.0.32",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+ "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -4365,6 +4371,15 @@
"integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
"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": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4381,6 +4396,16 @@
"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": {
"version": "1.1.0",
"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": {
"version": "2.1.0",
"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==",
"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": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -6056,6 +6096,12 @@
"integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
"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": {
"version": "1.5.10",
"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",
"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": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
@@ -8724,6 +8776,25 @@
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
"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": {
"version": "4.5.0",
"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": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
@@ -10665,6 +10765,58 @@
"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": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -10688,6 +10840,45 @@
"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": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -10724,6 +10915,62 @@
"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": {
"version": "0.36.0",
"resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
@@ -10733,6 +10980,37 @@
"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": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
@@ -10742,6 +11020,24 @@
"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": {
"version": "0.2.3",
"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": {
"version": "4.0.1",
"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-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": {
"version": "4.0.3",
"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-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": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
@@ -11207,6 +11604,26 @@
"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": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
@@ -11271,6 +11688,17 @@
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"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": {
"version": "0.11.6",
"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.11.6.tgz",
diff --git a/package.json b/package.json
index b84ef553..57da579d 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"markdown-it-prism": "^2.0.5"
},
"devDependencies": {
+ "autoprefixer": "^9.8.0",
"ava": "^3.8.2",
"concurrently": "^5.2.0",
"eslint": "^6.8.0",
@@ -70,6 +71,7 @@
"lint-staged": "^10.2.7",
"markdownlint-cli": "^0.23.1",
"parcel-bundler": "^1.12.4",
+ "postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"sass": "^1.26.7",
"slugify": "^1.4.0",