diff --git a/README.md b/README.md index d85271e..a7579a5 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ Refer to the [documentation page](https://jdan.github.io/98.css/) for specific i [`style.css`](https://github.com/jdan/98.css/blob/master/style.css) is where everything happens. -`npm run build:docs` will compile `style.css` (and all fonts/icons/etc) and rebuild the docs/ directory which powers http://jdan.github.io/98.css. It's a static directory so serve it with your server of choice (I am partial to `python -m SimpleHTTPServer 3000`) to see your changes. +`npm run build:docs` will compile `style.css` (and all fonts/icons/etc) and rebuild the `dist/` directory which powers https://jdan.github.io/98.css. It's a static directory so serve it with your server of choice (I am partial to `python -m SimpleHTTPServer 3000`) to see your changes. ### Issues, Contributing, etc. diff --git a/build-docs.js b/build-docs.js index ab34eeb..fba7621 100644 --- a/build-docs.js +++ b/build-docs.js @@ -32,14 +32,14 @@ function example(code) { `; } -glob("dist/*", (err, files) => { +glob("docs/*", (err, files) => { if (!err) { files.forEach((srcFile) => - fs.copyFileSync(srcFile, path.join("docs", path.basename(srcFile))) + fs.copyFileSync(srcFile, path.join("dist", path.basename(srcFile))) ); } else throw "error globbing dist directory."; }); fs.writeFileSync( - "docs/index.html", + path.join(__dirname, "/dist/index.html"), ejs.render(template, { getNewId, getCurrentId, example }) ); diff --git a/docs/98.css b/docs/98.css deleted file mode 100644 index 8c20ea5..0000000 --- a/docs/98.css +++ /dev/null @@ -1,2 +0,0 @@ -@font-face{font-family:"Pixelated MS Sans Serif";src:url(ms_sans_serif.woff) format("woff");src:url(ms_sans_serif.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:"Pixelated MS Sans Serif";src:url(ms_sans_serif_bold.woff) format("woff");src:url(ms_sans_serif_bold.woff2) format("woff2");font-weight:700;font-style:normal}body{font-family:Arial;font-size:12px;color:#222}.title-bar,.window,button,input,label,option,select,textarea,ul.tree-view{font-family:"Pixelated MS Sans Serif",Arial;-webkit-font-smoothing:none;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{text-decoration:none;border-bottom:.5px solid #222}button{box-sizing:border-box;border:none;background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;border-radius:0;min-width:75px;min-height:23px;padding:0 12px}button:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}@media (not(hover)){button:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner{border:0}:disabled,:disabled+label{color:grey;text-shadow:1px 1px 0 #fff}.window{box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;background:silver;padding:3px}.title-bar{background:linear-gradient(90deg,navy,#1084d0);padding:2px;display:flex;justify-content:space-between;align-items:center}.title-bar-text{font-weight:700;color:#fff;letter-spacing:0;margin-right:24px}.title-bar-controls{display:flex}.title-bar-controls button{padding:0;display:block;min-width:14px;min-height:12px}.title-bar-controls button:focus{outline:none}.title-bar-controls button[aria-label=Minimize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:bottom 2px left 3px}.title-bar-controls button[aria-label=Maximize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2v6h9V0H0v2zm8 5V2H1v5h7z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top 2px left 2px}.title-bar-controls button[aria-label=Close]{margin-left:2px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top 2px center}.window-body{margin:8px}fieldset{border:none;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px grey,inset 2px 2px #dfdfdf;padding:10px;padding-block-start:8px;margin:0}legend{background:silver}.field-row{display:flex;align-items:center}[class^=field-row]+[class^=field-row]{margin-top:6px}.field-row *+*{margin-left:6px}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*{margin-top:6px}label{display:inline-flex;align-items:center}input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;background:0;border:none}input[type=checkbox]+label,input[type=radio]+label{line-height:13px}input[type=radio]+label{position:relative;margin-left:18px}input[type=radio]+label:before{content:"";position:absolute;top:0;left:-18px;display:inline-block;width:12px;height:12px;margin-right:6px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E")}input[type=radio]:checked+label:after{content:"";display:block;width:4px;height:4px;top:4px;left:-14px;position:absolute;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E")}input[type=checkbox]:focus+label,input[type=radio]:focus+label{outline:1px dotted #000}input[type=radio][disabled]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E")}input[type=checkbox]+label{position:relative;margin-left:19px}input[type=checkbox]+label:before{content:"";position:absolute;left:-19px;display:inline-block;width:13px;height:13px;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;margin-right:6px}input[type=checkbox]:checked+label:after{content:"";display:block;width:7px;height:7px;position:absolute;top:3px;left:-16px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E")}input[type=checkbox][disabled]+label:before{background:silver}input[type=checkbox][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E")}input[type=email],input[type=password],input[type=text]{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}input[type=email],input[type=password],input[type=text],select{padding:3px 4px;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;background-color:#fff;box-sizing:border-box}select,textarea{border:none}textarea{padding:3px 4px;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;background-color:#fff;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}input[type=email],input[type=password],input[type=text],select{height:21px}input[type=email],input[type=password],input[type=text]{line-height:2}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;padding-right:32px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,select:focus,textarea:focus{outline:none}select:focus{color:#fff;background-color:navy}select:focus option{color:#000;background-color:#fff}select:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}a{color:#00f}a:focus{outline:1px dotted #00f}ul.tree-view{display:block;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;padding:6px;margin:0}ul.tree-view li{list-style-type:none}ul.tree-view a{text-decoration:none;color:#000}ul.tree-view a:focus{background-color:navy;color:#fff}ul.tree-view li,ul.tree-view ul{margin-top:3px}ul.tree-view ul{margin-left:16px;padding-left:16px;border-left:1px dotted grey}ul.tree-view ul>li{position:relative}ul.tree-view ul>li:before{content:"";display:block;position:absolute;left:-16px;top:6px;width:12px;border-bottom:1px dotted grey}ul.tree-view ul>li:last-child:after{content:"";display:block;position:absolute;left:-20px;top:7px;bottom:0;width:8px;background:#fff}pre{display:block;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;padding:12px 8px;margin:0}code,code *{font-family:monospace}summary:focus{outline:1px dotted #000}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#dfdfdf}::-webkit-scrollbar-track{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")}::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}::-webkit-scrollbar-button:vertical:start{height:17px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end{height:17px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:horizontal:start{width:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:horizontal:end{width:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E")} -/*# sourceMappingURL=98.css.map */ \ No newline at end of file diff --git a/docs/98.css.map b/docs/98.css.map deleted file mode 100644 index 045ed99..0000000 --- a/docs/98.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../style.css"],"names":[],"mappings":"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","file":"98.css","sourcesContent":["/**\n * 98.css\n * Copyright (c) 2020 Jordan Scales \n * https://github.com/jdan/98.css/blob/master/LICENSE\n */\n\n:root {\n /* Color */\n --surface: #c0c0c0;\n --button-highlight: #ffffff;\n --button-face: #dfdfdf;\n --button-shadow: #808080;\n --window-frame: #0a0a0a;\n --dialog-blue: #000080;\n --dialog-blue-light: #1084d0;\n --link-blue: #0000ff;\n\n /* Spacing */\n --element-spacing: 8px;\n --grouped-button-spacing: 4px;\n --grouped-element-spacing: 6px;\n --radio-width: 12px;\n --checkbox-width: 13px;\n --radio-label-spacing: 6px;\n\n /* Some detailed computations for radio buttons and checkboxes */\n --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);\n --radio-total-width: calc(var(--radio-total-width-precalc));\n --radio-left: calc(-1 * var(--radio-total-width-precalc));\n --radio-dot-width: 4px;\n --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);\n --radio-dot-left: calc(\n -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(\n --radio-dot-width\n ) / 2\n );\n\n --checkbox-total-width-precalc: var(--checkbox-width) +\n var(--radio-label-spacing);\n --checkbox-total-width: calc(var(--checkbox-total-width-precalc));\n --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));\n --checkmark-width: 7px;\n --checkmark-top: 3px;\n --checkmark-left: 3px;\n\n /* Borders */\n --border-width: 1px;\n --border-raised-outer: inset -1px -1px var(--window-frame),\n inset 1px 1px var(--button-highlight);\n --border-raised-inner: inset -2px -2px var(--button-shadow),\n inset 2px 2px var(--button-face);\n --border-sunken-outer: inset -1px -1px var(--button-highlight),\n inset 1px 1px var(--window-frame);\n --border-sunken-inner: inset -2px -2px var(--button-face),\n inset 2px 2px var(--button-shadow);\n\n /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */\n --border-field: inset -1px -1px var(--button-highlight),\n inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),\n inset 2px 2px var(--window-frame);\n}\n\n@font-face {\n font-family: \"Pixelated MS Sans Serif\";\n src: url(\"fonts/converted/ms_sans_serif.woff\") format(\"woff\");\n src: url(\"fonts/converted/ms_sans_serif.woff2\") format(\"woff2\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Pixelated MS Sans Serif\";\n src: url(\"fonts/converted/ms_sans_serif_bold.woff\") format(\"woff\");\n src: url(\"fonts/converted/ms_sans_serif_bold.woff2\") format(\"woff2\");\n font-weight: bold;\n font-style: normal;\n}\n\nbody {\n font-family: Arial;\n font-size: 12px;\n color: #222222;\n}\n\nbutton,\nlabel,\ninput,\ntextarea,\nselect,\noption,\nul.tree-view,\n.window,\n.title-bar {\n font-family: \"Pixelated MS Sans Serif\", Arial;\n -webkit-font-smoothing: none;\n font-size: 11px;\n}\n\nh1 {\n font-size: 5rem;\n}\n\nh2 {\n font-size: 2.5rem;\n}\n\nh3 {\n font-size: 2rem;\n}\n\nh4 {\n font-size: 1.5rem;\n}\n\nu {\n text-decoration: none;\n border-bottom: 0.5px solid #222222;\n}\n\nbutton {\n box-sizing: border-box;\n border: none;\n background: var(--surface);\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n border-radius: 0;\n\n min-width: 75px;\n min-height: 23px;\n padding: 0 12px;\n}\n\nbutton:not(:disabled):active {\n box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);\n}\n\n@media (not(hover)) {\n button:not(:disabled):hover {\n box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);\n }\n}\n\nbutton:focus {\n outline: 1px dotted #000000;\n outline-offset: -4px;\n}\n\nbutton::-moz-focus-inner {\n border: 0;\n}\n\n:disabled,\n:disabled + label {\n color: var(--button-shadow);\n text-shadow: 1px 1px 0 var(--button-highlight);\n}\n\n.window {\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n background: var(--surface);\n padding: 3px;\n}\n\n.title-bar {\n background: linear-gradient(\n 90deg,\n var(--dialog-blue),\n var(--dialog-blue-light)\n );\n padding: 2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.title-bar-text {\n font-weight: bold;\n color: white;\n letter-spacing: 0;\n margin-right: 24px;\n}\n\n.title-bar-controls {\n display: flex;\n}\n\n.title-bar-controls button {\n padding: 0;\n display: block;\n min-width: 14px;\n min-height: 12px;\n}\n\n.title-bar-controls button:focus {\n outline: none;\n}\n\n.title-bar-controls button[aria-label=\"Minimize\"] {\n background-image: svg-load(\"./icon/minimize.svg\");\n background-repeat: no-repeat;\n background-position: bottom 2px left 3px;\n}\n\n.title-bar-controls button[aria-label=\"Maximize\"] {\n background-image: svg-load(\"./icon/maximize.svg\");\n background-repeat: no-repeat;\n /* Off by 1px because contents can't go above the inner shadow */\n /* Should be 9px by 9px, with top 1px */\n background-position: top 2px left 2px;\n}\n\n.title-bar-controls button[aria-label=\"Close\"] {\n margin-left: 2px;\n background-image: svg-load(\"./icon/close.svg\");\n background-repeat: no-repeat;\n background-position: top 2px center;\n}\n\n.window-body {\n margin: var(--element-spacing);\n}\n\nfieldset {\n border: none;\n box-shadow: var(--border-sunken-outer), var(--border-raised-inner);\n padding: calc(2 * var(--border-width) + var(--element-spacing));\n padding-block-start: var(--element-spacing);\n margin: 0;\n}\n\nlegend {\n background: var(--surface);\n}\n\n.field-row {\n display: flex;\n align-items: center;\n}\n\n[class^=\"field-row\"] + [class^=\"field-row\"] {\n margin-top: var(--grouped-element-spacing);\n}\n\n.field-row * + * {\n margin-left: var(--grouped-element-spacing);\n}\n\n.field-row-stacked {\n display: flex;\n flex-direction: column;\n}\n\n.field-row-stacked * + * {\n margin-top: var(--grouped-element-spacing);\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n margin: 0;\n background: 0; /* necessary for hiding default disabled-state styling on iOS */\n border: none;\n}\n\ninput[type=\"radio\"] + label,\ninput[type=\"checkbox\"] + label {\n line-height: 13px;\n}\n\ninput[type=\"radio\"] + label {\n position: relative;\n margin-left: var(--radio-total-width);\n}\n\ninput[type=\"radio\"] + label::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(-1 * (var(--radio-total-width-precalc)));\n display: inline-block;\n width: var(--radio-width);\n height: var(--radio-width);\n margin-right: var(--radio-label-spacing);\n background: svg-load(\"./icon/radio-border.svg\");\n}\n\ninput[type=\"radio\"]:checked + label::after {\n content: \"\";\n display: block;\n width: var(--radio-dot-width);\n height: var(--radio-dot-width);\n top: var(--radio-dot-top);\n left: var(--radio-dot-left);\n position: absolute;\n background: svg-load(\"./icon/radio-dot.svg\");\n}\n\ninput[type=\"radio\"]:focus + label,\ninput[type=\"checkbox\"]:focus + label {\n outline: 1px dotted #000000;\n}\n\ninput[type=\"radio\"][disabled] + label::before {\n background: svg-load(\"./icon/radio-border-disabled.svg\");\n}\n\ninput[type=\"radio\"][disabled]:checked + label::after {\n background: svg-load(\"./icon/radio-dot-disabled.svg\");\n}\n\ninput[type=\"checkbox\"] + label {\n position: relative;\n margin-left: var(--checkbox-total-width);\n}\n\ninput[type=\"checkbox\"] + label::before {\n content: \"\";\n position: absolute;\n left: calc(-1 * (var(--checkbox-total-width-precalc)));\n display: inline-block;\n width: var(--checkbox-width);\n height: var(--checkbox-width);\n background: var(--button-highlight);\n box-shadow: var(--border-field);\n margin-right: var(--radio-label-spacing);\n}\n\ninput[type=\"checkbox\"]:checked + label::after {\n content: \"\";\n display: block;\n width: var(--checkmark-width);\n height: var(--checkmark-width);\n position: absolute;\n top: var(--checkmark-top);\n left: calc(\n -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)\n );\n background: svg-load(\"./icon/checkmark.svg\");\n}\n\ninput[type=\"checkbox\"][disabled] + label::before {\n background: var(--surface);\n}\n\ninput[type=\"checkbox\"][disabled]:checked + label::after {\n background: svg-load(\"./icon/checkmark-disabled.svg\");\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"],\nselect,\ntextarea {\n padding: 3px 4px;\n border: none;\n box-shadow: var(--border-field);\n background-color: var(--button-highlight);\n box-sizing: border-box;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: 0;\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"],\nselect {\n height: 21px;\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"] {\n /* For some reason descenders are getting cut off without this */\n line-height: 2;\n}\n\nselect {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n padding-right: 32px;\n background-image: svg-load(\"./icon/button-down.svg\");\n background-position: top 2px right 2px;\n background-repeat: no-repeat;\n border-radius: 0;\n}\n\nselect:focus,\ninput[type=\"text\"]:focus,\ninput[type=\"password\"]:focus,\ninput[type=\"email\"]:focus,\ntextarea:focus {\n outline: none;\n}\n\nselect:focus {\n color: var(--button-highlight);\n background-color: var(--dialog-blue);\n}\nselect:focus option {\n color: #000;\n background-color: #fff;\n}\n\nselect:active {\n background-image: svg-load(\"./icon/button-down-active.svg\");\n}\n\na {\n color: var(--link-blue);\n}\n\na:focus {\n outline: 1px dotted var(--link-blue);\n}\n\nul.tree-view {\n display: block;\n background: var(--button-highlight);\n box-shadow: var(--border-field);\n padding: 6px;\n margin: 0;\n}\n\nul.tree-view li {\n list-style-type: none;\n}\n\nul.tree-view a {\n text-decoration: none;\n color: #000;\n}\n\nul.tree-view a:focus {\n background-color: var(--dialog-blue);\n color: var(--button-highlight);\n}\n\nul.tree-view ul,\nul.tree-view li {\n margin-top: 3px;\n}\n\nul.tree-view ul {\n margin-left: 16px;\n padding-left: 16px;\n /* Goes down too far */\n border-left: 1px dotted #808080;\n}\n\nul.tree-view ul > li {\n position: relative;\n}\nul.tree-view ul > li::before {\n content: \"\";\n display: block;\n position: absolute;\n left: -16px;\n top: 6px;\n width: 12px;\n border-bottom: 1px dotted #808080;\n}\n\n/* Cover the bottom of the left dotted border */\nul.tree-view ul > li:last-child::after {\n content: \"\";\n display: block;\n position: absolute;\n left: -20px;\n top: 7px;\n bottom: 0px;\n width: 8px;\n background: var(--button-highlight);\n}\n\npre {\n display: block;\n background: var(--button-highlight);\n box-shadow: var(--border-field);\n padding: 12px 8px;\n margin: 0;\n}\n\ncode,\ncode * {\n font-family: monospace;\n}\n\nsummary:focus {\n outline: 1px dotted #000000;\n}\n\n::-webkit-scrollbar {\n width: 16px;\n}\n::-webkit-scrollbar:horizontal {\n height: 17px;\n}\n\n::-webkit-scrollbar-corner {\n background: var(--button-face);\n}\n\n::-webkit-scrollbar-track {\n background-image: svg-load(\"./icon/scrollbar-background.svg\");\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--button-face);\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n\n::-webkit-scrollbar-button:vertical:start {\n height: 17px;\n background-image: svg-load(\"./icon/button-up.svg\");\n}\n::-webkit-scrollbar-button:vertical:end {\n height: 17px;\n background-image: svg-load(\"./icon/button-down.svg\");\n}\n::-webkit-scrollbar-button:horizontal:start {\n width: 16px;\n background-image: svg-load(\"./icon/button-left.svg\");\n}\n::-webkit-scrollbar-button:horizontal:end {\n width: 16px;\n background-image: svg-load(\"./icon/button-right.svg\");\n}\n"]} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index b5d50cd..0000000 --- a/docs/index.html +++ /dev/null @@ -1,859 +0,0 @@ - - - - 98.css - A design system for building faithful recreations of old UIs - - - - - - - - - - - - - - - - -
-

98.css

-
-

A design system for building faithful recreations of old UIs.

- -

Intro

-

- 98.css is a CSS library for building interfaces that look like Windows 98. - See more on GitHub. -

- -
-
-
- My First VB4 Program -
- -
- - - -
-
-
-

Hello, world!

-
- - -
-
-
- -

- This library relies on the usage of semantic HTML. To make a button, you'll need - to use a <button>. Input elements require labels. Icon buttons rely on - aria-label. This page will guide you through that process, but accessibility is a primary - goal of this project. -

- -

- You can override many of the styles of your elements while maintaining the appearance provided by - this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? - Be our guest. -

- -

- This library does not contain any JavaScript, it merely styles your HTML with some CSS. - This means 98.css is compatible with your frontend framework of choice. -

- -

- Here is an example of 98.css used with React, and - an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg. -

- - 
<link
-  rel="stylesheet"
-  href="https://unpkg.com/98.css"
->
- -

- You can install 98.css from the GitHub releases page, or from npm. -

- 
npm install 98.css
- -

Components

- -
-

Button

-
-
- A command button, also referred to as a push button, is a control - that causes the application to perform some action when the user clicks it. - -
— Microsoft Windows User Experience p. 160
-
- -

- A standard button measures 75px wide and 23px tall, with a raised outer and inner border. - They are given 12px of horizontal padding by default. -

- -
- -
- Show code - 
<button>Click me</button>
-
-
- -

- When buttons are clicked, the raised borders become sunken. - The following button is simulated to be in the pressed (active) state. -

- - -
- -
- Show code - 
<button>I am being pressed</button>
-
-
- -

- Disabled buttons maintain the same raised border, but have a "washed out" - appearance in their label. -

- -
- -
- Show code - 
<button disabled>I cannot be clicked</button>
-
-
- -

- Button focus is communicated with a dotted border, set 4px within the contents of the button. - The following example is simulated to be focused. -

- -
- -
- Show code - 
<button>I am focused</button>
-
-
-
-
- -
-

Checkbox

-
-
- A check box represents an independent or non-exclusive choice. -
— Microsoft Windows User Experience p. 167
-
- -

- Checkboxes are represented with a sunken panel, populated with a "check" icon when - selected, next to a label indicating the choice. -

- -

- Note: You must include a corresponding label after - your checkbox, using the <label> element with a for attribute - pointed at the id of your input. This ensures the checkbox is easy to use with - assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, - being able to click the entire label to select the box). -

