Update docs

zengm-games · Aug 4, 2024 · b6cf5a5 · b6cf5a5
1 parent 0faa4e3
commit b6cf5a5
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -119,7 +119,7 @@
   ],
   "bin": "build/esmodules/cli.js",
   "lint-staged": {
-    "*.{js,cjs,mjs,jsx,json,scss,ts,tsx,html}": "prettier --write"
+    "*.{js,cjs,mjs,jsx,json,css,ts,tsx}": "prettier --write"
   },
   "sideEffects": false
 }
diff --git a/public/index.css b/public/index.css
@@ -1,143 +1,163 @@
 :root {
-    --main-bg-color: #f3f4f6;
-    --main-font-color: #1f2937;
-    --code-bg-color: #e5e7eb;
-    --code-font-color: #000;
+  --main-bg-color: #f3f4f6;
+  --main-font-color: #1f2937;
+  --code-bg-color: #e5e7eb;
+  --code-font-color: #000;
+}
+
+body {
+  background-color: var(--main-bg-color);
+  color: var(--main-font-color);
+  margin: 8px;
+  font-family: "Arvo", serif;
+  font-size: 16px;
+  line-height: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.2em;
+  margin-block-start: 1em;
+  margin-block-end: 0.5em;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+
+  h1 {
+    font-size: 32px;
+    margin: 0;
   }
-
-  body {
-    background-color: var(--main-bg-color);
-    color: var(--main-font-color);
-    margin: 8px;
-    font-family: "Arvo", serif;
-    font-size: 16px;
-    line-height: 1.5rem;
-  }
-
-  h1, h2, h3, h4 {
-    line-height: 1.2em;
-    margin-block-start: 1em;
-    margin-block-end: 0.5em;
-  }
-
-  .navbar {
+
+  .navbar-button {
+    align-self: stretch;
     display: flex;
     align-items: center;
-    margin-bottom: 18px;
-
-    h1 {
-      font-size: 32px;
-      margin: 0;
-    }
-
-    .navbar-button {
-      align-self: stretch;
-      display: flex;
-      align-items: center;
-      background-color: #89bfd3;
-      color: #000;
-      font-size: 15px;
-      padding: 10px;
-      border-radius: 4px;
-      text-decoration: none;
-    }
-    .navbar-button:hover{
-      box-shadow: 6px 6px 0px #000;
-    }
-
-    .editor {
-      margin-right: 1rem;
-      margin-left: auto;
-    }
-
-    .github {
-      gap: 5px;
-    }
-  }
-
-
-  .subtitle {
-    font-size: 20px;
-    margin: 0 0 18px 0;
-  }
-
-  pre {
-    background-color: var(--code-bg-color);
-    color: var(--code-font-color);
-    padding: 12px 16px;
+    background-color: #89bfd3;
+    color: #000;
+    font-size: 15px;
+    padding: 10px;
     border-radius: 4px;
-    overflow-x: auto;
+    text-decoration: none;
   }
-
-  code {
-    font-size: 14px;
+  .navbar-button:hover {
+    box-shadow: 6px 6px 0px #000;
   }
-
-  p code {
-    background-color: var(--code-bg-color);
-    color: var(--code-font-color);
-    padding: 2px 5px;
-    border-radius: 4px;
+
+  .editor {
+    margin-right: 1rem;
+    margin-left: auto;
   }
-
+
+  .github {
+    gap: 5px;
+  }
+}
+
+.subtitle {
+  font-size: 20px;
+  margin: 0 0 18px 0;
+}
+
+pre {
+  background-color: var(--code-bg-color);
+  color: var(--code-font-color);
+  padding: 12px 16px;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+code {
+  font-size: 14px;
+
   a {
-    color: #00f;
+    color: unset;
   }
-  a:hover {
-    text-decoration: none;
+}
+
+p code,
+table code {
+  background-color: var(--code-bg-color);
+  color: var(--code-font-color);
+  padding: 2px 5px;
+  border-radius: 4px;
+}
+
+a {
+  color: #00f;
+}
+a:hover {
+  text-decoration: none;
+}
+a:visited {
+  color: #00f;
+}
+
+#container {
+  margin: 0 auto;
+  max-width: 650px;
+}
+
+#container2 {
+  margin: 0 auto;
+  max-width: 900px;
+}
+
+#faces {
+  display: grid;
+  grid-gap: 2px;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+
+  div {
+    cursor: pointer;
+    user-select: none;
+
+    background: linear-gradient(#bbb, var(--main-bg-color));
+    aspect-ratio: 2/ 3;
+
+    svg {
+      display: block;
+    }
   }
-  a:visited {
-    color: #00f;
+
+  div:hover {
+    background: linear-gradient(#aaa, var(--main-bg-color));
   }
-  
-  #container {
-    margin: 0 auto;
-    max-width: 650px;
+
+  .big {
+    grid-column: 3 / 5;
+    grid-row: 1 / 3;
   }
-
-  #faces {
-    display: grid;
-    grid-gap: 2px;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-
-    div {
-      cursor: pointer;
-      user-select: none;
-
-      background: linear-gradient(#bbb , var(--main-bg-color));
-      aspect-ratio: 2/ 3;
-
-      svg {
-        display: block;
-      }
-    }
-
-    div:hover {
-      background: linear-gradient(#aaa , var(--main-bg-color));
-    }
-
+
+  @media (min-width: 666px) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    aspect-ratio: unset;
+
     .big {
-      grid-column: 3 / 5;
+      grid-column: 4 / 6;
       grid-row: 1 / 3;
     }
-
-    @media (min-width: 666px) {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      aspect-ratio: unset;
-
-      .big {
-        grid-column: 4 / 6;
-        grid-row: 1 / 3;
-      }
-    }
   }
-
+}
+
+.hide-sm {
+  display: none;
+}
+@media (min-width: 666px) {
   .hide-sm {
-    display: none;
+    display: block;
   }
-  @media (min-width: 666px) {
-    .hide-sm {
-      display: block;
-    }
+}
+
+table {
+  border-collapse: collapse;
+  td,
+  th {
+    border: 1px solid #bbb;
+    padding: 0.25em 0.5em;
   }
-  
+}
diff --git a/public/index.html b/public/index.html
@@ -48,16 +48,15 @@ <h2 class="subtitle">A JavaScript library for generating vector-based cartoon fa
       <p>
         Originally faces.js was made for <a href="https://basketball-gm.com/">Basketball GM</a> and other games by <a href="https://zengm.com/">ZenGM</a>, but now it is used in several other projects.
       </p>
-
       <h1>For users</h1>
 
       <p>You can use the <a href="/facesjs/editor/">face editor</a> to generate a custom face, and then export in JSON/SVG/PNG format.</p>
-
       <h1>For developers</h1>
 
       (This is just a copy of <a href="https://github.com/zengm-games/facesjs">the README from the GitHub repo</a>.)
-
-      <h2 id="installation">Installation</h2>
+    </div>
+    <div id="container2">
+<h2 id="installation">Installation</h2>
 <pre><code>npm install --save facesjs</code></pre>
 <h2 id="use">Use</h2>
 <p>Import it with ES modules:</p>
@@ -106,13 +105,6 @@ <h3 id="react-integration">React integration</h3>
 <a class="sourceLine" id="cb10-13" title="13"><span class="op">};</span></a></code></pre></div>
 <p>Props of the <code>Face</code> component:</p>
 <table>
-<colgroup>
-<col style="width: 20%" />
-<col style="width: 20%" />
-<col style="width: 20%" />
-<col style="width: 20%" />
-<col style="width: 20%" />
-</colgroup>
 <thead>
 <tr class="header">
 <th>Prop</th>