Skip to content

Commit 9be0908

Browse files
jonathantnealjonathantneal
committed
Update 4.2.0
1 parent 4d0d01f commit 9be0908

5 files changed

Lines changed: 207 additions & 18 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Changes to cssdb
22

3-
### 4.2.0 (November 3, 2018)
3+
### 4.2.0 (November 4, 2018)
44

55
- Added: Documentation links to MDN
66
- Added: `color-adjust` Property

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,21 @@
1616
"start:nobadges": "node tasks/start --no-badges",
1717
"test": "npm run test:css && npm run test:json",
1818
"test:css": "stylelint tasks/style-template.css",
19-
"test:json": "node tasks/test"
19+
"test:json": "node tasks/test",
20+
"watch": "http-server gh-pages"
2021
},
2122
"devDependencies": {
2223
"browserslist": "^4.3.4",
23-
"caniuse-lite": "^1.0.30000904",
24+
"caniuse-lite": "^1.0.30000905",
25+
"css-prefers-color-scheme": "^3.0.0",
2426
"cssnano": "^4.1.7",
2527
"eslit": "^5.0.0",
2628
"fse": "^4.0.1",
29+
"http-server": "^0.11.1",
2730
"marked": "^0.5.1",
28-
"node-fetch": "^2.2.0",
31+
"node-fetch": "^2.2.1",
2932
"postcss": "^7.0.5",
30-
"postcss-preset-env": "^6.3.0",
33+
"postcss-preset-env": "^6.3.1",
3134
"pre-commit": "^1.2.2",
3235
"stylelint": "^9.7.1",
3336
"stylelint-config-dev": "^4.0.0"

‎tasks/start-template.html‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<link href="style.css" rel="stylesheet">
1717

1818
<header class="cssdb-header">
19-
<img class="cssdb-header-branding" src="cssdb.svg" alt="cssdb logo" width="90" height="90">
19+
<img class="cssdb-header-branding" src="cssdb.svg" alt="cssdb logo" width="90" height="90" role="presentation">
2020
<div class="cssdb-header-heading">
2121
<h1 class="cssdb-header-title">
2222
What’s next for CSS?
@@ -31,7 +31,7 @@ <h1 class="cssdb-header-title">
3131
<main class="cssdb-features" id="features">
3232
${features.map(feature => `<section class="cssdb-feature" id="${feature.id}">
3333
<header class="cssdb-feature-header">
34-
<img class="cssdb-feature-stage" src="stage-${feature.stage === -1 ? 'X' : feature.stage}.svg" alt="" width="62" height="62">
34+
<img class="cssdb-feature-stage" src="stage-${feature.stage === -1 ? 'X' : feature.stage}.svg" alt="" width="62" height="62" role="presentation">
3535
<div class="cssdb-feature-header-content">
3636
<h2 class="cssdb-feature-heading">
3737
<a href="#${feature.id}">${feature.title}</a>
@@ -94,7 +94,7 @@ <h2 class="cssdb-feature-heading">
9494

9595
<script>
9696
document.addEventListener('click', function (event) {
97-
var closestHash = event.target.closest('a[href^="#"]');
97+
var closestHash = event.target.closest && event.target.closest('a[href^="#"]');
9898

9999
if (closestHash) {
100100
var target = document.getElementById(closestHash.hash.slice(1));
@@ -140,4 +140,45 @@ <h2 class="cssdb-feature-heading">
140140
}
141141
}
142142
</script>
143+
<script src="https://unpkg.com/css-prefers-color-scheme@3.0.0/browser.min.js"></script>
144+
<script>
145+
prefersColorScheme=initPrefersColorScheme();
146+
147+
(function () {
148+
prefersColorScheme.onChange = function () {
149+
if (!isSchemeManuallyChanging) {
150+
$inputSystem.checked = true;
151+
}
152+
};
153+
154+
var schemes = { system: prefersColorScheme.scheme };
155+
var isSchemeManuallyChanging = false;
156+
157+
var create = function (type, attrs) {
158+
var $element = document.createElement(type);
159+
160+
for (var attr in Object(attrs)) {
161+
$element.setAttribute(attr, attrs[attr]);
162+
}
163+
164+
return $element;
165+
}
166+
167+
var $toggle = create('span', { class: 'cssdb-color_scheme_toggle', role: 'group', title: 'select a color scheme' });
168+
var $inputDark = $toggle.appendChild(create('input', { type: 'radio', name: 'scheme', value: 'dark', 'aria-label': 'dark color scheme' }));
169+
var $inputSystem = $toggle.appendChild(create('input', { type: 'radio', name: 'scheme', value: 'system', 'aria-label': 'system color scheme', checked: '' }));
170+
var $inputLight = $toggle.appendChild(create('input', { type: 'radio', name: 'scheme', value: 'light', 'aria-label': 'light color scheme' }));
171+
var $label = $toggle.appendChild(create('label'));
172+
173+
$toggle.addEventListener('change', function (event) {
174+
var scheme = event.target.value;
175+
176+
isSchemeManuallyChanging = true;
177+
prefersColorScheme.scheme = schemes[scheme] || scheme;
178+
isSchemeManuallyChanging = false;
179+
});
180+
181+
document.body.insertBefore($toggle, document.querySelector('main'));
182+
})();
183+
</script>
143184
</html>

‎tasks/start.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ const fetch = require('node-fetch');
99
const fs = require('fse');
1010
const marked = require('marked');
1111
const postcss = require('postcss');
12-
const preset = require('postcss-preset-env');
12+
const presete = require('postcss-preset-env');
13+
const prefers = require('css-prefers-color-scheme/postcss');
1314

1415
// source files
1516
const htmlTmpl = path.join(__dirname, 'start-template.html');
@@ -37,11 +38,12 @@ Promise.all([
3738
{
3839
features: features.slice(0).sort(sortFeatures).filter(filterFeatures).map(formatFeature),
3940
staging: marked(staging, markedOptions),
40-
mdnLogo: 'https://img.shields.io/badge/-docs-green.svg?colorA=000&colorB=919393&logoWidth=40&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTAyLjgiPjxwYXRoIGQ9Ik0zNDMuOCA3My43Yy0uNy4yLTEuMy4zLTEuOS4zLTIuMSAwLTMuMS0uOS0zLjEtMy41VjUxYzAtMTAuMy04LjItMTUuMy0xNy45LTE1LjMtNy40IDAtMTEuNC45LTE5LjMgNC4xTDMwMCA1MC4ybDEwLjMgMS4xIDEuNS01LjFjMi4xLTEuMSA0LjItMS4zIDYuOS0xLjMgNy4zIDAgNy40IDUuNSA3LjQgMTAuMXYxLjVjLTIuMy0uMy00LjktLjQtNy40LS40LTEwLjMgMC0yMSAyLjYtMjEgMTMuNyAwIDkuNCA3LjQgMTIuOSAxMy45IDEyLjkgNy4zIDAgMTEuOS00LjQgMTQuNS05IC42IDUuNSAzLjkgOSA5LjkgOSAyLjggMCA1LjctLjggOC4xLTIuMWwtLjMtNi45em0tMjcuNi0uM2MtMy45IDAtNS4zLTIuMy01LjMtNS4yIDAtNC45IDQtNi4yIDguNi02LjIgMi4xIDAgNC40LjMgNi41LjYtLjMgNy41LTUuMiAxMC44LTkuOCAxMC44em0tMTcuMy02MC41bC0xOS41IDY4LjdoLTEyLjdsMTkuNS02OC43aDEyLjd6bS0yNi4yIDBsLTE5LjUgNjguN2gtMTIuN0wyNjAgMTIuOWgxMi43em0tNTQgMjMuN2gxMy41djE2LjJoLTEzLjVWMzYuNnptMCAyOC45aDEzLjV2MTYuMmgtMTMuNVY2NS41em0tMTkuNy0uNmwxMC4yIDEtMi44IDE1LjhoLTM5LjNsLTEuMy02LjggMjQuOC0yOC41aC0xNC4xbC0yIDctOS4zLTEgMS42LTE1LjhoMzkuNWwxIDYuOC0yNSAyOC41aDE0LjZsMi4xLTd6bS02NC41LTI5LjJjLTE2LjIgMC0yNC4yIDEwLjktMjQuMiAyNC4xIDAgMTQuNCA5LjYgMjIuOSAyMy41IDIyLjkgMTQuNCAwIDI0LjgtOS4xIDI0LjgtMjMuNSAwLTEyLjYtNy45LTIzLjUtMjQuMS0yMy41em0tLjMgMzdjLTcgMC0xMC42LTYtMTAuNi0xMy44IDAtOC41IDQuMS0xMy40IDEwLjctMTMuNCA2LjEgMCAxMSA0LjEgMTEgMTMuMiAwIDguNy00LjQgMTQtMTEuMSAxNHptLTM1LjUtLjloNnY5LjhIODUuOVY1Ni4zYzAtNy44LTIuNi0xMC44LTcuNy0xMC44LTYuMiAwLTguNyA0LjQtOC43IDEwLjd2MTUuN2g2djkuOEg1Ni42VjU2LjNjMC03LjgtMi42LTEwLjgtNy43LTEwLjgtNi4yIDAtOC43IDQuNC04LjcgMTAuN3YxNS43aDguNnY5LjhIMjEuNHYtOS44aDZWNDYuNGgtNnYtOS44aDE4Ljl2Ni44YzIuNy00LjggNy40LTcuNyAxMy43LTcuNyA2LjUgMCAxMi41IDMuMSAxNC43IDkuNyAyLjUtNiA3LjYtOS43IDE0LjctOS43IDguMSAwIDE1LjUgNC45IDE1LjUgMTUuNnYyMC41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='
41+
mdnLogo: 'https://img.shields.io/badge/-docs-green.svg?colorA=a30000&colorB=919393&logoWidth=40&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTAyLjgiPjxwYXRoIGQ9Ik0zNDMuOCA3My43Yy0uNy4yLTEuMy4zLTEuOS4zLTIuMSAwLTMuMS0uOS0zLjEtMy41VjUxYzAtMTAuMy04LjItMTUuMy0xNy45LTE1LjMtNy40IDAtMTEuNC45LTE5LjMgNC4xTDMwMCA1MC4ybDEwLjMgMS4xIDEuNS01LjFjMi4xLTEuMSA0LjItMS4zIDYuOS0xLjMgNy4zIDAgNy40IDUuNSA3LjQgMTAuMXYxLjVjLTIuMy0uMy00LjktLjQtNy40LS40LTEwLjMgMC0yMSAyLjYtMjEgMTMuNyAwIDkuNCA3LjQgMTIuOSAxMy45IDEyLjkgNy4zIDAgMTEuOS00LjQgMTQuNS05IC42IDUuNSAzLjkgOSA5LjkgOSAyLjggMCA1LjctLjggOC4xLTIuMWwtLjMtNi45em0tMjcuNi0uM2MtMy45IDAtNS4zLTIuMy01LjMtNS4yIDAtNC45IDQtNi4yIDguNi02LjIgMi4xIDAgNC40LjMgNi41LjYtLjMgNy41LTUuMiAxMC44LTkuOCAxMC44em0tMTcuMy02MC41bC0xOS41IDY4LjdoLTEyLjdsMTkuNS02OC43aDEyLjd6bS0yNi4yIDBsLTE5LjUgNjguN2gtMTIuN0wyNjAgMTIuOWgxMi43em0tNTQgMjMuN2gxMy41djE2LjJoLTEzLjVWMzYuNnptMCAyOC45aDEzLjV2MTYuMmgtMTMuNVY2NS41em0tMTkuNy0uNmwxMC4yIDEtMi44IDE1LjhoLTM5LjNsLTEuMy02LjggMjQuOC0yOC41aC0xNC4xbC0yIDctOS4zLTEgMS42LTE1LjhoMzkuNWwxIDYuOC0yNSAyOC41aDE0LjZsMi4xLTd6bS02NC41LTI5LjJjLTE2LjIgMC0yNC4yIDEwLjktMjQuMiAyNC4xIDAgMTQuNCA5LjYgMjIuOSAyMy41IDIyLjkgMTQuNCAwIDI0LjgtOS4xIDI0LjgtMjMuNSAwLTEyLjYtNy45LTIzLjUtMjQuMS0yMy41em0tLjMgMzdjLTcgMC0xMC42LTYtMTAuNi0xMy44IDAtOC41IDQuMS0xMy40IDEwLjctMTMuNCA2LjEgMCAxMSA0LjEgMTEgMTMuMiAwIDguNy00LjQgMTQtMTEuMSAxNHptLTM1LjUtLjloNnY5LjhIODUuOVY1Ni4zYzAtNy44LTIuNi0xMC44LTcuNy0xMC44LTYuMiAwLTguNyA0LjQtOC43IDEwLjd2MTUuN2g2djkuOEg1Ni42VjU2LjNjMC03LjgtMi42LTEwLjgtNy43LTEwLjgtNi4yIDAtOC43IDQuNC04LjcgMTAuN3YxNS43aDguNnY5LjhIMjEuNHYtOS44aDZWNDYuNGgtNnYtOS44aDE4Ljl2Ni44YzIuNy00LjggNy40LTcuNyAxMy43LTcuNyA2LjUgMCAxMi41IDMuMSAxNC43IDkuNyAyLjUtNiA3LjYtOS43IDE0LjctOS43IDguMSAwIDE1LjUgNC45IDE1LjUgMTUuNnYyMC41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='
4142
}
4243
),
4344
postcss([
44-
preset({ stage: 0 }),
45+
presete({ stage: 0 }),
46+
prefers(),
4547
cssnano({ preset: 'default' }),
4648
]).process(styles, { from: pcssTmpl, to: pcssDest, map: { inline: false } })
4749
]).then(

‎tasks/style-template.css‎

Lines changed: 150 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,16 @@ html {
6363
}
6464

6565
body {
66-
font: 400 100%/1.5 var(--main-font);
66+
font: 400 100%/1.5 sans-serif;
67+
font-family: var(--main-font);
6768
-moz-osx-font-smoothing: grayscale;
6869
-webkit-font-smoothing: antialiased;
6970
font-smoothing: antialiased;
7071
letter-spacing: -.00125em;
7172
padding: 0 calc((100% - 960px) / 2);
7273
text-rendering: optimizeLegibility;
7374
text-size-adjust: 100%;
75+
transition: 400ms background-color, 400ms color;
7476

7577
@media (width < 560px) {
7678
margin: 16px;
@@ -91,9 +93,13 @@ a {
9193
text-decoration: none;
9294
}
9395

94-
code,
95-
pre {
96+
aside, header, main, section {
97+
display: block;
98+
}
99+
100+
code, pre {
96101
font-family: var(--code-font);
102+
font-size: 100%;
97103
font-weight: 600;
98104
}
99105

@@ -115,13 +121,22 @@ code {
115121
}
116122
}
117123

124+
img {
125+
border: 0;
126+
}
127+
118128
/* Header
119129
/* ========================================================================== */
120130

121131
.cssdb-header {
122132
@media (width >= 960px) {
123133
align-items: center;
124134
display: flex;
135+
136+
& > * {
137+
display: inline-block;
138+
vertical-align: top;
139+
}
125140
}
126141
}
127142

@@ -170,6 +185,11 @@ code {
170185

171186
.cssdb-feature-header {
172187
display: flex;
188+
189+
& > * {
190+
display: inline-block;
191+
vertical-align: top;
192+
}
173193
}
174194

175195
.cssdb-feature-stage {
@@ -220,8 +240,7 @@ code {
220240
}
221241
}
222242

223-
.cssdb-feature-mdn-badge,
224-
.cssdb-feature-specification-badge {
243+
.cssdb-feature-mdn-badge, .cssdb-feature-specification-badge {
225244
height: 20px;
226245
vertical-align: top;
227246
}
@@ -270,6 +289,7 @@ code {
270289
color: #727272;
271290
overflow: auto;
272291
padding: 20px 15px;
292+
transition: 400ms background-color, 400ms color;
273293

274294
@media (prefers-color-scheme: dark) {
275295
background-color: #111111;
@@ -309,8 +329,7 @@ code {
309329
}
310330
}
311331

312-
.css-value,
313-
.css-atrule-params {
332+
.css-value, .css-atrule-params {
314333
color: #000000;
315334

316335
@media (prefers-color-scheme: dark) {
@@ -586,3 +605,127 @@ code {
586605
margin-end: 20px;
587606
}
588607
}
608+
609+
/* Color Scheme Toggle
610+
/* ========================================================================== */
611+
612+
.cssdb-color_scheme_toggle {
613+
display: inline-block;
614+
position: absolute;
615+
616+
@media (width < 560px) {
617+
inset-inline-end: 16px;
618+
}
619+
620+
@media (560px <= width < 960px) {
621+
inset-inline-end: 64px;
622+
}
623+
624+
@media (width >= 960px) {
625+
inset-block-start: 32px;
626+
inset-inline-end: calc((100% - 960px) / 2);
627+
628+
&:dir(ltr) {
629+
transform: translateX(-100%);
630+
}
631+
632+
&:dir(rtl) {
633+
transform: translateX(100%);
634+
}
635+
}
636+
637+
& > input {
638+
appearance: none;
639+
height: 100%;
640+
inset-block: 0;
641+
margin: 0;
642+
opacity: 0;
643+
position: absolute;
644+
z-index: 1;
645+
}
646+
647+
& > :nth-child(1) {
648+
inset-inline-start: 0;
649+
width: 37.5%;
650+
}
651+
652+
& > :nth-child(2) {
653+
inset-inline-start: 37.5%;
654+
width: 25%;
655+
}
656+
657+
& > :nth-child(3) {
658+
inset-inline-start: 62.5%;
659+
width: 37.5%;
660+
}
661+
662+
& > label::before {
663+
background-color: #f2f2f2;
664+
border-radius: 1.75em;
665+
box-shadow: 0 0 0 2px #dddddd;
666+
content: "";
667+
display: block;
668+
height: 1.75em;
669+
transition: 200ms background-color, 200ms box-shadow;
670+
width: 4em;
671+
672+
@media (prefers-color-scheme: dark) {
673+
background-color: #181818;
674+
box-shadow: 0 0 0 2px #333333;
675+
}
676+
}
677+
678+
& > input:nth-child(1):focus ~ label::before {
679+
box-shadow: 0 0 5px 0 #5e9ed7, 0 0 0 2px #333333;
680+
}
681+
682+
& > input:nth-child(2):focus ~ label::before {
683+
box-shadow: 0 0 3px 0 #3bb5fc, 0 0 0 2px #dddddd;
684+
685+
@media (prefers-color-scheme: dark) {
686+
box-shadow: 0 0 5px 0 #5e9ed7, 0 0 0 2px #333333;
687+
}
688+
}
689+
690+
& > input:nth-child(3):focus ~ label::before {
691+
box-shadow: 0 0 5px 2px #f0fc3b, 0 0 0 2px #dddddd;
692+
}
693+
694+
& > label::after {
695+
background-color: #ffffff;
696+
border-radius: 2.5em;
697+
box-shadow: 0 0 0 2px #dddddd;
698+
content: "";
699+
height: 1.75em;
700+
inset-block-start: 0;
701+
position: absolute;
702+
transition: 200ms background-color, 200ms box-shadow, 200ms left, 200ms margin, 200ms width;
703+
width: 1.75em;
704+
705+
@media (prefers-color-scheme: dark) {
706+
background-color: #181818;
707+
box-shadow: 0 0 0 2px #444444;
708+
}
709+
}
710+
711+
& > input:focus ~ label::after {
712+
box-shadow: 0 0 5px 2px #3b99fc, 0 0 0 2px #dddddd;
713+
}
714+
715+
& > input:nth-child(1):checked ~ label::after {
716+
inset-inline-start: 0;
717+
}
718+
719+
& > input:nth-child(2):checked ~ label::after {
720+
inset-inline-start: 1.125em;
721+
}
722+
723+
& > input:nth-child(3):checked ~ label::after {
724+
inset-inline-start: 2.25em;
725+
}
726+
727+
& > input:active ~ :last-child::after {
728+
margin-inline-start: -.075em;
729+
width: 1.875em;
730+
}
731+
}

0 commit comments

Comments
 (0)