- -
- - -
- Show code - 
<input type="checkbox" id="example1">
-<label for="example1">This is a checkbox</label>
-
-
- -

- Checkboxes can be selected and disabled with the standard checked and disabled - attributes. -

- -

- When grouping inputs, wrap each input in a container with the field-row class. This ensures - a consistent spacing between inputs. -

- -
-
- - -
-
- - -
-
- - -
-
- Show code - 
<div class="field-row">
-  <input checked type="checkbox" id="example2">
-  <label for="example2">I am checked</label>
-</div>
-<div class="field-row">
-  <input disabled type="checkbox" id="example3">
-  <label for="example3">I am inactive</label>
-</div>
-<div class="field-row">
-  <input checked disabled type="checkbox" id="example4">
-  <label for="example4">I am inactive but still checked</label>
-</div>
-
-
-
-
- -
-

OptionButton

-
-
- An option button, also referred to as a radio button, represents a single - choice within a limited set of mutually exclusive choices. That is, the user can choose only - one set of options. - -
— Microsoft Windows User Experience p. 164
-
- -

- Option buttons can be used via the radio type on an input element. -

- -

- Option buttons can be grouped by specifying a shared name attribute on each - input. Just as before: when grouping inputs, wrap each input in a container with the - field-row class to ensure a consistent spacing between inputs. -

