Merge pull request #2 from Horsty80/add-contributing

Add contributing
2024-11-16 19:54:46 +00:00 · 2024-08-12 22:28:17 +02:00 · 2024-08-12 22:28:17 +02:00 · 3b898bd824
commit 3b898bd824
parent ab06a0371a aa09c9e1a8
38 changed files with 4161 additions and 2023 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,22 @@
+# How adding a new set icon
+
+## Prerequisites
+
+You need to have a icomoon account: https://icomoon.io/app/
+For future steps, i recommande to import actual set of keyrune's icons in icomoon.
+
+![import](./contributing/images/import-icon-btn.png)
+
+A model asking for "The glyphs in your SVG font were loaded.
+Use this font's metrics and metadata when exporting fonts?" will appear, click on "Yes".
+
+![modal-import](./contributing/images/import-icon-modal.png)
+
+🎉 Success, you have now all the keyrune's icons in your icomoon project. That will be useful for the next steps when we need to generate the font.
+
+## Summary
+
+1. [Update fonts and svg with the new icon](./contributing/UpdateFonts.md)
+2. [Update codebase to handle the new icon](./contributing/UpdateCodebase.md)
+3. [Generate associated css](./contributing/GenerateCss.md)
+4. [Update the documentation](./contributing/UpdateDocumentation.md)
--- a/contributing/GenerateCss.md
+++ b/contributing/GenerateCss.md
@ -0,0 +1,26 @@
+# Generate CSS
+
+> exemple with the set icon of the set "Fondation" (FDN)
+
+## Steps
+
+Generate the CSS file with the following command:
+
+```bash
+npm run lessmin && npm run sassmin
+```
+or for debug purpose you can run 
+
+```bash
+npm run less && npm run sass
+```
+
+2 files will be generated in the `css` folder: `keyrune.css` and `keyrune.min.css`.
+
+![generate-css](./images/generate-css.png)
+
+Yaay 🎉 you have generate the CSS file! Now you can use the new icon in the website. Follow the [Usage inside README.md](../README.md#usage)
+
+---
+**Go to the next step: [Update the documentation](./UpdateDocumentation.md)**
+---
--- a/contributing/UpdateCodebase.md
+++ b/contributing/UpdateCodebase.md
@ -0,0 +1,27 @@
+# Update Codebase
+
+> exemple with the set icon of the set "Fondation" (FDN)
+
+## Prerequisites
+
+You need to have `lessc` and `sass` installed on your computer.
+
+## Steps
+
+1. Open the `sass/_variables.scss` file in the repository.
+2. Add the new set icon in the `@keyrune-icons` list. (You can see that i add the short code `fdn` and the unicode character `1f31f`)
+    ```diff
+    + ("Foundations", "fdn", "\1f31f"),
+    ```
+
+3. Open the `less/icons.less` file in the repository.
+4. Add the new set icon in the `@keyrune-icons` list. (You can see that i add the short code `fdn` and the unicode character `1f31f`)
+    ```diff
+    + .@{ss-prefix}-fdn:before { content: "\1f31f"; } // Foundation
+    ```
+
+Yaay 🎉 you have update the codebase now everything is ready only one steps to use the new icon
+
+---
+**Go to the next step: [Generate CSS](./GenerateCss.md)**
+---
--- a/contributing/UpdateDocumentation.md
+++ b/contributing/UpdateDocumentation.md
@ -0,0 +1,34 @@
+# Update existing documentation
+
+After you have added a new set icon, update the codebase and generate the new `keyrune.css` file, you need to update the documentation to reflect the changes.
+
+## Steps
+
+1. Run this command
+    ```bash
+    npm run build
+    ```
+    This will copy fonts and css files to the `docs` folder.
+2. Add the new icon usage inside the `cheatsheet.html`.
+    ```diff
+    + <div class="icon">
+    ```
+    Replace `fdn` with the short code of the new icon.
+3. Add the new icon usage inside the `icons.html`.
+    ```diff
+    + <div class="icon" id="fdn" name="Foundation" data-name="Foundation" data-class="fdn" data-unicode="x1f31f" data-added="v3.14.0">
+    +    <span class="name"><i class="ss ss-fdn"></i> Foundation <em>(fdn)</em></span>
+    + </div>
+    ```
+    Replace `fdn` with the short code of the new icon.
+
+    > A data attribute with the version is present, but i don't know how it's working. If you have info about it, please add it in this doc here. 🙏
+
+You can open each html file in your browser to see the changes. Or use tools like `Live Server` in Visual Studio Code.
+Normally you can see the changes in the `./cheatsheet.html` and `./icons.html` .
+
+![cheatsheet.html](./images/cheatsheet-html.png) ![icons.html](./images/icons-html.png)
+
+Yaay! You have successfully updated the documentation. 🎉
+
+You can now commit your changes and create a pull request.
--- a/contributing/UpdateFonts.md
+++ b/contributing/UpdateFonts.md
@ -0,0 +1,54 @@
+# Update Fonts
+
+> exemple with the set icon of the set "Fondation" (FDN)
+
+## Steps
+
+1. Search for the icon you want to add (from scryfall.com: https://svgs.scryfall.io/sets/fdn.svg) and download it (inspect DOM and copy/paste in a blank file). Save it in a temporary folder in your desktop.
+
+2. On icomoon, click on the "Import Icons" button. Select the previously downloaded icon. It will be added in a "Untilited Set".
+
+    ![import-icon](./images/import-icon.png)
+
+3. Now you need to select all the icons you want to add in the font + the new one. On top right of each section you can find a menu with "Select all" and "Deselect all".
+
+    ![select-all](./images/select-all.png)
+
+4. On the bottom of the page, you can check that you have the right number of icons selected. (Actual number + 1, the new one)
+
+    ![check-number](./images/check-number.png)
+
+5. You can now click on the "Generate Font" button. You will be redirect to a page whith all setting for each icon.
+
+    ![generate-font](./images/generate-font.png)
+
+6. Find your new icon and click on the "smiley" button to search for a unicode character and select it.
+
+    ![icon-settings](./images/icon-settings.png)
+
+    🚧 Be sure to select a character that is not already used in the font.🚧
+
+    You can check how your icon will be displayed in the font by clicking on the "Get code </>" button.
+
+    ![preview-icon](./images/preview-icon.png)
+
+> If you have info about how to determine wich character is free, please add it in this doc here. 🙏
+> What I do is when i have selected my unicode character, i search in all the codebase if it's already used. If not, i use it.
+
+7. You can now donwload the font by clicking on the "Download" button. You get a zip file with all the files needed.
+
+    ![download-font](./images/download-font.png)
+
+8. Unzip the file and copy the `fonts` folder in the keyrune `fonts` folder. Normally you will have the `keyrune.eot`, `keyrune.svg`, `keyrune.ttf`, `keyrune.woff` files.
+
+    ![fonts-folder](./images/fonts-folder.png)
+
+Yaay 🎉 you have update the keyrune font! And have your new icon available.
+
+---
+**Go to the next step: [Update codebase to handle the new icon](./UpdateCodebase.md)**
+---
+
+## Extra steps
+
+One files is missing inside the generated fonts, it's the `keyrune.woff2`. To get it you need to convert the `keyrune.woff` with online tools like [Cloudconvert](https://cloudconvert.com/woff-to-woff2)
--- a/contributing/images/cheatsheet-html.png
+++ b/contributing/images/cheatsheet-html.png
--- a/contributing/images/check-number.png
+++ b/contributing/images/check-number.png
--- a/contributing/images/download-font.png
+++ b/contributing/images/download-font.png
--- a/contributing/images/fonts-folder.png
+++ b/contributing/images/fonts-folder.png
--- a/contributing/images/generate-css.png
+++ b/contributing/images/generate-css.png
--- a/contributing/images/generate-font.png
+++ b/contributing/images/generate-font.png
--- a/contributing/images/icon-settings.png
+++ b/contributing/images/icon-settings.png
--- a/contributing/images/icons-html.png
+++ b/contributing/images/icons-html.png
--- a/contributing/images/import-icon-btn.png
+++ b/contributing/images/import-icon-btn.png
--- a/contributing/images/import-icon-modal.png
+++ b/contributing/images/import-icon-modal.png
--- a/contributing/images/import-icon.png
+++ b/contributing/images/import-icon.png
--- a/contributing/images/preview-icon.png
+++ b/contributing/images/preview-icon.png
--- a/contributing/images/select-all.png
+++ b/contributing/images/select-all.png
--- a/css/keyrune.css
+++ b/css/keyrune.css
--- a/css/keyrune.css.map
+++ b/css/keyrune.css.map
--- a/css/keyrune.min.css
+++ b/css/keyrune.min.css
--- a/docs/assets/keyrune.min.css
+++ b/docs/assets/keyrune.min.css
--- a/docs/cheatsheet.html
+++ b/docs/cheatsheet.html
@ -171,6 +171,7 @@
                    <span class="utf"><i>&#xe669;</i> ss-evg <code>&amp;#xe669;</code></span>
                    <span class="utf"><i>&#xe621;</i> ss-exo <code>&amp;#xe621;</code></span>
                    <span class="utf"><i>&#xe69a;</i> ss-exp <code>&amp;#xe69a;</code></span>
+                    <span class="utf"><i>&#x1f31f;</i> ss-fdn <code>&amp;#x1f31f;</code></span>
                    <span class="utf"><i>&#xe617;</i> ss-fem <code>&amp;#xe617;</code></span>
                    <span class="utf"><i>&#xe654;</i> ss-frf <code>&amp;#xe654;</code></span>
                    <span class="utf"><i>&#xe63c;</i> ss-fut <code>&amp;#xe63c;</code></span>
--- a/docs/fonts/keyrune.eot
+++ b/docs/fonts/keyrune.eot
--- a/docs/fonts/keyrune.svg
+++ b/docs/fonts/keyrune.svg
--- a/docs/fonts/keyrune.ttf
+++ b/docs/fonts/keyrune.ttf
--- a/docs/fonts/keyrune.woff
+++ b/docs/fonts/keyrune.woff
--- a/docs/fonts/keyrune.woff2
+++ b/docs/fonts/keyrune.woff2
--- a/docs/icons.html
+++ b/docs/icons.html
@ -452,6 +452,9 @@
                    <div class="icon" id="blb" name="Bloomburrow" data-name="Bloomburrow" data-class="blb" data-unicode="e9cd" data-added="v3.14.0">
                        <span class="name"><i class="ss ss-blb"></i> Bloomburrow <em>(blb)</em></span>
                    </div>
+                    <div class="icon" id="fdn" name="Foundation" data-name="Foundation" data-class="fdn" data-unicode="1f31f" data-added="v3.14.0">
+                        <span class="name"><i class="ss ss-fdn"></i> Foundation <em>(fdn)</em></span>
+                    </div>
                </div>
            </section>
            <section class="content">
--- a/fonts/keyrune.eot
+++ b/fonts/keyrune.eot
--- a/fonts/keyrune.svg
+++ b/fonts/keyrune.svg
--- a/fonts/keyrune.ttf
+++ b/fonts/keyrune.ttf
--- a/fonts/keyrune.woff
+++ b/fonts/keyrune.woff
--- a/fonts/keyrune.woff2
+++ b/fonts/keyrune.woff2
--- a/less/icons.less
+++ b/less/icons.less
@ -178,6 +178,7 @@
 .@{ss-prefix}-otj:before { content: "\e9cc"; } // Outlaws of Thunder Junction
 .@{ss-prefix}-blb:before { content: "\e9cd"; } // Bloomburrow
 .@{ss-prefix}-dsk:before { content: "\1f305"; } // Duskmourn: House of Horror
+.@{ss-prefix}-fdn:before { content: "\1f31f"; } // Foundation

 /**
 * Command Zone */
--- a/package-lock.json
+++ b/package-lock.json
@ -8,20 +8,94 @@
      "name": "keyrune",
      "version": "3.15.0",
      "license": "(OFL-1.1 AND GPL-3.0-only)",
-      "dependencies": {
-        "lessc": "^1.0.2"
-      },
      "devDependencies": {
+        "clean-css": "^5.3.3",
+        "lessc": "^1.0.2",
+        "sass": "^1.77.8",
        "zepto": "^1.2.0"
      },
      "engines": {
        "node": "*"
      }
    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
    "node_modules/copy-anything": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
      "dependencies": {
        "is-what": "^3.14.1"
      },
@ -33,6 +107,7 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
      "optional": true,
      "dependencies": {
        "prr": "~1.0.1"
@ -41,16 +116,56 @@
        "errno": "cli.js"
      }
    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
      "optional": true
    },
    "node_modules/image-size": {
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
      "optional": true,
      "bin": {
        "image-size": "bin/image-size.js"
@ -59,15 +174,65 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
    "node_modules/is-what": {
      "version": "3.14.1",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
    },
    "node_modules/less": {
      "version": "3.13.1",
      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "dev": true,
      "dependencies": {
        "copy-anything": "^2.0.1",
        "tslib": "^1.10.0"
@ -92,6 +257,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/lessc/-/lessc-1.0.2.tgz",
      "integrity": "sha512-cv7EXQRiD3Cu2Vsy3S9C89G01kOv0TrLQMoWHxscCgkMYdhEvknhaINeQkZbPmUlJ87AEzjPm0y/14Cg9j7/ug==",
+      "dev": true,
      "dependencies": {
        "less": "^3.9.0"
      }
@ -100,6 +266,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
      "optional": true,
      "dependencies": {
        "pify": "^4.0.1",
@ -113,6 +280,7 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
      "optional": true,
      "bin": {
        "mime": "cli.js"
@ -125,12 +293,35 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
      "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
+      "dev": true,
      "optional": true
    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/pify": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
      "optional": true,
      "engines": {
        "node": ">=6"
@ -140,12 +331,43 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
      "optional": true
    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/semver": {
      "version": "5.7.2",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
      "optional": true,
      "bin": {
        "semver": "bin/semver"
@ -155,15 +377,37 @@
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "optional": true,
+      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
    "node_modules/tslib": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
    },
    "node_modules/zepto": {
      "version": "1.2.0",
@ -173,10 +417,61 @@
    }
  },
  "dependencies": {
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.1.1"
+      }
+    },
+    "chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      }
+    },
    "copy-anything": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
      "requires": {
        "is-what": "^3.14.1"
      }
@ -185,32 +480,98 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
      "optional": true,
      "requires": {
        "prr": "~1.0.1"
      }
    },
+    "fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "optional": true
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
    "graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
      "optional": true
    },
    "image-size": {
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
      "optional": true
    },
+    "immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
    "is-what": {
      "version": "3.14.1",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
    },
    "less": {
      "version": "3.13.1",
      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "dev": true,
      "requires": {
        "copy-anything": "^2.0.1",
        "errno": "^0.1.1",
@ -227,6 +588,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/lessc/-/lessc-1.0.2.tgz",
      "integrity": "sha512-cv7EXQRiD3Cu2Vsy3S9C89G01kOv0TrLQMoWHxscCgkMYdhEvknhaINeQkZbPmUlJ87AEzjPm0y/14Cg9j7/ug==",
+      "dev": true,
      "requires": {
        "less": "^3.9.0"
      }
@ -235,6 +597,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
      "optional": true,
      "requires": {
        "pify": "^4.0.1",
@ -245,42 +608,95 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
      "optional": true
    },
    "native-request": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
      "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
+      "dev": true,
      "optional": true
    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
    "pify": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
      "optional": true
    },
    "prr": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
      "optional": true
    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
    "semver": {
      "version": "5.7.2",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
      "optional": true
    },
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "optional": true
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
    },
    "tslib": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
    },
    "zepto": {
      "version": "1.2.0",
--- a/package.json
+++ b/package.json
@ -21,9 +21,11 @@
  "keywords": [],
  "homepage": "https://keyrune.andrewgioia.com",
  "dependencies": {
-    "lessc": "^1.0.2"
  },
  "devDependencies": {
+    "clean-css": "^5.3.3",
+    "lessc": "^1.0.2",
+    "sass": "^1.77.8",
    "zepto": "^1.2.0"
  },
  "license": "(OFL-1.1 AND GPL-3.0-only)",
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -246,7 +246,7 @@ $keyrune_sets: (
    ("Outlaws of Thunder Junction", "otj", "\e9cc"),
    ("Bloomburrow", "blb", "\e9cd"),
    ("Duskmourn: House of Horror", "dsk", "\1f305"),
-    //
+    ("Foundations", "fdn", "\1f31f"),
    // Command zone
    ("Vanguard", "van", "\e655"),
    ("Planechase 2009", "hop", "\e656"),