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 7e5fd4b..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