- -
-
- - -
-
- - -
-
- Show code - 
<div class="field-row">
-  <input id="radio5" type="radio" name="first-example">
-  <label for="radio5">Yes</label>
-</div>
-<div class="field-row">
-  <input id="radio6" type="radio" name="first-example">
-  <label for="radio6">No</label>
-</div>
-
-
- -

- Option buttons can also be checked and disabled with their corresponding - HTML attributes. -

- -
-
- - -
-
- - -
-
- - -
-
- Show code - 
<div class="field-row">
-  <input id="radio7" type="radio" name="second-example">
-  <label for="radio7">Peanut butter should be smooth</label>
-</div>
-<div class="field-row">
-  <input checked disabled id="radio8" type="radio" name="second-example">
-  <label for="radio8">I understand why people like crunchy peanut butter</label>
-</div>
-<div class="field-row">
-  <input disabled id="radio9" type="radio" name="second-example">
-  <label for="radio9">Crunchy peanut butter is good</label>
-</div>
-
-
-
-
- -
-

GroupBox

-
-
- A group box is a special control you can use to organize a set of - controls. A group box is a rectangular frame with an optional label that surrounds - a set of controls. - -
— Microsoft Windows User Experience p. 189
-
- -

- A group box can be used by wrapping your elements with the fieldset tag. - It contains a sunken outer border and a raised inner border, resembling an engraved box - around your controls. -

