From b6cf5a58cd911d94bc63a4c4b9b2cd67a19c0d31 Mon Sep 17 00:00:00 2001 From: Jeremy Scheff Date: Sun, 4 Aug 2024 11:39:26 -0400 Subject: [PATCH] Update docs --- package.json | 2 +- public/index.css | 266 +++++++++++++++++++++++++--------------------- public/index.html | 14 +-- 3 files changed, 147 insertions(+), 135 deletions(-) diff --git a/package.json b/package.json index fb37b66..a31c800 100644 --- 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 index 4166d88..f4c74cf 100644 --- 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; } - \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index d6f9848..5688b86 100644 --- a/public/index.html +++ b/public/index.html @@ -48,16 +48,15 @@

A JavaScript library for generating vector-based cartoon fa

Originally faces.js was made for Basketball GM and other games by ZenGM, but now it is used in several other projects.

-

For users

You can use the face editor to generate a custom face, and then export in JSON/SVG/PNG format.

-

For developers

(This is just a copy of the README from the GitHub repo.) - -

Installation

+ +
+

Installation

npm install --save facesjs

Use

Import it with ES modules:

@@ -106,13 +105,6 @@

React integration

};

Props of the Face component:

-------
Prop