Merge branch 'master' into touch-this

.editorconfig

@@ -0,0 +1,18 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.travis.yml

@@ -1,3 +0,0 @@
-language: node_js
-node_js:
-  - 12

build.js

@@ -51,16 +51,19 @@ function buildDocs() {
 function buildCSS() {
   return postcss()
     .use(require("postcss-inline-svg"))
-    .use(require("postcss-css-variables")({ preserve: "computed" }))
+    .use(require("postcss-css-variables"))
     .use(require("postcss-calc"))
     .use(require("postcss-copy")({ dest: "build", template: "[name].[ext]" }))
+    .use(require("cssnano"))
     .process(fs.readFileSync("style.css"), {
       from: "style.css",
       to: "build/98.css",
+      map: { inline: false },
     })
     .then((result) => {
       mkdirp.sync("build");
       fs.writeFileSync("build/98.css", result.css);
+      fs.writeFileSync("build/98.css.map", result.map);
     });
 }
 

docs/docs.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  background: var(--surface);
+  background: #c0c0c0;
 }
 
 main {
@@ -52,6 +52,10 @@ h2 {
   margin-bottom: 12px;
 }
 
+h3 {
+  font-size: 1.6rem;
+}
+
 h3,
 h4 {
   /* Swap the margin for a top-padding so linking to this section
@@ -75,7 +79,7 @@ p {
 blockquote {
   margin: 0 0 20px;
   padding: 20px;
-  background: var(--button-face);
+  background: #dfdfdf;
 }
 
 blockquote footer {
@@ -85,7 +89,7 @@ blockquote footer {
 .example {
   margin: 16px 0;
   padding: 12px 24px;
-  border-left: 1px solid var(--button-shadow);
+  border-left: 1px solid #808080;
 }
 
 details {
@@ -108,7 +112,8 @@ button.focused {
 }
 
 button.active {
-  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
+    inset -2px -2px #dfdfdf, inset 2px 2px #808080;
 }
 
 @media (max-width: 480px) {

package.json

@@ -1,13 +1,12 @@
 {
   "name": "98.css",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A design system for building faithful recreations of old UIs",
   "main": "build/98.css",
   "directories": {
     "doc": "docs"
   },
   "scripts": {
-    "test": "sh test.sh",
     "build": "node build.js"
   },
   "repository": {
@@ -25,6 +24,7 @@
   },
   "homepage": "https://github.com/jdan/98.css#readme",
   "devDependencies": {
+    "cssnano": "^4.1.10",
     "dedent": "^0.7.0",
     "ejs": "^3.0.2",
     "glob": "^7.1.6",

style.css

@@ -144,6 +144,10 @@ button:focus {
   outline-offset: -4px;
 }
 
+button::-moz-focus-inner {
+  border: 0;
+}
+
 :disabled,
 :disabled + label {
   color: var(--button-shadow);
@@ -260,6 +264,7 @@ input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   margin: 0;
+  background: 0; /* necessary for hiding default disabled-state styling on iOS */
   border: none;
 }
 
@@ -348,6 +353,8 @@ input[type="checkbox"][disabled]:checked + label::after {
 }
 
 input[type="text"],
+input[type="password"],
+input[type="email"],
 select,
 textarea {
   padding: 3px 4px;
@@ -362,11 +369,15 @@ textarea {
 }
 
 input[type="text"],
+input[type="password"],
+input[type="email"],
 select {
   height: 21px;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="password"],
+input[type="email"] {
   /* For some reason descenders are getting cut off without this */
   line-height: 2;
 }
@@ -385,6 +396,8 @@ select {
 
 select:focus,
 input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
 textarea:focus {
   outline: none;
 }

test.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-npm run build
-output=$( git diff build docs )
-
-if [ -z "$output" ]
-then
-    break
-else
-    echo "Please commit the latest build of 98.css (git commit)"
-    exit 1;
-fi