- -
-
-
Select one:
-
- - -
-
- - -
-
- - -
-
-
- Show code - 
<fieldset>
-  <div class="field-row">Select one:</div>
-  <div class="field-row">
-    <input id="radio10" type="radio" name="fieldset-example">
-    <label for="radio10">Diners</label>
-  </div>
-  <div class="field-row">
-    <input id="radio11" type="radio" name="fieldset-example">
-    <label for="radio11">Drive-Ins</label>
-  </div>
-  <div class="field-row">
-    <input id="radio12" type="radio" name="fieldset-example">
-    <label for="radio12">Dives</label>
-  </div>
-</fieldset>
-
-
- -

- You can provide your group with a label by placing a legend element - within the fieldset. -

- -
-
- Today's mood -
- - -
-
- - -
-
- - -
-
- - -
-
-
- Show code - 
<fieldset>
-  <legend>Today's mood</legend>
-  <div class="field-row">
-    <input id="radio13" type="radio" name="fieldset-example2">
-    <label for="radio13">Claire Saffitz</label>
-  </div>
-  <div class="field-row">
-    <input id="radio14" type="radio" name="fieldset-example2">
-    <label for="radio14">Brad Leone</label>
-  </div>
-  <div class="field-row">
-    <input id="radio15" type="radio" name="fieldset-example2">
-    <label for="radio15">Chris Morocco</label>
-  </div>
-  <div class="field-row">
-    <input id="radio16" type="radio" name="fieldset-example2">
-    <label for="radio16">Carla Lalli Music</label>
-  </div>
-</fieldset>
-
-
-
-
- -
-

TextBox

-
-
- A text box (also referred to as an edit control) is a - rectangular control where the user enters or edits text. It can - be defined to support a single line or multiple lines of text. - -
— Microsoft Windows User Experience p. 181
-
- -

- Text boxes can rendered by specifying a text type on an - input element. As with checkboxes and radio buttons, you - should provide a corresponding label with a properly set for - attribute, and wrap both in a container with the field-row class. -

- -
-
- - -
-
- Show code - 
<div class="field-row">
-  <label for="text17">Occupation</label>
-  <input id="text17" type="text" />
-</div>
-
-
- -

- Additionally, you can make use of the field-row-stacked class - to position your label above the input instead of beside it. -

- -
-
- - -
-
- - -
-
- Show code - 
<div class="field-row-stacked" style="width: 200px">
-  <label for="text18">Address (Line 1)</label>
-  <input id="text18" type="text" />
-</div>
-<div class="field-row-stacked" style="width: 200px">
-  <label for="text19">Address (Line 2)</label>
-  <input id="text19" type="text" />
-</div>
-
-
- -

- To support multiple lines in the user's input, use the textarea - element instead. -

- -
-
- - -
-
- Show code - 
<div class="field-row-stacked" style="width: 200px">
-  <label for="text20">Additional notes</label>
-  <textarea id="text20" rows="8"></textarea>
-</div>
-
-
-
-
- -
- -
-
- A drop-down list box allows the selection of only a - single item from a list. In its closed state, the control displays - the current value for the control. The user opens the list to change - the value. - -
- — Microsoft Windows User Experience p. 175 -
-
- -

- Dropdowns can be rendered by using the select and option - elements. -

- -
- -
- Show code - 
<select>
-  <option>5 - Incredible!</option>
-  <option>4 - Great!</option>
-  <option>3 - Pretty good</option>
-  <option>2 - Not so great</option>
-  <option>1 - Unfortunate</option>
-</select>
-
-
- -

- By default, the first option will be selected. You can change this by - giving one of your option elements the selected - attribute. -

- -
- -
- Show code - 
<select>
-  <option>5 - Incredible!</option>
-  <option>4 - Great!</option>
-  <option selected>3 - Pretty good</option>
-  <option>2 - Not so great</option>
-  <option>1 - Unfortunate</option>
-</select>
-
-
-
-
- -

Window

-

- The following components illustrate how to build complete windows using - 98.css. -

- -
-

Title Bar

-
-
- At the top edge of the window, inside its border, is the title bar - (also reffered to as the caption or caption bar), which extends across - the width of the window. The title bar identifies the contents of the - window. - -
- — Microsoft Windows User Experience p. 118 -
-
- -
- Include command buttons associated with the common commands of the - primary window in the title bar. These buttons act as shortcuts to specific - window commands. - -
- — Microsoft Windows User Experience p. 122 -
-
- -

- You can build a complete title bar by making use of three classes, - title-bar, title-bar-text, and title-bar-controls. -

- -
-
-
A Title Bar
-
- -
-
-
- Show code - 
<div class="title-bar">
-  <div class="title-bar-text">A Title Bar</div>
-  <div class="title-bar-controls">
-    <button aria-label="Close"></button>
-  </div>
-</div>
-
-
- -

- We make use of aria-label to render the Close button, to let - assistive technologies know the intent of this button. You may also use - "Minimize" and "Maximize" like so: -

- -
-
-
A Title Bar
-
- - - -
-
-
- Show code - 
<div class="title-bar">
-  <div class="title-bar-text">A Title Bar</div>
-  <div class="title-bar-controls">
-    <button aria-label="Minimize"></button>
-    <button aria-label="Maximize"></button>
-    <button aria-label="Close"></button>
-  </div>
-</div>
-
-
-
-
- -
-

Window contents

-
-
- Every window has a boundary that defines its shape. - -
- — Microsoft Windows User Experience p. 118 -
-
- -

- To give our title bar a home, we make use of the window - class. This provides a raised outer and inner border, as well as some - padding. We can freely resize the window by specifying a width in the - container style. -

- -
-
-
-
A Complete Window
-
- - - -
-
-
-
- Show code - 
<div class="window" style="width: 300px">
-  <div class="title-bar">
-    <div class="title-bar-text">A Complete Window</div>
-    <div class="title-bar-controls">
-      <button aria-label="Minimize"></button>
-      <button aria-label="Maximize"></button>
-      <button aria-label="Close"></button>
-    </div>
-  </div>
-</div>
-
-
- -

- To draw the contents of the window, we use the window-body - class under the title bar. -

- -
-
-
-
A Window With Stuff In It
-
- - - -
-
-
-

There's so much room for activities!

-
-
-
- Show code - 
<div class="window" style="width: 300px">
-  <div class="title-bar">
-    <div class="title-bar-text">A Window With Stuff In It</div>
-    <div class="title-bar-controls">
-      <button aria-label="Minimize"></button>
-      <button aria-label="Maximize"></button>
-      <button aria-label="Close"></button>
-    </div>
-  </div>
-  <div class="window-body">
-    <p>There's so much room for activities!</p>
-  </div>
-</div>
-
-
-
-
- -
-

TreeView

-
-
- A tree view control is a special list box control - that displays a set of objects as an indented outline based - on their logical hierarchical relationship. - -
- — Microsoft Windows User Experience p. 178 -
-
- -

- To render a tree view, use an ul element with the - tree-view class. The children of this list (li - elements), can contain whatever you'd like. -

- -
-
    -
  • We can put
    • -
  • ✨ Whatever ✨
    • -
  • We want in here
    • -
-
- Show code - 
<ul class="tree-view">
-  <li>We can put</li>
-  <li><strong style="color: purple">✨ Whatever ✨</strong></li>
-  <li>We want in here</li>
-</ul>
-
-
- -

- To make this a tree, we can nest further ul elements - (no class needed on these). This will provide them with a nice dotted - border and indentation to illustrate the structure of the tree. -

- -
-
    -
  • Table of Contents
    • -
  • What is web development?
    • -
  • - CSS -
      -
    • Selectors
      • -
    • Specificity
      • -
    • Properties
      • -
    -
    • -
  • - JavaScript -
      -
    • Avoid at all costs
      • -
    -
    • -
  • HTML
    • -
  • Special Thanks
    • -
-
- Show code - 
<ul class="tree-view">
-  <li>Table of Contents</li>
-  <li>What is web development?</li>
-  <li>
-    CSS
-    <ul>
-      <li>Selectors</li>
-      <li>Specificity</li>
-      <li>Properties</li>
-    </ul>
-  </li>
-  <li>
-    JavaScript
-    <ul>
-      <li>Avoid at all costs</li>
-    </ul>
-  </li>
-  <li>HTML</li>
-  <li>Special Thanks</li>
-</ul>
-
-
-
-
- -

Issues, Contributing, etc.

- -

- 98.css is MIT licensed. -

- -

- Refer to the GitHub issues page to see bugs - in my CSS or report new ones. I'd really like to see your pull requests (especially those new to - open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like - to make it a fun place to build your open-source muscle. -

- -

- Thank you for checking my little project out, I hope it brought you some joy today. Consider - starring/following along on GitHub and maybe - subscribing to more fun things on my twitter. 👋 -

-
- - diff --git a/docs/ms_sans_serif.woff b/docs/ms_sans_serif.woff deleted file mode 100644 index a8df7f1..0000000 Binary files a/docs/ms_sans_serif.woff and /dev/null differ diff --git a/docs/ms_sans_serif.woff2 b/docs/ms_sans_serif.woff2 deleted file mode 100644 index 83ea806..0000000 Binary files a/docs/ms_sans_serif.woff2 and /dev/null differ diff --git a/docs/ms_sans_serif_bold.woff b/docs/ms_sans_serif_bold.woff deleted file mode 100644 index 44064b3..0000000 Binary files a/docs/ms_sans_serif_bold.woff and /dev/null differ diff --git a/docs/ms_sans_serif_bold.woff2 b/docs/ms_sans_serif_bold.woff2 deleted file mode 100644 index 610c091..0000000 Binary files a/docs/ms_sans_serif_bold.woff2 and /dev/null differ diff --git a/package-lock.json b/package-lock.json index eb6fe95..9c12282 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,6 +58,21 @@ "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=", "dev": true }, + "array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "dev": true, + "requires": { + "array-uniq": "^1.0.1" + } + }, + "array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "dev": true + }, "array-unique": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", @@ -70,6 +85,15 @@ "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", "dev": true }, + "async": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "dev": true, + "requires": { + "lodash": "^4.17.14" + } + }, "atob": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", @@ -354,6 +378,12 @@ "simple-swizzle": "^0.2.2" } }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, "component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", @@ -671,6 +701,12 @@ "integrity": "sha512-GbtYqKffx3sU8G0HxwXuJFfs58Q7+iwLa5rBwaULwET6jWW8IAQSrVnu7vEfiUIcMVfbYyFg7cw3zdm+EbBJmw==", "dev": true }, + "email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==", + "dev": true + }, "entities": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", @@ -855,6 +891,33 @@ } } }, + "filename-reserved-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz", + "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=", + "dev": true + }, + "filenamify": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz", + "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=", + "dev": true, + "requires": { + "filename-reserved-regex": "^1.0.0", + "strip-outer": "^1.0.0", + "trim-repeated": "^1.0.0" + } + }, + "filenamify-url": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz", + "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=", + "dev": true, + "requires": { + "filenamify": "^1.0.0", + "humanize-url": "^1.0.0" + } + }, "fill-range": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", @@ -902,6 +965,17 @@ "map-cache": "^0.2.2" } }, + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -920,6 +994,20 @@ "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=", "dev": true }, + "gh-pages": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-2.2.0.tgz", + "integrity": "sha512-c+yPkNOPMFGNisYg9r4qvsMIjVYikJv7ImFOhPIVPt0+AcRUamZ7zkGRLHz7FKB0xrlZ+ddSOJsZv9XAFVXLmA==", + "dev": true, + "requires": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify-url": "^1.0.0", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + } + }, "glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", @@ -934,6 +1022,33 @@ "path-is-absolute": "^1.0.0" } }, + "globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "dependencies": { + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + } + } + }, + "graceful-fs": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz", + "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==", + "dev": true + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -1040,6 +1155,30 @@ "readable-stream": "^3.1.1" } }, + "humanize-url": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz", + "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=", + "dev": true, + "requires": { + "normalize-url": "^1.0.0", + "strip-url-auth": "^1.0.0" + }, + "dependencies": { + "normalize-url": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", + "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "prepend-http": "^1.0.0", + "query-string": "^4.1.0", + "sort-keys": "^1.0.0" + } + } + } + }, "import-fresh": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", @@ -1213,6 +1352,12 @@ "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==", "dev": true }, + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=", + "dev": true + }, "is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -1295,6 +1440,15 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -1311,6 +1465,12 @@ "path-exists": "^3.0.0" } }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", + "dev": true + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -1459,6 +1619,12 @@ "boolbase": "~1.0.0" } }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, "object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -1621,6 +1787,21 @@ "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", "dev": true }, + "pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "dev": true + }, + "pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "dev": true, + "requires": { + "pinkie": "^2.0.0" + } + }, "pkg-up": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz", @@ -2296,12 +2477,28 @@ "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==", "dev": true }, + "prepend-http": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", + "dev": true + }, "q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", "dev": true }, + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "dev": true, + "requires": { + "object-assign": "^4.1.0", + "strict-uri-encode": "^1.0.0" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -2539,6 +2736,15 @@ } } }, + "sort-keys": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", + "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=", + "dev": true, + "requires": { + "is-plain-obj": "^1.0.0" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -2606,6 +2812,12 @@ } } }, + "strict-uri-encode": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", + "dev": true + }, "string.prototype.trimend": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", @@ -2666,6 +2878,21 @@ "ansi-regex": "^2.0.0" } }, + "strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, + "strip-url-auth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz", + "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=", + "dev": true + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -2779,6 +3006,15 @@ "repeat-string": "^1.6.1" } }, + "trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", @@ -2803,6 +3039,12 @@ "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=", "dev": true }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true + }, "unquote": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz", diff --git a/package.json b/package.json index 09ac071..55dca3b 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ }, "scripts": { "build": "node build.js", - "build:docs": "npm run build && node build-docs.js" + "build:docs": "npm run build && node build-docs.js", + "deploy:docs": "npm run build:docs && gh-pages -d dist" }, "repository": { "type": "git", @@ -28,6 +29,7 @@ "cssnano": "^4.1.10", "dedent": "^0.7.0", "ejs": "^3.0.2", + "gh-pages": "^2.2.0", "glob": "^7.1.6", "highlight.js": "^9.18.1", "mkdirp": "^1.0.4",