adding new icons

4 years ago · a350514374
--- a/assets/iconmoon/PNG/checked.png
+++ b/assets/iconmoon/PNG/checked.png
--- a/assets/iconmoon/PNG/chronometer.png
+++ b/assets/iconmoon/PNG/chronometer.png
--- a/assets/iconmoon/PNG/error.png
+++ b/assets/iconmoon/PNG/error.png
--- a/assets/iconmoon/PNG/logo.png
+++ b/assets/iconmoon/PNG/logo.png
--- a/assets/iconmoon/PNG/minus.png
+++ b/assets/iconmoon/PNG/minus.png
--- a/assets/iconmoon/PNG/paperplane.png
+++ b/assets/iconmoon/PNG/paperplane.png
--- a/assets/iconmoon/PNG/ruler.png
+++ b/assets/iconmoon/PNG/ruler.png
--- a/assets/iconmoon/PNG/shipping.png
+++ b/assets/iconmoon/PNG/shipping.png
--- a/assets/iconmoon/PNG/spaceinvaders.png
+++ b/assets/iconmoon/PNG/spaceinvaders.png
--- a/assets/iconmoon/PNG/transformers.png
+++ b/assets/iconmoon/PNG/transformers.png
--- a/assets/iconmoon/Read
+++ b/assets/iconmoon/Read
@ -1,15 +0,0 @@
 The *SVG* folder contains the icons you selected as separate SVG files.

 If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.

 *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:

 <svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>

 You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.

 If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
 properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse

 You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

--- a/assets/iconmoon/SVG/checked.svg
+++ b/assets/iconmoon/SVG/checked.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </svg>
--- a/assets/iconmoon/SVG/chronometer.svg
+++ b/assets/iconmoon/SVG/chronometer.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>chronometer</title>
 <path d="M28.054 18.571c0 6.933-5.62 12.554-12.554 12.554s-12.554-5.621-12.554-12.554c0-6.722 5.286-12.192 11.927-12.521v-2.166h-0.941c-0.555 0-1.005-0.45-1.005-1.005s0.45-1.004 1.005-1.004h3.012c0.555 0 1.005 0.449 1.005 1.004s-0.45 1.005-1.005 1.005h-1.066v2.153c6.757 0.2 12.176 5.729 12.176 12.534zM14.873 9.909v-2.291c-3.109 0.176-5.866 1.64-7.766 3.858l1.653 1.653-0.71 0.711-1.565-1.566c-1.274 1.798-2.032 3.987-2.032 6.359 0 0.106 0.015 0.251 0.015 0.251h2.432v1.005h-2.36c0.244 2.052 1.057 3.987 2.268 5.534l1.243-1.243 0.71 0.71-1.296 1.297c1.879 1.996 4.488 3.297 7.408 3.462v-2.729h1.004v2.742c2.989-0.102 5.67-1.393 7.599-3.41l-1.424-1.424 0.71-0.71 1.377 1.376c1.24-1.56 2.074-3.521 2.322-5.604h-2.55v-1.005h2.621c0.003-0.104 0.016-0.145 0.016-0.251 0-2.438-0.8-4.681-2.138-6.505l-1.648 1.648-0.71-0.71 1.726-1.725c-1.947-2.203-4.753-3.631-7.9-3.737v2.304h-1.005zM15.939 18.885h3.516c0.277 0 0.502 0.226 0.502 0.502 0 0.277-0.225 0.503-0.502 0.503h-4.018c-0.277 0-0.502-0.226-0.502-0.503v-6.967c0-0.277 0.225-0.502 0.502-0.502s0.502 0.225 0.502 0.502v6.465z"></path>
 </svg>
--- a/assets/iconmoon/SVG/error.svg
+++ b/assets/iconmoon/SVG/error.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>error</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM20.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM20.736 19.723l-1.014 1.014c-0.186 0.187-0.488 0.187-0.675 0l-2.87-2.87-2.87 2.87c-0.187 0.187-0.488 0.187-0.675 0l-1.013-1.014c-0.187-0.187-0.187-0.488 0-0.675l2.871-2.87-2.871-2.87c-0.187-0.186-0.187-0.488 0-0.675l1.013-1.013c0.187-0.187 0.488-0.187 0.675 0l2.87 2.87 2.87-2.87c0.187-0.187 0.489-0.187 0.675 0l1.014 1.013c0.186 0.187 0.186 0.489 0 0.675l-2.871 2.87 2.871 2.87c0.186 0.186 0.186 0.488 0 0.675zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </svg>
--- a/assets/iconmoon/SVG/minus.svg
+++ b/assets/iconmoon/SVG/minus.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </svg>
--- a/assets/iconmoon/SVG/paperplane.svg
+++ b/assets/iconmoon/SVG/paperplane.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>paperplane</title>
 <path d="M3.363 4.414l4.875 19.348 9.467-3.018-8.448-10.298 10.902 9.56 8.853-2.77-25.649-12.822zM18.004 27.586v-5.324l-3.116 0.926 3.116 4.398z"></path>
 </svg>
--- a/assets/iconmoon/SVG/ruler.svg
+++ b/assets/iconmoon/SVG/ruler.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>ruler</title>
 <path d="M6.058 6.835l0.686 0.686-2.808 2.808 2.188 2.188 2.821-2.821 0.641 0.641-2.821 2.822 2.16 2.159 6.416-6.416-7.812-7.766-6.393 6.393 2.114 2.115 2.808-2.809zM23.099 16.659l-6.416 6.417 2.159 2.159 2.822-2.821 0.641 0.641-2.821 2.821 2.188 2.188 2.807-2.808 0.686 0.686-2.807 2.808 2.113 2.114 6.394-6.394-7.766-7.811zM29.822 8.451c0.781-0.782 0.787-2.045 0.012-2.821l-3.512-3.511c-0.775-0.775-2.039-0.771-2.82 0.012l-2.17 2.17 6.32 6.32 2.17-2.17zM3.398 25.942l2.623 2.623 5.284-1.877-6.030-6.030-1.877 5.284zM20.65 4.943l-14.885 14.886 6.369 6.369 14.886-14.886-6.37-6.369zM8.657 19.816l11.981-11.981 0.698 0.698-11.982 11.982-0.697-0.699zM10.053 21.213l11.98-11.981 0.698 0.698-11.981 11.98-0.697-0.697zM11.449 22.608l11.981-11.981 0.697 0.698-11.98 11.981-0.698-0.698zM1.954 30.010l3.066-1.117-1.949-1.949-1.117 3.066z"></path>
 </svg>
--- a/assets/iconmoon/SVG/shipping.svg
+++ b/assets/iconmoon/SVG/shipping.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>shipping</title>
 <path d="M16.722 21.863c-0.456-0.432-0.988-0.764-1.569-0.971l-1.218-4.743 14.506-4.058 1.554 6.056-13.273 3.716zM12.104 9.019l9.671-2.705 1.555 6.058-9.67 2.705-1.556-6.058zM12.538 20.801c-0.27 0.076-0.521 0.184-0.765 0.303l-4.264-16.615h-1.604c-0.161 0.351-0.498 0.598-0.896 0.598h-2.002c-0.553 0-1.001-0.469-1.001-1.046s0.448-1.045 1.001-1.045h2.002c0.336 0 0.618 0.184 0.8 0.447h3.080v0.051l0.046-0.014 4.41 17.183c-0.269 0.025-0.538 0.064-0.807 0.138zM12.797 21.811c1.869-0.523 3.79 0.635 4.291 2.588 0.501 1.951-0.608 3.957-2.478 4.48-1.869 0.521-3.79-0.637-4.291-2.588s0.609-3.957 2.478-4.48zM12.27 25.814c0.214 0.836 1.038 1.332 1.839 1.107s1.276-1.084 1.062-1.92c-0.214-0.836-1.038-1.332-1.839-1.109-0.802 0.225-1.277 1.085-1.062 1.922zM29.87 21.701l-11.684 3.268c-0.021-0.279-0.060-0.561-0.132-0.842-0.071-0.281-0.174-0.545-0.289-0.799l11.623-3.25 0.482 1.623z"></path>
 </svg>
--- a/assets/iconmoon/SVG/spaceinvaders.svg
+++ b/assets/iconmoon/SVG/spaceinvaders.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32">
 <title>spaceinvaders</title>
 <path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
 </svg>
--- a/assets/iconmoon/SVG/transformers.svg
+++ b/assets/iconmoon/SVG/transformers.svg
@ -1,5 +0,0 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>transformers</title>
 <path d="M25.115 5.265l0.045-1.455c-2.694-1.348-5.686-2.155-8.973-2.155s-6.653 0.807-9.347 2.155l0.045 1.455 9.115 5.981 9.115-5.981zM16 4.556c1.875 0 3.448 0.601 3.448 0.601l-3.448 2.317-3.448-2.317c0 0 1.573-0.601 3.448-0.601zM18.073 23.977v-7.020l0.468-6.035-2.541 1.671-2.479-1.671 0.53 6.035v7.020h4.022zM12.39 10.276l-6.789-4.526-0.045-1.761h-3.996l0.593 8.55 4.85 3.466h5.927l-0.54-5.729zM4.685 10.653l6.412 3.018 0.107 0.989-6.357-2.875-0.162-1.132zM4.415 7.582l6.358 3.071 0.161 1.069-6.411-2.955-0.108-1.185zM4.308 26.549l4.735 2.424v-9.412l-2.796-1.74v-1.078l-2.748-1.886 0.809 11.692zM13.054 24.992v-7.012l-3.071 1.562v10.186l1.384 0.861 1.886-4.598h5.496l1.886 4.598 1.446-0.861v-10.185l-3.071-1.562v7.012h-5.956zM14.168 27.070l-1.401 3.932h6.466l-1.4-3.932h-3.665zM19.071 16.004h5.927l4.85-3.466 0.593-8.55h-3.996l-0.046 1.762-6.79 4.526-0.538 5.728zM27.153 11.785l-6.421 3 0.171-1.114 6.412-3.018-0.162 1.132zM27.477 8.767l-6.412 3.018 0.162-1.132 6.358-3.071-0.108 1.185zM28.5 14.856l-2.747 1.886v1.078l-2.755 1.74v9.412l4.694-2.424 0.808-11.692z"></path>
 </svg>
--- a/assets/iconmoon/demo-external-svg.html
+++ b/assets/iconmoon/demo-external-svg.html
@ -1,64 +0,0 @@
 <!doctype html>
 <html>
 <head>
    <title>IcoMoon - SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header class="bgc1 clearfix">
 <div class="mhl">
    <p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p><p><strong>Notice</strong>: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be <b>hosted on a web server</b> to work properly.</p>
 </div>
 </header>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
        <div class="glyph fs1">
            <div class="clearfix pbs">
                <svg class="icon icon-logo"><use xlink:href="symbol-defs.svg#icon-logo"></use></svg><span class="name"> icon-logo</span>
            </div>
        </div>
  </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-transformers"><use xlink:href="symbol-defs.svg#icon-transformers"></use></svg><span class="name"> icon-transformers</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-spaceinvaders"><use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use></svg><span class="name"> icon-spaceinvaders</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-paperplane"><use xlink:href="symbol-defs.svg#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-checked"><use xlink:href="symbol-defs.svg#icon-checked"></use></svg><span class="name"> icon-checked</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-minus"><use xlink:href="symbol-defs.svg#icon-minus"></use></svg><span class="name"> icon-minus</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-shipping"><use xlink:href="symbol-defs.svg#icon-shipping"></use></svg><span class="name"> icon-shipping</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-ruler"><use xlink:href="symbol-defs.svg#icon-ruler"></use></svg><span class="name"> icon-ruler</span>
            </div>
        </div>
  </div>
 <script defer src="svgxuse.js"></script>
 </body>
 </html>
--- a/assets/iconmoon/demo-files/demo.css
+++ b/assets/iconmoon/demo-files/demo.css
@ -1,151 +0,0 @@
 body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #555;
  background: #fff;
 }
 h1 {
  font-size: 1.5em;
  font-weight: normal;
  box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
 }
 small {
  font-size: .66666667em;
 }
 a {
  color: #e74c3c;
  text-decoration: none;
 }
 a:hover, a:focus {
  box-shadow: 0 1px #e74c3c;
 }
 .bshadow0, input {
  box-shadow: inset 0 -2px #e7e7e7;
 }
 input:hover {
  box-shadow: inset 0 -2px #ccc;
 }
 input, fieldset {
  font-size: 1em;
  margin: 0;
  padding: 0;
  border: 0;
 }
 input {
  color: inherit;
  line-height: 1.5;
  height: 1.5em;
  padding: .25em 0;
 }
 input:focus {
  outline: none;
  box-shadow: inset 0 -2px #449fdb;
 }
 .glyph {
  font-size: 16px;
  margin-right: 1.5em;
  float: left;
  width: 6em;
 }
 svg {
  color: #000;
 }
 .liga {
  width: 80%;
  width: calc(100% - 2.5em);
 }
 .talign-right {
  text-align: right;
 }
 .talign-center {
  text-align: center;
 }
 .bgc1 {
  background: #f1f1f1;
 }
 .fgc0 {
  color: #000;
 }
 .fgc1 {
  color: #999;
 }
 p {
  margin-top: 1em;
  margin-bottom: 1em;
 }
 .mvm {
  margin-top: .75em;
  margin-bottom: .75em;
 }
 .mtn {
  margin-top: 0;
 }
 .mtl, .mal {
  margin-top: 1.5em;
 }
 .mbl, .mal {
  margin-bottom: 1.5em;
 }
 .mal, .mhl {
  margin-left: 1.5em;
  margin-right: 1.5em;
 }
 .mhmm {
  margin-left: 1em;
  margin-right: 1em;
 }
 .ptl {
  padding-top: 1.5em;
 }
 .pbs, .pvs {
  padding-bottom: .25em;
 }
 .pvs, .pts {
  padding-top: .25em;
 }
 .unit {
  float: left;
 }
 .unitRight {
  float: right;
 }
 .size1of2 {
  width: 50%;
 }
 .size1of1 {
  width: 100%;
 }
 .clearfix:before, .clearfix:after {
  content: " ";
  display: table;
 }
 .clearfix:after {
  clear: both;
 }
 .hidden-true {
  display: none;
 }
 .textbox0 {
  width: 3em;
  background: #f1f1f1;
  padding: .25em .5em;
  line-height: 1.5;
  height: 1.5em;
 }
 .fs0 {
  font-size: 16px;
 }
 .fs1 {
  font-size: 32px;
 }
 .fs2 {
  font-size: 32px;
 }
 .name {
  font-size: 0.5em;
  margin-left: 1em;
 }

--- a/assets/iconmoon/demo.html
+++ b/assets/iconmoon/demo.html
@ -1,116 +0,0 @@
 <!doctype html>
 <html>
 <head>
    <title>IcoMoon - SVG Icons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 <symbol id="icon-logo" viewBox="0 0 32 32">
 <title>logo</title>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M5.317 14.319h-0.004l0.524 2.551z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M22.623 15.848c-1.216 1.528-3.761 2.763-6.623 2.763-3.282 0-6.712-3.049-6.532-2.763h-2.72l2.993 14.612h13.641l3.016-14.612h-3.775zM20.125 27.444c-1.111 0.778-2.576 1.207-4.125 1.207s-3.013-0.429-4.125-1.207c-1.189-0.833-1.844-1.965-1.844-3.188s0.655-2.355 1.844-3.188c1.111-0.778 2.576-1.207 4.125-1.207s3.013 0.429 4.125 1.207c1.189 0.833 1.844 1.965 1.844 3.188s-0.655 2.355-1.844 3.188z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M8.679 12.887h0.477c0.452 0 0.846 0.325 0.846 0.722 0 0.458 0.014 0.909 0.587 1.323v-9.207h-1.91v7.163z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M20.043 1.436v1.232h-1.719v14.139c0.764-0.171 1.242-0.406 1.719-0.69v-14.681z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M23.195 4.597v1.319h-1.91v9.017c0.191-0.414 0.532-0.865 0.532-1.323 0-0.397 0.344-0.722 0.783-0.722h0.595v-8.29z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M16.987 6.199v1.435h-2.197v-1.435 10.87c0.287 0.028 0.747 0.042 1.098 0.042s0.907-0.015 1.098-0.042v-10.87z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M13.836 2.862v1.334h-1.91v11.921c0.764 0.284 1.433 0.519 1.91 0.69v-13.945z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M24.612 8.826v4.069h2.312c0.055-0.815 0.034-2.286-0.697-3.223-0.38-0.486-0.909-0.764-1.615-0.847z"></path>
 <path fill="#3f2d20" style="fill: var(--color3, #3f2d20)" d="M27.362 8.794c-0.652-0.838-1.578-1.312-2.75-1.41v-3.504c0-0.397-0.321-0.718-0.718-0.718h-2.44v-2.443c0-0.397-0.321-0.718-0.718-0.718h-3.158c-0.397 0-0.718 0.321-0.718 0.718v4.045h-1.722v-2.619c0-0.397-0.321-0.718-0.718-0.718h-3.158c-0.396 0-0.718 0.321-0.718 0.718v0.815h-2.44c-0.396 0-0.718 0.321-0.718 0.718v3.705c-1.173 0.099-2.098 0.572-2.75 1.41-1.441 1.852-0.933 4.82-0.911 4.945 0.001 0.003 3.601 17.687 3.601 17.687 0.068 0.334 0.362 0.575 0.703 0.575h15.937c0.341 0 0.635-0.24 0.703-0.575 0 0 3.601-17.683 3.601-17.687 0.022-0.125 0.53-3.093-0.911-4.945zM8.618 30.564l-3.305-16.233h3.388c0.538 2.349 3.662 4.216 7.3 4.216s6.762-1.868 7.3-4.216h3.388l-3.306 16.233h-14.765zM7.388 8.826v4.069h-2.315c-0.060-0.901 0.010-2.335 0.698-3.219 0.38-0.488 0.91-0.767 1.617-0.85zM8.824 4.396h1.722v10.536c-0.314-0.414-0.491-0.861-0.491-1.319 0-0.397-0.321-0.718-0.718-0.718h-0.513v-8.499zM23.176 12.895h-0.513c-0.397 0-0.718 0.321-0.718 0.718 0 0.458-0.177 0.905-0.491 1.319v-10.335h1.722v8.298zM18.297 1.436h1.722v14.681c-0.507 0.283-1.090 0.519-1.722 0.69v-15.371zM16.861 17.069c-0.283 0.028-0.571 0.042-0.861 0.042s-0.578-0.015-0.861-0.042v-10.87h1.722v10.87zM11.981 2.862h1.722v13.945c-0.631-0.171-1.215-0.406-1.722-0.69v-13.255zM26.924 12.895h-2.312v-4.069c0.705 0.083 1.235 0.361 1.615 0.847 0.731 0.936 0.753 2.408 0.697 3.223z"></path>
 <path fill="#3f2d20" style="fill: var(--color3, #3f2d20)" d="M20.125 21.068c-1.111-0.778-2.576-1.207-4.125-1.207s-3.013 0.429-4.125 1.207c-1.189 0.833-1.844 1.965-1.844 3.188s0.655 2.355 1.844 3.188c1.111 0.778 2.576 1.207 4.125 1.207s3.013-0.429 4.125-1.207c1.189-0.833 1.844-1.965 1.844-3.188s-0.655-2.355-1.844-3.188zM16 27.214c-2.457 0-4.533-1.355-4.533-2.959s2.076-2.959 4.533-2.959c2.457 0 4.533 1.355 4.533 2.959s-2.076 2.959-4.533 2.959z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M23.3 14.331h-0v0z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M5.292 10.633c-0.218 0.701-0.255 1.485-0.229 2.088-0.026-0.602 0.010-1.386 0.229-2.088z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M7.437 8.826v1.431c-1.242 0.287-1.115 2.153-1.2 2.63h1.2v-4.061z"></path>
 <path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.413 21.311c0.061 0.004 0.121 0.010 0.181 0.016-0.060-0.006-0.12-0.012-0.181-0.016z"></path>
 <path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.742 21.342c-2.109 0.245-3.771 1.479-3.771 2.913s1.661 2.669 3.771 2.913c2.119-0.239 3.791-1.475 3.791-2.913s-1.673-2.674-3.791-2.913z"></path>
 <path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.594 27.184c-0.060 0.005-0.12 0.012-0.181 0.016 0.061-0.004 0.12-0.010 0.181-0.016z"></path>
 </symbol>
 <symbol id="icon-transformers" viewBox="0 0 32 32">
 <title>transformers</title>
 <path d="M25.115 5.265l0.045-1.455c-2.694-1.348-5.686-2.155-8.973-2.155s-6.653 0.807-9.347 2.155l0.045 1.455 9.115 5.981 9.115-5.981zM16 4.556c1.875 0 3.448 0.601 3.448 0.601l-3.448 2.317-3.448-2.317c0 0 1.573-0.601 3.448-0.601zM18.073 23.977v-7.020l0.468-6.035-2.541 1.671-2.479-1.671 0.53 6.035v7.020h4.022zM12.39 10.276l-6.789-4.526-0.045-1.761h-3.996l0.593 8.55 4.85 3.466h5.927l-0.54-5.729zM4.685 10.653l6.412 3.018 0.107 0.989-6.357-2.875-0.162-1.132zM4.415 7.582l6.358 3.071 0.161 1.069-6.411-2.955-0.108-1.185zM4.308 26.549l4.735 2.424v-9.412l-2.796-1.74v-1.078l-2.748-1.886 0.809 11.692zM13.054 24.992v-7.012l-3.071 1.562v10.186l1.384 0.861 1.886-4.598h5.496l1.886 4.598 1.446-0.861v-10.185l-3.071-1.562v7.012h-5.956zM14.168 27.070l-1.401 3.932h6.466l-1.4-3.932h-3.665zM19.071 16.004h5.927l4.85-3.466 0.593-8.55h-3.996l-0.046 1.762-6.79 4.526-0.538 5.728zM27.153 11.785l-6.421 3 0.171-1.114 6.412-3.018-0.162 1.132zM27.477 8.767l-6.412 3.018 0.162-1.132 6.358-3.071-0.108 1.185zM28.5 14.856l-2.747 1.886v1.078l-2.755 1.74v9.412l4.694-2.424 0.808-11.692z"></path>
 </symbol>
 <symbol id="icon-spaceinvaders" viewBox="0 0 33 32">
 <title>spaceinvaders</title>
 <path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
 </symbol>
 <symbol id="icon-paperplane" viewBox="0 0 32 32">
 <title>paperplane</title>
 <path d="M3.363 4.414l4.875 19.348 9.467-3.018-8.448-10.298 10.902 9.56 8.853-2.77-25.649-12.822zM18.004 27.586v-5.324l-3.116 0.926 3.116 4.398z"></path>
 </symbol>
 <symbol id="icon-checked" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </symbol>
 <symbol id="icon-minus" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </symbol>
 <symbol id="icon-shipping" viewBox="0 0 32 32">
 <title>shipping</title>
 <path d="M16.722 21.863c-0.456-0.432-0.988-0.764-1.569-0.971l-1.218-4.743 14.506-4.058 1.554 6.056-13.273 3.716zM12.104 9.019l9.671-2.705 1.555 6.058-9.67 2.705-1.556-6.058zM12.538 20.801c-0.27 0.076-0.521 0.184-0.765 0.303l-4.264-16.615h-1.604c-0.161 0.351-0.498 0.598-0.896 0.598h-2.002c-0.553 0-1.001-0.469-1.001-1.046s0.448-1.045 1.001-1.045h2.002c0.336 0 0.618 0.184 0.8 0.447h3.080v0.051l0.046-0.014 4.41 17.183c-0.269 0.025-0.538 0.064-0.807 0.138zM12.797 21.811c1.869-0.523 3.79 0.635 4.291 2.588 0.501 1.951-0.608 3.957-2.478 4.48-1.869 0.521-3.79-0.637-4.291-2.588s0.609-3.957 2.478-4.48zM12.27 25.814c0.214 0.836 1.038 1.332 1.839 1.107s1.276-1.084 1.062-1.92c-0.214-0.836-1.038-1.332-1.839-1.109-0.802 0.225-1.277 1.085-1.062 1.922zM29.87 21.701l-11.684 3.268c-0.021-0.279-0.060-0.561-0.132-0.842-0.071-0.281-0.174-0.545-0.289-0.799l11.623-3.25 0.482 1.623z"></path>
 </symbol>
 <symbol id="icon-ruler" viewBox="0 0 32 32">
 <title>ruler</title>
 <path d="M6.058 6.835l0.686 0.686-2.808 2.808 2.188 2.188 2.821-2.821 0.641 0.641-2.821 2.822 2.16 2.159 6.416-6.416-7.812-7.766-6.393 6.393 2.114 2.115 2.808-2.809zM23.099 16.659l-6.416 6.417 2.159 2.159 2.822-2.821 0.641 0.641-2.821 2.821 2.188 2.188 2.807-2.808 0.686 0.686-2.807 2.808 2.113 2.114 6.394-6.394-7.766-7.811zM29.822 8.451c0.781-0.782 0.787-2.045 0.012-2.821l-3.512-3.511c-0.775-0.775-2.039-0.771-2.82 0.012l-2.17 2.17 6.32 6.32 2.17-2.17zM3.398 25.942l2.623 2.623 5.284-1.877-6.030-6.030-1.877 5.284zM20.65 4.943l-14.885 14.886 6.369 6.369 14.886-14.886-6.37-6.369zM8.657 19.816l11.981-11.981 0.698 0.698-11.982 11.982-0.697-0.699zM10.053 21.213l11.98-11.981 0.698 0.698-11.981 11.98-0.697-0.697zM11.449 22.608l11.981-11.981 0.697 0.698-11.98 11.981-0.698-0.698zM1.954 30.010l3.066-1.117-1.949-1.949-1.117 3.066z"></path>
 </symbol>
 </defs>
 </svg>

 <header class="bgc1 clearfix">
 <div class="mhl">
    <p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
 </div>
 </header>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
        <div class="glyph fs1">
            <div class="clearfix pbs">
                <svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg><span class="name"> icon-logo</span>
            </div>
        </div>
  </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-transformers"><use xlink:href="#icon-transformers"></use></svg><span class="name"> icon-transformers</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-spaceinvaders"><use xlink:href="#icon-spaceinvaders"></use></svg><span class="name"> icon-spaceinvaders</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-paperplane"><use xlink:href="#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-checked"><use xlink:href="#icon-checked"></use></svg><span class="name"> icon-checked</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg><span class="name"> icon-minus</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-shipping"><use xlink:href="#icon-shipping"></use></svg><span class="name"> icon-shipping</span>
            </div>
        </div>
        <div class="glyph fs2">
            <div class="clearfix pbs">
                <svg class="icon icon-ruler"><use xlink:href="#icon-ruler"></use></svg><span class="name"> icon-ruler</span>
            </div>
        </div>
  </div>
 <script defer src="svgxuse.js"></script>
 </body>
 </html>
--- a/assets/iconmoon/selection.json
+++ b/assets/iconmoon/selection.json
@ -1,402 +0,0 @@
 {
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        "paths": [
          "M170.131 458.224h-0.138l16.756 81.621z",
          "M723.952 507.121c-38.922 48.897-120.336 88.415-211.951 88.415-105.019 0-214.771-97.583-209.035-88.415h-87.028l95.789 467.579h436.501l96.517-467.579h-120.794zM643.996 878.192c-35.563 24.898-82.444 38.61-131.995 38.61-49.554 0-96.431-13.713-131.995-38.61-38.054-26.643-59.013-62.869-59.013-102.009s20.959-75.366 59.013-102.009c35.563-24.898 82.444-38.61 131.995-38.61s96.431 13.713 131.995 38.61c38.057 26.643 59.013 62.869 59.013 102.009s-20.955 75.366-59.013 102.009z",
          "M277.714 412.383h15.265c14.47 0 27.065 10.412 27.065 23.101 0 14.645 0.455 29.091 18.792 42.333v-294.639h-61.121v229.205z",
          "M641.386 45.945v39.439h-55.009v452.439c24.449-5.458 39.729-13.004 55.009-22.074v-469.803z",
          "M742.237 147.098v42.192h-61.121v288.53c6.112-13.239 17.031-27.691 17.031-42.336 0-12.689 11.008-23.101 25.057-23.101h19.033v-265.285h-0z",
          "M543.592 198.369v45.93h-70.29v-45.93 347.842c9.168 0.889 23.917 1.357 35.145 1.357 11.225 0 29.033-0.468 35.145-1.357v-347.842z",
          "M442.742 91.596v42.684h-61.121v381.465c24.449 9.077 45.841 16.619 61.121 22.077v-446.226z",
          "M787.586 282.417v130.222h73.981c1.776-26.068 1.085-73.159-22.312-103.121-12.151-15.558-29.094-24.449-51.669-27.101z",
          "M875.591 281.4c-20.864-26.814-50.48-41.972-88.006-45.132v-112.142c0-12.689-10.287-22.972-22.972-22.972h-78.073v-78.18c0-12.689-10.287-22.972-22.972-22.972h-101.046c-12.689 0-22.972 10.284-22.972 22.972v129.452h-55.098v-83.8c0-12.689-10.287-22.972-22.972-22.972h-101.046c-12.686 0-22.972 10.284-22.972 22.972v26.093h-78.070c-12.686 0-22.972 10.284-22.972 22.972v118.575c-37.525 3.16-67.139 18.318-88.006 45.132-46.122 59.269-29.87 154.225-29.155 158.24 0.018 0.101 115.235 565.972 115.235 565.972 2.179 10.702 11.589 18.391 22.511 18.391h509.997c10.922 0 20.332-7.689 22.511-18.391 0 0 115.217-565.871 115.235-565.972 0.712-4.013 16.967-98.971-29.155-158.237zM275.767 978.055l-105.774-519.471h108.417c17.221 75.167 117.197 134.928 233.591 134.928 116.39 0 216.37-59.761 233.588-134.928h108.42l-105.777 519.471h-472.465zM236.417 282.417v130.222h-74.094c-1.928-28.837 0.324-74.721 22.349-103.023 12.154-15.62 29.127-24.54 51.745-27.199zM282.362 140.662h55.095v337.155c-10.054-13.242-15.72-27.56-15.72-42.204 0-12.689-10.287-22.972-22.972-22.972h-16.405v-271.978zM741.638 412.64h-16.405c-12.689 0-22.972 10.284-22.972 22.972 0 14.645-5.669 28.968-15.723 42.207v-330.722h55.098v265.542zM585.497 45.945h55.098v469.803c-16.231 9.070-34.894 16.616-55.098 22.074v-491.877zM539.549 546.214c-9.064 0.889-18.266 1.357-27.547 1.357-9.284 0-18.486-0.468-27.55-1.357v-347.845h55.098v347.845zM383.405 91.596h55.101v446.226c-20.204-5.458-38.87-13.004-55.101-22.077v-424.149zM861.567 412.64h-73.981v-130.222c22.575 2.65 39.521 11.54 51.672 27.101 23.397 29.962 24.085 77.053 22.309 103.121z",
          "M643.996 674.178c-35.563-24.898-82.441-38.61-131.995-38.61s-96.431 13.713-131.995 38.61c-38.057 26.643-59.016 62.869-59.016 102.009 0 39.136 20.959 75.366 59.016 102.009 35.563 24.898 82.441 38.61 131.995 38.61 49.551 0 96.431-13.713 131.995-38.61 38.057-26.643 59.016-62.869 59.016-102.009-0.003-39.139-20.959-75.366-59.016-102.009zM512.002 870.857c-78.636 0-145.065-43.356-145.065-94.674s66.43-94.674 145.065-94.674c78.633 0 145.062 43.356 145.062 94.674s-66.43 94.674-145.062 94.674z",
          "M745.592 458.585h-0.003v0.012z",
          "M169.34 340.244c-6.992 22.444-8.166 47.528-7.325 66.8-0.84-19.275 0.333-44.359 7.325-66.8z",
          "M237.985 282.417v45.795c-39.729 9.19-35.689 68.89-38.415 84.17h38.415v-129.965h0z",
          "M525.228 681.965c1.95 0.125 3.866 0.327 5.797 0.504-1.931-0.177-3.845-0.382-5.797-0.504z",
          "M535.747 682.952c-67.496 7.83-120.663 47.329-120.663 93.231s53.166 85.402 120.66 93.231c67.793-7.659 121.32-47.186 121.32-93.231-0-46.043-53.527-85.573-121.317-93.231z",
          "M531.007 869.904c-1.922 0.174-3.835 0.376-5.779 0.501 1.947-0.122 3.854-0.327 5.779-0.501z"
        ],
        "attrs": [
          {
            "fill": "rgb(206, 89, 63)"
          },
          {
            "fill": "rgb(206, 89, 63)"
          },
          {
            "fill": "rgb(253, 212, 75)"
          },
          {
            "fill": "rgb(253, 212, 75)"
          },
          {
            "fill": "rgb(253, 212, 75)"
          },
          {
            "fill": "rgb(253, 212, 75)"
          },
          {
            "fill": "rgb(253, 212, 75)"
          },
          {
            "fill": "rgb(206, 89, 63)"
          },
          {
            "fill": "rgb(63, 45, 32)"
          },
          {
            "fill": "rgb(63, 45, 32)"
          },
          {
            "fill": "rgb(206, 89, 63)"
          },
          {
            "fill": "rgb(206, 89, 63)"
          },
          {
            "fill": "rgb(206, 89, 63)"
          },
          {
            "fill": "rgb(239, 136, 41)"
          },
          {
            "fill": "rgb(239, 136, 41)"
          },
          {
            "fill": "rgb(239, 136, 41)"
          }
        ],
        "isMulticolor": true,
        "isMulticolor2": false,
        "grid": 0,
        "tags": [
          "french-fries-svgrepo-com"
        ],
        "colorPermutations": {
          "206896312391364112532127516345321": [
            {
              "f": 1
            },
            {
              "f": 1
            },
            {
              "f": 3
            },
            {
              "f": 3
            },
            {
              "f": 3
            },
            {
              "f": 3
            },
            {
              "f": 3
            },
            {
              "f": 1
            },
            {
              "f": 0
            },
            {
              "f": 0
            },
            {
              "f": 1
            },
            {
              "f": 1
            },
            {
              "f": 1
            },
            {
              "f": 2
            },
            {
              "f": 2
            },
            {
              "f": 2
            }
          ]
        }
      },
      "attrs": [
        {
          "fill": "rgb(206, 89, 63)"
        },
        {
          "fill": "rgb(206, 89, 63)"
        },
        {
          "fill": "rgb(253, 212, 75)"
        },
        {
          "fill": "rgb(253, 212, 75)"
        },
        {
          "fill": "rgb(253, 212, 75)"
        },
        {
          "fill": "rgb(253, 212, 75)"
        },
        {
          "fill": "rgb(253, 212, 75)"
        },
        {
          "fill": "rgb(206, 89, 63)"
        },
        {
          "fill": "rgb(63, 45, 32)"
        },
        {
          "fill": "rgb(63, 45, 32)"
        },
        {
          "fill": "rgb(206, 89, 63)"
        },
        {
          "fill": "rgb(206, 89, 63)"
        },
        {
          "fill": "rgb(206, 89, 63)"
        },
        {
          "fill": "rgb(239, 136, 41)"
        },
        {
          "fill": "rgb(239, 136, 41)"
        },
        {
          "fill": "rgb(239, 136, 41)"
        }
      ],
      "properties": {
        "order": 6,
        "id": 0,
        "name": "logo",
        "prevSize": 32
      },
      "setIdx": 0,
      "setId": 1,
      "iconIdx": 0
    },
    {
      "icon": {
        "paths": [
          "M803.68 168.48l1.44-46.56c-86.208-43.136-181.952-68.96-287.136-68.96s-212.896 25.824-299.104 68.96l1.44 46.56 291.68 191.392 291.68-191.392zM512 145.792c60 0 110.336 19.232 110.336 19.232l-110.336 74.144-110.336-74.144c0 0 50.336-19.232 110.336-19.232zM578.336 767.264v-224.64l14.976-193.12-81.312 53.472-79.328-53.472 16.96 193.12v224.64h128.704zM396.48 328.832l-217.248-144.832-1.44-56.352h-127.872l18.976 273.6 155.2 110.912h189.664l-17.28-183.328zM149.92 340.896l205.184 96.576 3.424 31.648-203.424-92-5.184-36.224zM141.28 242.624l203.456 98.272 5.152 34.208-205.152-94.56-3.456-37.92zM137.856 849.568l151.52 77.568v-301.184l-89.472-55.68v-34.496l-87.936-60.352 25.888 374.144zM417.728 799.744v-224.384l-98.272 49.984v325.952l44.288 27.552 60.352-147.136h175.872l60.352 147.136 46.272-27.552-0-325.92-98.272-49.984v224.384l-190.592 0zM453.376 866.24l-44.832 125.824h206.912l-44.8-125.824h-117.28zM610.272 512.128h189.664l155.2-110.912 18.976-273.6h-127.872l-1.472 56.384-217.28 144.832-17.216 183.296zM868.896 377.12l-205.472 96 5.472-35.648 205.184-96.576-5.184 36.224zM879.264 280.544l-205.184 96.576 5.184-36.224 203.456-98.272-3.456 37.92zM912 475.392l-87.904 60.352v34.496l-88.16 55.68v301.184l150.208-77.568 25.856-374.144z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "transformers"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 165,
        "order": 11,
        "prevSize": 32,
        "name": "transformers"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 164
    },
    {
      "icon": {
        "paths": [
          "M958.816 799.424v-190.304h-93.12v191.008h-97.184v94.496h-225.536v-95.2h225.536l-0-95.104h-479.712v95.136l192.96 0.672v95.136h-193.632v-94.432h-97.152v-192.32h-93.152v190.304h-97.824v-288.128h95.84v-92.512h95.136v-97.824h97.824v-95.808h95.808v96.096l287.456 0.768-0-96.864h95.808v97.152h97.824v95.168h94.496l0 95.136h96.448v287.424h-97.824zM384.608 416.16h-95.808v95.84h95.808v-95.84zM767.872 416.16h-95.808v95.84h95.808v-95.84zM190.976 128.736h97.824v95.808h-97.824v-95.808zM865.696 128.736v95.808h-97.824l-0-95.808h97.824z"
        ],
        "width": 1056,
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "space invaders"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 167,
        "order": 13,
        "prevSize": 32,
        "name": "spaceinvaders"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 166
    },
    {
      "icon": {
        "paths": [
          "M107.616 141.248l156 619.136 302.944-96.576-270.336-329.536 348.864 305.92 283.296-88.64-820.768-410.304zM576.128 882.752v-170.368l-99.712 29.632 99.712 140.736z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "paper plane",
          "travel",
          "plane"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 299,
        "order": 7,
        "prevSize": 32,
        "name": "paperplane"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 298
    },
    {
      "icon": {
        "paths": [
          "M848 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h80v-80c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 672c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 480c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 288c-8.832 0-16-7.168-16-16v-80h-80c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM469.312 673.696c-5.888 5.92-15.456 5.92-21.376 0l-32.064-32.064c-0.064-0.096-0.032-0.224-0.096-0.288l-102.016-102.784c-5.92-5.888-5.92-15.456 0-21.376l32.064-32.096c5.92-5.92 15.488-5.92 21.408 0l91.52 92.192 192.448-192.416c5.888-5.92 15.456-5.92 21.376 0l32.064 32.096c5.952 5.92 5.952 15.488 0 21.408l-235.328 235.328zM656 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM464 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM272 864h-96c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16s16 7.168 16 16v80h80c8.832 0 16 7.168 16 16s-7.168 16-16 16zM272 192h-80v80c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16h96c8.832 0 16 7.168 16 16s-7.168 16-16 16zM176 352c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM176 544c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM368 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16zM560 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "checked",
          "checkmark",
          "tick",
          "checkbox"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 323,
        "order": 2,
        "prevSize": 32,
        "name": "checked"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 322
    },
    {
      "icon": {
        "paths": [
          "M272 160h-96c-8.832 0-16 7.168-16 16v96c0 8.832 7.168 16 16 16s16-7.168 16-16v-80h80c8.832 0 16-7.168 16-16s-7.168-16-16-16zM368 192h96c8.8 0 16-7.168 16-16s-7.2-16-16-16h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16zM656 160h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16s-7.2-16-16-16zM848 160h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h80v80c0 8.832 7.168 16 16 16 8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM848 352c-8.832 0-16 7.168-16 16v96c0 8.832 7.168 16 16 16 8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM848 544c-8.832 0-16 7.168-16 16v96c0 8.832 7.168 16 16 16 8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM848 736c-8.832 0-16 7.168-16 16v80h-80c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16v-96c0-8.832-7.2-16-16-16zM656 832h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16s-7.2-16-16-16zM464 832h-96c-8.832 0-16 7.168-16 16s7.168 16 16 16h96c8.8 0 16-7.168 16-16s-7.2-16-16-16zM272 832h-80v-80c0-8.832-7.168-16-16-16s-16 7.168-16 16v96c0 8.832 7.168 16 16 16h96c8.832 0 16-7.168 16-16s-7.168-16-16-16zM176 672c8.832 0 16-7.168 16-16v-96c0-8.832-7.168-16-16-16s-16 7.168-16 16v96c0 8.832 7.168 16 16 16zM176 480c8.832 0 16-7.168 16-16v-96c0-8.832-7.168-16-16-16s-16 7.168-16 16v96c0 8.832 7.168 16 16 16zM382.016 544h256c17.696 0 32-14.336 32-32 0-17.696-14.304-32-32-32h-256c-17.696 0-32 14.304-32 32-0 17.664 14.304 32 32 32z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "minus",
          "remove",
          "delete"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 326,
        "order": 5,
        "prevSize": 32,
        "name": "minus"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 325
    },
    {
      "icon": {
        "paths": [
          "M535.104 699.616c-14.592-13.824-31.616-24.448-50.208-31.072l-38.976-151.776 464.192-129.856 49.728 193.792-424.736 118.912zM387.328 288.608l309.472-86.56 49.76 193.856-309.44 86.56-49.792-193.856zM401.216 665.632c-8.64 2.432-16.672 5.888-24.48 9.696l-136.448-531.68h-51.328c-5.152 11.232-15.936 19.136-28.672 19.136h-64.064c-17.696 0-32.032-15.008-32.032-33.472s14.336-33.44 32.032-33.44h64.064c10.752 0 19.776 5.888 25.6 14.304h98.56v1.632l1.472-0.448 141.12 549.856c-8.608 0.8-17.216 2.048-25.824 4.416zM409.504 697.952c59.808-16.736 121.28 20.32 137.312 82.816 16.032 62.432-19.456 126.624-79.296 143.36-59.808 16.672-121.28-20.384-137.312-82.816s19.488-126.624 79.296-143.36zM392.64 826.048c6.848 26.752 33.216 42.624 58.848 35.424s40.832-34.688 33.984-61.44c-6.848-26.752-33.216-42.624-58.848-35.488-25.664 7.2-40.864 34.72-33.984 61.504zM955.84 694.432l-373.888 104.576c-0.672-8.928-1.92-17.952-4.224-26.944-2.272-8.992-5.568-17.44-9.248-25.568l371.936-104 15.424 51.936z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "shipping"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 333,
        "order": 9,
        "prevSize": 32,
        "name": "shipping"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 332
    },
    {
      "icon": {
        "paths": [
          "M193.856 218.72l21.952 21.952-89.856 89.856 70.016 70.016 90.272-90.272 20.512 20.512-90.272 90.304 69.12 69.088 205.312-205.312-249.984-248.512-204.576 204.576 67.648 67.68 89.856-89.888zM739.168 533.088l-205.312 205.344 69.088 69.088 90.304-90.272 20.512 20.512-90.272 90.272 70.016 70.016 89.824-89.856 21.952 21.952-89.824 89.856 67.616 67.648 204.608-204.608-248.512-249.952zM954.304 270.432c24.992-25.024 25.184-65.44 0.384-90.272l-112.384-112.352c-24.8-24.8-65.248-24.672-90.24 0.384l-69.44 69.44 202.24 202.24 69.44-69.44zM108.736 830.144l83.936 83.936 169.088-60.064-192.96-192.96-60.064 169.088zM660.8 158.176l-476.32 476.352 203.808 203.808 476.352-476.352-203.84-203.808zM277.024 634.112l383.392-383.392 22.336 22.336-383.424 383.424-22.304-22.368zM321.696 678.816l383.36-383.392 22.336 22.336-383.392 383.36-22.304-22.304zM366.368 723.456l383.392-383.392 22.304 22.336-383.36 383.392-22.336-22.336zM62.528 960.32l98.112-35.744-62.368-62.368-35.744 98.112z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "ruler",
          "pencil",
          "design"
        ],
        "grid": 32
      },
      "attrs": [],
      "properties": {
        "id": 350,
        "order": 12,
        "prevSize": 32,
        "name": "ruler"
      },
      "setIdx": 1,
      "setId": 0,
      "iconIdx": 349
    }
  ],
  "height": 1024,
  "preferences": {
    "showGlyphs": true,
    "showCodes": true,
    "showQuickUse": true,
    "showQuickUse2": true,
    "showSVGs": true,
    "fontPref": {
      "prefix": "icon-",
      "metadata": {},
      "metrics": {
        "emSize": 1024,
        "baseline": 6.25,
        "whitespace": 50
      }
    },
    "imagePref": {
      "prefix": "icon-",
      "png": true,
      "useClassSelector": true,
      "color": 0,
      "bgColor": 16777215,
      "name": "icomoon",
      "classSelector": ".icon",
      "height": 32
    },
    "historySize": 50,
    "gridSize": 16,
    "showGrid": false
  }
 }
--- a/assets/iconmoon/style.css
+++ b/assets/iconmoon/style.css
@ -1,20 +0,0 @@
 .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
 }

 /* ==========================================
 Single-colored icons can be modified like so:
 .icon-name {
  font-size: 32px;
  color: red;
 }
 ========================================== */

 .icon-spaceinvaders {
  width: 1.03125em;
 }
--- a/assets/iconmoon/svgxuse.js
+++ b/assets/iconmoon/svgxuse.js
@ -1,230 +0,0 @@
 /*!
 * @copyright Copyright (c) 2017 IcoMoon.io
 * @license   Licensed under MIT license
 *            See https://github.com/Keyamoon/svgxuse
 * @version   1.2.6
 */
 /*jslint browser: true */
 /*global XDomainRequest, MutationObserver, window */
 (function () {
    "use strict";
    if (typeof window !== "undefined" && window.addEventListener) {
        var cache = Object.create(null); // holds xhr objects to prevent multiple requests
        var checkUseElems;
        var tid; // timeout id
        var debouncedCheck = function () {
            clearTimeout(tid);
            tid = setTimeout(checkUseElems, 100);
        };
        var unobserveChanges = function () {
            return;
        };
        var observeChanges = function () {
            var observer;
            window.addEventListener("resize", debouncedCheck, false);
            window.addEventListener("orientationchange", debouncedCheck, false);
            if (window.MutationObserver) {
                observer = new MutationObserver(debouncedCheck);
                observer.observe(document.documentElement, {
                    childList: true,
                    subtree: true,
                    attributes: true
                });
                unobserveChanges = function () {
                    try {
                        observer.disconnect();
                        window.removeEventListener("resize", debouncedCheck, false);
                        window.removeEventListener("orientationchange", debouncedCheck, false);
                    } catch (ignore) {}
                };
            } else {
                document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
                unobserveChanges = function () {
                    document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
                    window.removeEventListener("resize", debouncedCheck, false);
                    window.removeEventListener("orientationchange", debouncedCheck, false);
                };
            }
        };
        var createRequest = function (url) {
            // In IE 9, cross origin requests can only be sent using XDomainRequest.
            // XDomainRequest would fail if CORS headers are not set.
            // Therefore, XDomainRequest should only be used with cross origin requests.
            function getOrigin(loc) {
                var a;
                if (loc.protocol !== undefined) {
                    a = loc;
                } else {
                    a = document.createElement("a");
                    a.href = loc;
                }
                return a.protocol.replace(/:/g, "") + a.host;
            }
            var Request;
            var origin;
            var origin2;
            if (window.XMLHttpRequest) {
                Request = new XMLHttpRequest();
                origin = getOrigin(location);
                origin2 = getOrigin(url);
                if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
                    Request = XDomainRequest || undefined;
                } else {
                    Request = XMLHttpRequest;
                }
            }
            return Request;
        };
        var xlinkNS = "http://www.w3.org/1999/xlink";
        checkUseElems = function () {
            var base;
            var bcr;
            var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
            var hash;
            var href;
            var i;
            var inProgressCount = 0;
            var isHidden;
            var Request;
            var url;
            var uses;
            var xhr;
            function observeIfDone() {
                // If done with making changes, start watching for chagnes in DOM again
                inProgressCount -= 1;
                if (inProgressCount === 0) { // if all xhrs were resolved
                    unobserveChanges(); // make sure to remove old handlers
                    observeChanges(); // watch for changes to DOM
                }
            }
            function attrUpdateFunc(spec) {
                return function () {
                    if (cache[spec.base] !== true) {
                        spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
                        if (spec.useEl.hasAttribute("href")) {
                            spec.useEl.setAttribute("href", "#" + spec.hash);
                        }
                    }
                };
            }
            function onloadFunc(xhr) {
                return function () {
                    var body = document.body;
                    var x = document.createElement("x");
                    var svg;
                    xhr.onload = null;
                    x.innerHTML = xhr.responseText;
                    svg = x.getElementsByTagName("svg")[0];
                    if (svg) {
                        svg.setAttribute("aria-hidden", "true");
                        svg.style.position = "absolute";
                        svg.style.width = 0;
                        svg.style.height = 0;
                        svg.style.overflow = "hidden";
                        body.insertBefore(svg, body.firstChild);
                    }
                    observeIfDone();
                };
            }
            function onErrorTimeout(xhr) {
                return function () {
                    xhr.onerror = null;
                    xhr.ontimeout = null;
                    observeIfDone();
                };
            }
            unobserveChanges(); // stop watching for changes to DOM
            // find all use elements
            uses = document.getElementsByTagName("use");
            for (i = 0; i < uses.length; i += 1) {
                try {
                    bcr = uses[i].getBoundingClientRect();
                } catch (ignore) {
                    // failed to get bounding rectangle of the use element
                    bcr = false;
                }
                href = uses[i].getAttribute("href")
                        || uses[i].getAttributeNS(xlinkNS, "href")
                        || uses[i].getAttribute("xlink:href");
                if (href && href.split) {
                    url = href.split("#");
                } else {
                    url = ["", ""];
                }
                base = url[0];
                hash = url[1];
                isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
                if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
                    // the use element is empty
                    // if there is a reference to an external SVG, try to fetch it
                    // use the optional fallback URL if there is no reference to an external SVG
                    if (fallback && !base.length && hash && !document.getElementById(hash)) {
                        base = fallback;
                    }
                    if (uses[i].hasAttribute("href")) {
                        uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
                    }
                    if (base.length) {
                        // schedule updating xlink:href
                        xhr = cache[base];
                        if (xhr !== true) {
                            // true signifies that prepending the SVG was not required
                            setTimeout(attrUpdateFunc({
                                useEl: uses[i],
                                base: base,
                                hash: hash
                            }), 0);
                        }
                        if (xhr === undefined) {
                            Request = createRequest(base);
                            if (Request !== undefined) {
                                xhr = new Request();
                                cache[base] = xhr;
                                xhr.onload = onloadFunc(xhr);
                                xhr.onerror = onErrorTimeout(xhr);
                                xhr.ontimeout = onErrorTimeout(xhr);
                                xhr.open("GET", base);
                                xhr.send();
                                inProgressCount += 1;
                            }
                        }
                    }
                } else {
                    if (!isHidden) {
                        if (cache[base] === undefined) {
                            // remember this URL if the use element was not empty and no request was sent
                            cache[base] = true;
                        } else if (cache[base].onload) {
                            // if it turns out that prepending the SVG is not necessary,
                            // abort the in-progress xhr.
                            cache[base].abort();
                            delete cache[base].onload;
                            cache[base] = true;
                        }
                    } else if (base.length && cache[base]) {
                        setTimeout(attrUpdateFunc({
                            useEl: uses[i],
                            base: base,
                            hash: hash
                        }), 0);
                    }
                }
            }
            uses = "";
            inProgressCount += 1;
            observeIfDone();
        };
        var winLoad;
        winLoad = function () {
            window.removeEventListener("load", winLoad, false); // to prevent memory leaks
            tid = setTimeout(checkUseElems, 0);
        };
        if (document.readyState !== "complete") {
            // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
            window.addEventListener("load", winLoad, false);
        } else {
            // No need to add a listener if the document is already loaded, initialize immediately.
            winLoad();
        }
    }
 }());
--- a/assets/iconmoon/symbol-defs.svg
+++ b/assets/iconmoon/symbol-defs.svg
@ -1,51 +0,0 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 <symbol id="icon-logo" viewBox="0 0 32 32">
 <title>logo</title>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M5.317 14.319h-0.004l0.524 2.551z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M22.623 15.848c-1.216 1.528-3.761 2.763-6.623 2.763-3.282 0-6.712-3.049-6.532-2.763h-2.72l2.993 14.612h13.641l3.016-14.612h-3.775zM20.125 27.444c-1.111 0.778-2.576 1.207-4.125 1.207s-3.013-0.429-4.125-1.207c-1.189-0.833-1.844-1.965-1.844-3.188s0.655-2.355 1.844-3.188c1.111-0.778 2.576-1.207 4.125-1.207s3.013 0.429 4.125 1.207c1.189 0.833 1.844 1.965 1.844 3.188s-0.655 2.355-1.844 3.188z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M8.679 12.887h0.477c0.452 0 0.846 0.325 0.846 0.722 0 0.458 0.014 0.909 0.587 1.323v-9.207h-1.91v7.163z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M20.043 1.436v1.232h-1.719v14.139c0.764-0.171 1.242-0.406 1.719-0.69v-14.681z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M23.195 4.597v1.319h-1.91v9.017c0.191-0.414 0.532-0.865 0.532-1.323 0-0.397 0.344-0.722 0.783-0.722h0.595v-8.29z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M16.987 6.199v1.435h-2.197v-1.435 10.87c0.287 0.028 0.747 0.042 1.098 0.042s0.907-0.015 1.098-0.042v-10.87z"></path>
 <path fill="#fdd44b" style="fill: var(--color2, #fdd44b)" d="M13.836 2.862v1.334h-1.91v11.921c0.764 0.284 1.433 0.519 1.91 0.69v-13.945z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M24.612 8.826v4.069h2.312c0.055-0.815 0.034-2.286-0.697-3.223-0.38-0.486-0.909-0.764-1.615-0.847z"></path>
 <path fill="#3f2d20" style="fill: var(--color3, #3f2d20)" d="M27.362 8.794c-0.652-0.838-1.578-1.312-2.75-1.41v-3.504c0-0.397-0.321-0.718-0.718-0.718h-2.44v-2.443c0-0.397-0.321-0.718-0.718-0.718h-3.158c-0.397 0-0.718 0.321-0.718 0.718v4.045h-1.722v-2.619c0-0.397-0.321-0.718-0.718-0.718h-3.158c-0.396 0-0.718 0.321-0.718 0.718v0.815h-2.44c-0.396 0-0.718 0.321-0.718 0.718v3.705c-1.173 0.099-2.098 0.572-2.75 1.41-1.441 1.852-0.933 4.82-0.911 4.945 0.001 0.003 3.601 17.687 3.601 17.687 0.068 0.334 0.362 0.575 0.703 0.575h15.937c0.341 0 0.635-0.24 0.703-0.575 0 0 3.601-17.683 3.601-17.687 0.022-0.125 0.53-3.093-0.911-4.945zM8.618 30.564l-3.305-16.233h3.388c0.538 2.349 3.662 4.216 7.3 4.216s6.762-1.868 7.3-4.216h3.388l-3.306 16.233h-14.765zM7.388 8.826v4.069h-2.315c-0.060-0.901 0.010-2.335 0.698-3.219 0.38-0.488 0.91-0.767 1.617-0.85zM8.824 4.396h1.722v10.536c-0.314-0.414-0.491-0.861-0.491-1.319 0-0.397-0.321-0.718-0.718-0.718h-0.513v-8.499zM23.176 12.895h-0.513c-0.397 0-0.718 0.321-0.718 0.718 0 0.458-0.177 0.905-0.491 1.319v-10.335h1.722v8.298zM18.297 1.436h1.722v14.681c-0.507 0.283-1.090 0.519-1.722 0.69v-15.371zM16.861 17.069c-0.283 0.028-0.571 0.042-0.861 0.042s-0.578-0.015-0.861-0.042v-10.87h1.722v10.87zM11.981 2.862h1.722v13.945c-0.631-0.171-1.215-0.406-1.722-0.69v-13.255zM26.924 12.895h-2.312v-4.069c0.705 0.083 1.235 0.361 1.615 0.847 0.731 0.936 0.753 2.408 0.697 3.223z"></path>
 <path fill="#3f2d20" style="fill: var(--color3, #3f2d20)" d="M20.125 21.068c-1.111-0.778-2.576-1.207-4.125-1.207s-3.013 0.429-4.125 1.207c-1.189 0.833-1.844 1.965-1.844 3.188s0.655 2.355 1.844 3.188c1.111 0.778 2.576 1.207 4.125 1.207s3.013-0.429 4.125-1.207c1.189-0.833 1.844-1.965 1.844-3.188s-0.655-2.355-1.844-3.188zM16 27.214c-2.457 0-4.533-1.355-4.533-2.959s2.076-2.959 4.533-2.959c2.457 0 4.533 1.355 4.533 2.959s-2.076 2.959-4.533 2.959z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M23.3 14.331h-0v0z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M5.292 10.633c-0.218 0.701-0.255 1.485-0.229 2.088-0.026-0.602 0.010-1.386 0.229-2.088z"></path>
 <path fill="#ce593f" style="fill: var(--color1, #ce593f)" d="M7.437 8.826v1.431c-1.242 0.287-1.115 2.153-1.2 2.63h1.2v-4.061z"></path>
 <path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.413 21.311c0.061 0.004 0.121 0.010 0.181 0.016-0.060-0.006-0.12-0.012-0.181-0.016z"></path>
 <path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.742 21.342c-2.109 0.245-3.771 1.479-3.771 2.913s1.661 2.669 3.771 2.913c2.119-0.239 3.791-1.475 3.791-2.913s-1.673-2.674-3.791-2.913z"></path>
 <path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.594 27.184c-0.060 0.005-0.12 0.012-0.181 0.016 0.061-0.004 0.12-0.010 0.181-0.016z"></path>
 </symbol>
 <symbol id="icon-transformers" viewBox="0 0 32 32">
 <title>transformers</title>
 <path d="M25.115 5.265l0.045-1.455c-2.694-1.348-5.686-2.155-8.973-2.155s-6.653 0.807-9.347 2.155l0.045 1.455 9.115 5.981 9.115-5.981zM16 4.556c1.875 0 3.448 0.601 3.448 0.601l-3.448 2.317-3.448-2.317c0 0 1.573-0.601 3.448-0.601zM18.073 23.977v-7.020l0.468-6.035-2.541 1.671-2.479-1.671 0.53 6.035v7.020h4.022zM12.39 10.276l-6.789-4.526-0.045-1.761h-3.996l0.593 8.55 4.85 3.466h5.927l-0.54-5.729zM4.685 10.653l6.412 3.018 0.107 0.989-6.357-2.875-0.162-1.132zM4.415 7.582l6.358 3.071 0.161 1.069-6.411-2.955-0.108-1.185zM4.308 26.549l4.735 2.424v-9.412l-2.796-1.74v-1.078l-2.748-1.886 0.809 11.692zM13.054 24.992v-7.012l-3.071 1.562v10.186l1.384 0.861 1.886-4.598h5.496l1.886 4.598 1.446-0.861v-10.185l-3.071-1.562v7.012h-5.956zM14.168 27.070l-1.401 3.932h6.466l-1.4-3.932h-3.665zM19.071 16.004h5.927l4.85-3.466 0.593-8.55h-3.996l-0.046 1.762-6.79 4.526-0.538 5.728zM27.153 11.785l-6.421 3 0.171-1.114 6.412-3.018-0.162 1.132zM27.477 8.767l-6.412 3.018 0.162-1.132 6.358-3.071-0.108 1.185zM28.5 14.856l-2.747 1.886v1.078l-2.755 1.74v9.412l4.694-2.424 0.808-11.692z"></path>
 </symbol>
 <symbol id="icon-spaceinvaders" viewBox="0 0 33 32">
 <title>spaceinvaders</title>
 <path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
 </symbol>
 <symbol id="icon-paperplane" viewBox="0 0 32 32">
 <title>paperplane</title>
 <path d="M3.363 4.414l4.875 19.348 9.467-3.018-8.448-10.298 10.902 9.56 8.853-2.77-25.649-12.822zM18.004 27.586v-5.324l-3.116 0.926 3.116 4.398z"></path>
 </symbol>
 <symbol id="icon-checked" viewBox="0 0 32 32">
 <title>checked</title>
 <path d="M26.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.5v-2.5c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 21c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 15c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5 0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM26.5 9c-0.276 0-0.5-0.224-0.5-0.5v-2.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5v3c0 0.276-0.225 0.5-0.5 0.5zM14.666 21.053c-0.184 0.185-0.483 0.185-0.668 0l-1.002-1.002c-0.002-0.003-0.001-0.007-0.003-0.009l-3.188-3.212c-0.185-0.184-0.185-0.483 0-0.668l1.002-1.003c0.185-0.185 0.484-0.185 0.669 0l2.86 2.881 6.014-6.013c0.184-0.185 0.483-0.185 0.668 0l1.002 1.003c0.186 0.185 0.186 0.484 0 0.669l-7.354 7.354zM20.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM14.5 6h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5zM8.5 27h-3c-0.276 0-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2.5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM8.5 6h-2.5v2.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM5.5 11c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM5.5 17c0.276 0 0.5 0.224 0.5 0.5v3c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3c0-0.276 0.224-0.5 0.5-0.5zM11.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5zM17.5 26h3c0.275 0 0.5 0.224 0.5 0.5s-0.225 0.5-0.5 0.5h-3c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5z"></path>
 </symbol>
 <symbol id="icon-minus" viewBox="0 0 32 32">
 <title>minus</title>
 <path d="M8.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.5 6h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5zM20.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM26.5 5h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 11c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 17c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5 0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM26.5 23c-0.276 0-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.225-0.5-0.5-0.5zM20.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM14.5 26h-3c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM8.5 26h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM5.5 21c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM5.5 15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5zM11.938 17h8c0.553 0 1-0.448 1-1 0-0.553-0.447-1-1-1h-8c-0.553 0-1 0.447-1 1 0 0.552 0.447 1 1 1z"></path>
 </symbol>
 <symbol id="icon-shipping" viewBox="0 0 32 32">
 <title>shipping</title>
 <path d="M16.722 21.863c-0.456-0.432-0.988-0.764-1.569-0.971l-1.218-4.743 14.506-4.058 1.554 6.056-13.273 3.716zM12.104 9.019l9.671-2.705 1.555 6.058-9.67 2.705-1.556-6.058zM12.538 20.801c-0.27 0.076-0.521 0.184-0.765 0.303l-4.264-16.615h-1.604c-0.161 0.351-0.498 0.598-0.896 0.598h-2.002c-0.553 0-1.001-0.469-1.001-1.046s0.448-1.045 1.001-1.045h2.002c0.336 0 0.618 0.184 0.8 0.447h3.080v0.051l0.046-0.014 4.41 17.183c-0.269 0.025-0.538 0.064-0.807 0.138zM12.797 21.811c1.869-0.523 3.79 0.635 4.291 2.588 0.501 1.951-0.608 3.957-2.478 4.48-1.869 0.521-3.79-0.637-4.291-2.588s0.609-3.957 2.478-4.48zM12.27 25.814c0.214 0.836 1.038 1.332 1.839 1.107s1.276-1.084 1.062-1.92c-0.214-0.836-1.038-1.332-1.839-1.109-0.802 0.225-1.277 1.085-1.062 1.922zM29.87 21.701l-11.684 3.268c-0.021-0.279-0.060-0.561-0.132-0.842-0.071-0.281-0.174-0.545-0.289-0.799l11.623-3.25 0.482 1.623z"></path>
 </symbol>
 <symbol id="icon-ruler" viewBox="0 0 32 32">
 <title>ruler</title>
 <path d="M6.058 6.835l0.686 0.686-2.808 2.808 2.188 2.188 2.821-2.821 0.641 0.641-2.821 2.822 2.16 2.159 6.416-6.416-7.812-7.766-6.393 6.393 2.114 2.115 2.808-2.809zM23.099 16.659l-6.416 6.417 2.159 2.159 2.822-2.821 0.641 0.641-2.821 2.821 2.188 2.188 2.807-2.808 0.686 0.686-2.807 2.808 2.113 2.114 6.394-6.394-7.766-7.811zM29.822 8.451c0.781-0.782 0.787-2.045 0.012-2.821l-3.512-3.511c-0.775-0.775-2.039-0.771-2.82 0.012l-2.17 2.17 6.32 6.32 2.17-2.17zM3.398 25.942l2.623 2.623 5.284-1.877-6.030-6.030-1.877 5.284zM20.65 4.943l-14.885 14.886 6.369 6.369 14.886-14.886-6.37-6.369zM8.657 19.816l11.981-11.981 0.698 0.698-11.982 11.982-0.697-0.699zM10.053 21.213l11.98-11.981 0.698 0.698-11.981 11.98-0.697-0.697zM11.449 22.608l11.981-11.981 0.697 0.698-11.98 11.981-0.698-0.698zM1.954 30.010l3.066-1.117-1.949-1.949-1.117 3.066z"></path>
 </symbol>
 </defs>
 </svg>
--- a/assets/svg/circle-right.svg
+++ b/assets/svg/circle-right.svg
@ -0,0 +1,6 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>circle-right</title>
 <path d="M18 10h-2v-2h-2v-2h-2v4h-6v4h6v4h2v-2h2v-2h2z"></path>
 <path d="M22 8v-4h-2v-2h-4v-2h-8v2h-4v2h-2v4h-2v8h2v4h2v2h4v2h8v-2h4v-2h2v-4h2v-8h-2zM22 14h-2v4h-2v2h-4v2h-4v-2h-4v-2h-2v-4h-2v-4h2v-4h2v-2h4v-2h4v2h4v2h2v4h2v4z"></path>
 </svg>
--- a/assets/svg/design.svg
+++ b/assets/svg/design.svg
@ -0,0 +1,6 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>design</title>
 <path d="M14 0v24h10v-24h-10zM22 22h-4v-2h4v2zM22 18h-2v-2h2v2zM22 14h-4v-2h4v2zM22 10h-2v-2h2v2zM22 6h-4v-2h4v2z"></path>
 <path d="M0 0v20h2v2h2v2h2v-2h2v-2h2v-20h-10zM4 18h-2v-16h2v16z"></path>
 </svg>
--- a/assets/svg/emoticon-zip.svg
+++ b/assets/svg/emoticon-zip.svg
@ -0,0 +1,7 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>emoticon-zip</title>
 <path d="M22 4v-2h-2v-2h-16v2h-2v2h-2v16h2v2h2v2h16v-2h2v-2h2v-16h-2zM22 18h-2v2h-2v2h-12v-2h-2v-2h-2v-12h2v-2h2v-2h12v2h2v2h2v12z"></path>
 <path d="M10 10h-4v-4h4v4zM18 6h-4v4h4v-4z"></path>
 <path d="M18 12v2h-2v-2h-2v2h-2v-2h-2v2h-2v-2h-2v2h-2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h4v-4z"></path>
 </svg>
--- a/assets/svg/flask.svg
+++ b/assets/svg/flask.svg
@ -0,0 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>flask</title>
 <path d="M20 18v-4h-2v-4h-2v-8h2v-2h-12v2h2v8h-2v4h-2v4h-2v6h20v-6h-2zM8 12h2v-10h4v10h2v4h-8v-4z"></path>
 </svg>
--- a/assets/svg/github.svg
+++ b/assets/svg/github.svg
@ -0,0 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>github</title>
 <path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
 </svg>
--- a/assets/iconmoon/SVG/logo.svg
+++ b/assets/iconmoon/SVG/logo.svg
--- a/assets/svg/spray.svg
+++ b/assets/svg/spray.svg
@ -0,0 +1,6 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>spray</title>
 <path d="M10 4h2v2h-2v-2zM12 2h2v2h-2v-2zM12 6h2v2h-2v-2zM14 4h2v2h-2v-2zM16 2h2v2h-2v-2zM18 0h2v2h-2v-2zM16 6h2v2h-2v-2zM18 4h2v2h-2v-2zM18 8h2v2h-2v-2zM20 2h2v2h-2v-2zM22 0h2v2h-2v-2zM20 6h2v2h-2v-2zM22 4h2v2h-2v-2zM22 8h2v2h-2v-2z"></path>
 <path d="M10 10v-2h-2v-4h-4v4h-2v2h-2v14h12v-14h-2zM8 20h-4v-4h4v4z"></path>
 </svg>
--- a/assets/svg/toggle-left.svg
+++ b/assets/svg/toggle-left.svg
@ -0,0 +1,6 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>toggle-left</title>
 <path d="M12 10h-2v-2h-4v2h-2v4h2v2h4v-2h2z"></path>
 <path d="M22 8v-2h-2v-2h-16v2h-2v2h-2v8h2v2h2v2h16v-2h2v-2h2v-8h-2zM22 14h-2v2h-2v2h-12v-2h-2v-2h-2v-4h2v-2h2v-2h12v2h2v2h2v4z"></path>
 </svg>
--- a/assets/svg/toggle-right.svg
+++ b/assets/svg/toggle-right.svg
@ -0,0 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <title>toggle-right</title>
 <path d="M2 16v2h2v2h16v-2h2v-2h2v-8h-2v-2h-2v-2h-16v2h-2v2h-2v8h2zM12 10h2v-2h4v2h2v4h-2v2h-4v-2h-2v-4z"></path>
 </svg>
--- a/dist/crispy-all.css
+++ b/dist/crispy-all.css
--- a/dist/crispy-minimal.css
+++ b/dist/crispy-minimal.css
--- a/dist/example/getstarted.html
+++ b/dist/example/getstarted.html
@ -5,7 +5,7 @@
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<title>Get Started | Crispy CSS</title>
 	<meta name="description" content="Lightweight Framework for building Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers.">
 	<meta name="description" content="Documentation for Crispy CSS, a lightweight CSS Framework for building Apps and Websites">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="styles.css">
 </head>
@ -26,7 +26,12 @@
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="#typography" class="text-color-white margin-left-3">
                                <a href="#installation" class="text-color-white margin-left-3">
                                    Installation
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="#typography" class="text-color-white">
                                    Typography
                                </a>
                            </li>
@ -36,13 +41,18 @@
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="#components" class="text-color-white">
                                    Functions
                                <a href="#modifiers" class="text-color-white">
                                    Modifiers
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="#components" class="text-color-white">
                                    Modifiziers
                                <a href="#mixins" class="text-color-white">
                                    Mixins
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="#functions" class="text-color-white">
                                    Functions
                                </a>
                            </li>
                        </ul>
@ -55,20 +65,22 @@
        <div class="grid">
            <div class="col-12">

                <h1 class="h2 margin-top-4 margin-bottom-2 text-center">
                <h1 class="h2 margin-top-6 margin-bottom-2 text-center">
                    Get started!
                </h1>

                <h2 class="h3">Installation</h2>
                <pre class="code"><code>npm install crispy-css</code></pre>
                <h2 id="installation" class="marginless padding-top-6">
                    Installation
                </h2>
                <hr class="margin-bottom-2">

                <h2 class="h3">How it works</h2>
                <pre class="code"><code>npm install crispy-css</code></pre>

                <h3 class="h4">SCSS</h3>
                <pre class="code"><code>@import
    "crispy";</code></pre>
                    <p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
                    <pre class="code"><code>@include crispy__core();
                <p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
                <pre class="code"><code>@include crispy__core();
@include crispy__modifiers();

 // components
@ -100,24 +112,26 @@
                    <h3 class="h4">CSS</h3>
                    <p>For using CSS you can use <span class="text-bold">crispy-all.css</span> for all Styles or <span class="text-bold">crispy-mininmal.css</span> without Components.</p>

                    <h2 class="h3">Example</h2>
                    <h3 class="h3">Example</h3>
                    <p>
                        You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
                    </p>
                    <h4>Site</h4>

                    <h3>Site</h3>
                    <p>
                        Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.
                    </p>
                    <h4>Templates</h4>

                    <h3>Templates</h3>
                    <p>
                        Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.
                    </p>

    				<!-- typography -->
    				<hr class="margin-top-3">
    				<h2 id="typography" class="margin-top-1">
    				<h2 id="typography" class="marginless padding-top-6">
                        Typography
                    </h2>
                    <hr class="margin-bottom-2">

                    <!-- abbr -->
    				<h3 class="h4 margin-top-2">a</h3>
@ -207,7 +221,7 @@
    					<dd>defined item 1</dd>
    				</dl>

                    <!-- components / heading -->
                    <!-- typography / heading -->
    				<h3 class="h4 margin-top-2">
                        Heading
                    </h3>
@ -232,10 +246,10 @@
    				<h6>Heading h6</h6>

    				<!-- components -->
    				<hr class="margin-top-3">
    				<h2 id="components" class="margin-top-1">
    				<h2 id="components" class="marginless padding-top-6">
                        Components
                    </h2>
                    <hr class="margin-bottom-1">

    				<!-- components / button -->
    				<h3 class="h4 margin-top-2">
@ -243,9 +257,32 @@
                    </h3>
    				<h4 class="h6">Html:</h4>
    				<pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</code></pre>
    				<button class="button">Default</button>
    				<button class="button width-100 margin-top-1">Info</button>

                    <p>
                        With <a href="#modifiers">Modifiers</a> you can also change Size and width.
                    </p>

                    <button class="button text-size-large">Default</button>
    				<button class="button width-100">Info</button>

                    <p>
                        Also with the Component Icon you can use SVG.
                    </p>

                    <button class="button">
                        <svg class="icon icon-color-danger" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-flask"></use>
                        </svg>
                    </button>
                    <button class="button">
                        <svg class="icon icon-color-danger" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-flask"></use>
                        </svg>
                        Button
                    </button>

                    <!-- components / code -->
    				<h3 class="h4 margin-top-2">
@ -308,7 +345,7 @@
                        Icon
                    </h3>
                    <p>
                        To change Size you can use "text-size-*" that you find in the <span class="text-weight-bold">modifiers</span>.
                        Change Size of Icons with "text-size-*", you find them in the <a href="#modifiers">modifiers</a>.
                    </p>
                    <h4 class="h6">Html:</h4>
                    <pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot;&gt;
@ -317,48 +354,33 @@
                    <div class="panel">
                        <div class="panel__inner">
                            <svg class="icon text-size-small" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                <use xlink:href="symbol-defs.svg#icon-flask"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                <use xlink:href="symbol-defs.svg#icon-flask"></use>
                            </svg>
                            <svg class="icon text-size-large" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                <use xlink:href="symbol-defs.svg#icon-flask"></use>
                            </svg>
                            <svg class="icon text-size-big" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                <use xlink:href="symbol-defs.svg#icon-flask"></use>
                            </svg>
                            <svg class="icon text-size-mega" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                <use xlink:href="symbol-defs.svg#icon-flask"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel__inner">
                            <button class="button">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                </svg>
                            </button>
                            <button class="button">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                </svg>
                                Button
                            </button>
                        </div>
                    </div>
                    <p class="margin-top-2">
                        To change Color you can use "icon-color-*".
                    </p>
                    <h4 class="h6">Html:</h4>
                    <pre class="code"><code>&lt;svg class=&quot;icon icon-color-danger&quot;&gt;
    &lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;
    &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
 &lt;/svg&gt;</code></pre>
                    <div class="panel">
                        <div class="panel__inner">
                            <svg class="icon icon-color-danger" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
                                <use xlink:href="symbol-defs.svg#icon-flask"></use>
                            </svg>
                        </div>
                    </div>
@ -484,28 +506,63 @@
    					</tbody>
    				</table>

                    <!-- components / media -->
                    <h3 class="h4 margin-top-1">
                        Media
                    </h3>
    				<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
 &lt;figure&gt;
    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;div class=&quot;video-responsive&quot; style=&quot;height: 280px;&quot;&gt;
    &lt;iframe src=&quot;https://giphy.com/embed/13XW2MJE0XCoM0&quot; width=&quot;480&quot; height=&quot;361&quot;&gt;&lt;/iframe&gt;
 &lt;/div&gt;</code></pre>
    				<div class="grid">
    					<div class="col-6">
    						<img class="img-responsive width-100" src="https://picsum.photos/400" />
    					</div>
    					<div class="col-6">
    						<figure>
    							<img class="img-responsive width-100" src="https://picsum.photos/400" />
    							<figcaption class="text-center">Lorem Ipsum</figcaption>
    						</figure>
    					</div>
    				</div>

                    <h3 class="h4 margin-top-0">
                        Fields
                    </h3>

                    <p>
                        Fields are Form-Elements.
                    </p>

                    <!-- components / field / checkbox -->
    				<h3 class="h4 margin-top-0">
    				<h4 class="h5">
                        Checkbox
                    </h3>
                    </h4>
                    <p>
                        Checkboxes
                    </p>
                    <div class="field">
                        <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
                        <label for="field__checkbox__1" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
                            </svg>
                            checkbox 1
                        </label>
                        <input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
                        <label for="field__checkbox__2" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
                            </svg>
                            checkbox 2
                        </label>
@ -514,10 +571,10 @@
                        <input id="field__checkbox__3" class="field__choice" type="checkbox" name="field__checkbox__3" value="true" />
                        <label for="field__checkbox__3" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
                            </svg>
                            checkbox 1
                        </label>
@ -534,20 +591,20 @@
                        <input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
                        <label for="field__radio__1" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked" />
                                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
                            </svg>
                            radio item 1
                        </label><br />
                        <input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
                        <label for="field__radio__2" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked" />
                                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
                            </svg>
                            radio item 2
                        </label>
@ -558,20 +615,20 @@
                        <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
                        <label for="field__radio__3" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked" />
                                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
                            </svg>
                            radio item 1
                        </label><br />
                        <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
                        <label for="field__radio__4" class="field__label">
                            <svg class="icon field__choice__unchecked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-minus"></use>
                                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
                            </svg>
                            <svg class="icon field__choice__checked" aria-hidden="true">
                                <use xlink:href="symbol-defs.svg#icon-checked" />
                                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
                            </svg>
                            radio item 2
                        </label>
@ -649,69 +706,40 @@
                        </div>
                    </div>

    				<!-- functions -->
    				<hr class="margin-top-3">
    				<h2 id="functions" class="margin-top-1">
                        Functions
                    </h2>

    				<!-- functions / stripUnit -->
    				<h3 class="h4 margin-top-0">
                        stripUnit()
                    </h3>
    				<h4 class="h6 margin-top-1">Sass:</h4>
    				<pre class="code"><code>stripUnit(10px);</code></pre>
    				<p>
    					Returns value without unit.
    				</p>

                    <!-- functions / zIndex -->
    				<h3 class="h4 margin-top-0">
                        zIndex(name)
                    </h3>
    				<h4 class="h6 margin-top-1">Sass:</h4>
    				<pre class="code"><code>zIndex('modal');</code></pre>
    				<p>
    					Returns value from $crispy__z-index.
    				</p>
                    <h4 class="h6 margin-top-1">Sass:</h4>
    				<pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
 );</code></pre>

    				<!-- modifiers -->
    				<hr class="margin-top-3">
    				<h2 id="modifiers" class="margin-top-1">
                        Modifiziers
    				<h2 id="modifiers" class="padding-top-6">
                        Modifiers
                    </h2>
                    <hr class="margin-bottom-1">

    				<!-- modifiers / margin & padding -->
    				<h3 class="h4 margin-top-1">
                        Margin & Padding
                    </h3>
    				<p>
    					Adding margin-top, -left, -bottom and -right and the same for padding.
    					Adding margin and padding-top, -left, -bottom and -right. For left and right steps and values
                        are halved.
    				</p>
                    <h4 class="h6 margin-top-1">Sass:</h4>
                    <pre class="code">
 $crispy__modifiers__spacing: 0.75em;
 $crispy__modifiers__spacing__value: 0.75em;
 $crispy__modifiers__spacing__steps: 6;
 </pre></code>

                    <h4 class="h6 margin-top-1">Html:</h4>
    				<pre class="code">&lt;div class=&quot;panel&quot;&gt;margin-bottom-0&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-2&quot;&gt;margin-bottom-2&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-3&quot;&gt;margin-bottom-3&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-4&quot;&gt;margin-bottom-4&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-5&quot;&gt;margin-bottom-5&lt;/div&gt;</code></pre>
    				<div class="panel panel__inner">margin-bottom-0</div>
    				<pre class="code">&lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;</code></pre>
    				<div class="panel panel__inner margin-bottom-0">margin-bottom-0</div>
    				<div class="panel panel__inner margin-bottom-1">margin-bottom-1</div>
    				<div class="panel panel__inner margin-bottom-2">margin-bottom-2</div>
    				<div class="panel panel__inner margin-bottom-3">margin-bottom-3</div>
                    <div class="panel panel__inner margin-bottom-4">margin-bottom-4</div>
                    <div class="panel panel__inner margin-bottom-5">margin-bottom-5</div>
                    <div class="panel panel__inner margin-bottom-6">margin-bottom-6</div>

                    <div class="panel panel__inner margin-left-0 margin-bottom-1">margin-left-0</div>
    				<div class="panel panel__inner margin-left-1 margin-bottom-1">margin-left-1</div>
    				<div class="panel panel__inner margin-left-2 margin-bottom-1">margin-left-2</div>
    				<div class="panel panel__inner margin-left-3 margin-bottom-1">margin-left-3</div>

                    <p>
                        Also set padding and margin to 0,
@ -720,30 +748,6 @@ $crispy__modifiers__spacing__steps: 6;
                    <pre class="code">&lt;div class=&quot;marginless&quot;&lt;/div&gt;
 &lt;div class=&quot;paddingless&quot;&lt;/div&gt;</code></pre>

    				<!-- modifiers / media -->
    				<h3 class="h4 margin-top-1">
                        Media
                    </h3>
    				<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
 &lt;figure&gt;
    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;div class=&quot;video-responsive&quot; style=&quot;height: 280px;&quot;&gt;
    &lt;iframe src=&quot;https://giphy.com/embed/13XW2MJE0XCoM0&quot; width=&quot;480&quot; height=&quot;361&quot;&gt;&lt;/iframe&gt;
 &lt;/div&gt;</code></pre>
    				<div class="grid">
    					<div class="col-6">
    						<img class="img-responsive width-100" src="https://picsum.photos/400" />
    					</div>
    					<div class="col-6">
    						<figure>
    							<img class="img-responsive width-100" src="https://picsum.photos/400" />
    							<figcaption class="text-center">Lorem Ipsum</figcaption>
    						</figure>
    					</div>
    				</div>

                    <!-- modifiers / Typography -->
                    <h3 class="h4 margin-top-1">
                        Typography
@ -931,6 +935,37 @@ $crispy__modifiers__spacing__steps: 6;
    						<div class="panel panel__inner lg-only margin-bottom-1">lg-only</div>
    					</div>
    				</div>

                    <!-- functions -->
    				<h2 id="functions" class="margin-top-6">
                        Functions
                    </h2>
                    <hr class="margin-bottom-1">

    				<!-- functions / stripUnit -->
    				<h3 class="h4 margin-top-0">
                        stripUnit()
                    </h3>
    				<h4 class="h6 margin-top-1">Sass:</h4>
    				<pre class="code"><code>stripUnit(10px);</code></pre>
    				<p>
    					Returns value without unit.
    				</p>

                    <!-- functions / zIndex -->
    				<h3 class="h4 margin-top-0">
                        zIndex(name)
                    </h3>
    				<h4 class="h6 margin-top-1">Sass:</h4>
    				<pre class="code"><code>zIndex('modal');</code></pre>
    				<p>
    					Returns value from $crispy__z-index.
    				</p>
                    <h4 class="h6 margin-top-1">Sass:</h4>
    				<pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
 );</code></pre>
    			</div>
    		</div>
        </div>
--- a/dist/example/img/gaming-circus.jpg
+++ b/dist/example/img/gaming-circus.jpg
--- a/dist/example/img/tentakelfabrik.jpg
+++ b/dist/example/img/tentakelfabrik.jpg
--- a/dist/example/img/trinkkofi.jpg
+++ b/dist/example/img/trinkkofi.jpg
--- a/dist/example/imprint.html
+++ b/dist/example/imprint.html
@ -0,0 +1,66 @@
 <!doctype html>
 <html class="no-js" lang="en_EN">

 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
 	<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers.">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="styles.css">
 </head>

 <body>
 	<header id="header" class="header">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
                        <hgroup>
 							<a href="/">
                                <h1 class="h2 margin-top-4 margin-bottom-0">
                                    <svg class="icon icon--big margin-bottom-1" alt="Crispy CSS">
                                        <use xlink:href="symbol-defs.svg#icon-logo" />
                                    </svg><br />
 								    Crispy CSS
                                </h1>
                            </a>
                            <small class="text-color-primary">v3.0.0</small>
                            <h2 class="h5 margin-top-1">
                                Lightweight CSS Framework for Building Apps and Websites
                            </h2>
 						</hgroup>
 					</div>
 				</div>
 			</div>
 		</div>
 	</header>

 	<div class="container">

    </div>

    <footer class="footer background-color-info margin-top-4 padding-top-5 padding-bottom-2">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
                        <ul class="group group--horizontal group--separate">
                            <li class="group__item">
                                <a class="text-color-white" href="/imprint.html">Imprint</a>
                            </li>
                            <li class="group__item">
                                <a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
                            </li>
                        </ul>
                        <p class="margin-top-1">
                            Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
                        </p>
 					</div>
 				</div>
 			</div>
 		</div>
 	</footer>

 </body>
 </html>
--- a/dist/example/index.html
+++ b/dist/example/index.html
@ -36,74 +36,101 @@
 		</div>
 	</header>
 	<div class="container">
        <div class="grid margin-top-3 margin-bottom-2">
 		    <div class="col-12 col-sm-6">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-medium" alt="Lightweight">
                            <use xlink:href="symbol-defs.svg#icon-paperplane" />
                        </svg>
                    </span>
                    <div>Lightweight</div>
                </h3>
                <p class="text-center">
                    Only what you need! Basic Settings and Styles to create UI-Elements for
                    <span class="text-weight-bold">Websites and Apps</span>. Less Code, less Size and that means Crispy CSS is
                    <span class="text-weight-bold">simple</span> and has less <span class="text-weight-bold">loading Time</span>!
                </p>
            </div>
            <div class="col-12 col-sm-6">
        <div class="grid margin-top-6 margin-bottom-2">
            <div class="col-12 col-sm-6 col-lg-4 col-align-center">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-medium" alt="Mixins and Functions">
                            <use xlink:href="symbol-defs.svg#icon-shipping" />
                            <use xlink:href="symbol-defs.svg#icon-emoticon-zip" />
                        </svg>
                    </span>
                    <div>Ugly</div>
                </h3>
                <p class="text-center">
                    Youre are right, these Elements are not
                    Yes, this Framework has no fancy Layout or shiny Elements,
                    because what created with Crispy CSS could be fancy.
                    This Framework adds basic styles and support your Work.
                </p>
            </div>
            <div class="col-12 col-sm-6">
            <div class="col-12 col-sm-6 col-lg-4">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-medium" alt="Customizeable">
                            <use xlink:href="symbol-defs.svg#icon-transformers" />
                            <use xlink:href="symbol-defs.svg#icon-spray" />
                        </svg>
                    </span>
                    <div>Customizable</div>
                    <div>Helpers</div>
                </h3>
                <p class="text-center">
                    There are many Frameworks that really great, but if you want customize them,
                    that can be a lot of work. Crispy CSS is great to build Styles for Layouts that are <span class="text-weight-bold">unusual</span>.
                    Mixins, Functions and Modifiers make your Workflow simpler. Only
                    import Components you really need and make your Work lightweight.
                </p>
            </div>
            <div class="col-12 col-sm-6">
            <div class="col-12 col-sm-6 col-lg-4">
                <h3 class="h4 text-center">
                    <span class="h3__icon">
                        <svg class="icon icon-color-primary text-size-large" alt="Coding Style">
                            <use xlink:href="symbol-defs.svg#icon-ruler" />
                            <use xlink:href="symbol-defs.svg#icon-design" />
                        </svg>
                    </span>
                    <div>Coding Style</div>
                </h3>
                <p class="text-center">
                    Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a> for naming, but
                    a simpler approach of it. BEM is good to show other Developers what classes
                    are belong to a Component.
                    Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a>, but
                    an simpler approach of it. BEM is good to show dependencies
                    in Components and add structure to your Styles.
                </p>
            </div>
        </div>

        <div class="margin-top-2 margin-bottom-2 text-center text-size-medium">
        <div class="margin-bottom-6 text-center text-size-medium">
            <a class="button background-color-success text-color-white" href="/getstarted.html">
                Get started!
                <svg class="icon margin-left-1" alt="proceed">
                    <use xlink:href="symbol-defs.svg#icon-circle-right" />
                </svg>
            </a>
            <a class="button background-color-grey text-color-white" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">
                Visit on Github
                <svg class="icon margin-left-1" alt="github">
                    <use xlink:href="symbol-defs.svg#icon-github" />
                </svg>
            </a>
        </div>

        <div class="margin-bottom-6">
            <div class="grid">
                <div class="col-12">
                    <h2 class="h3 text-center margin-top-6">Apps and Websites that have been crafted</h2>
                </div>
            </div>
            <div class="grid">
                <div class="col-12 col-sm-6 col-md-4">
                    <h3 class="h5 text-center">
                        Tentakelfabrik
                    </h3>
                    <a class="text-center show" href="https://tentakelfabrik.de" target="_blank">
                        <img class="bordered img-responsive width-100" src="img/tentakelfabrik.jpg" />
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <h3 class="h5 text-center">
                        Gaming Circus
                    </h3>
                    <a class="text-center show" href="https://gaming-circus.de" target="_blank">
                        <img class="bordered img-responsive width-100" src="img/gaming-circus.jpg" />
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <h3 class="h5 text-center">
                        Trinkkofi
                    </h3>
                    <a class="text-center show" href="https://trinkkofi.de" target="_blank">
                        <img class="bordered img-responsive width-100" src="img/trinkkofi.jpg" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer background-color-info margin-top-4 padding-top-5 padding-bottom-2">
@ -120,7 +147,7 @@
                            </li>
                        </ul>
                        <p class="margin-top-1">
                            Made by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
                            Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
                        </p>
 					</div>
 				</div>
--- a/dist/example/privacy-policy.html
+++ b/dist/example/privacy-policy.html
@ -0,0 +1,66 @@
 <!doctype html>
 <html class="no-js" lang="en_EN">

 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
 	<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers.">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="styles.css">
 </head>

 <body>
 	<header id="header" class="header">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
                        <hgroup>
 							<a href="/">
                                <h1 class="h2 margin-top-4 margin-bottom-0">
                                    <svg class="icon icon--big margin-bottom-1" alt="Crispy CSS">
                                        <use xlink:href="symbol-defs.svg#icon-logo" />
                                    </svg><br />
 								    Crispy CSS
                                </h1>
                            </a>
                            <small class="text-color-primary">v3.0.0</small>
                            <h2 class="h5 margin-top-1">
                                Lightweight CSS Framework for Building Apps and Websites
                            </h2>
 						</hgroup>
 					</div>
 				</div>
 			</div>
 		</div>
 	</header>

 	<div class="container">

    </div>

    <footer class="footer background-color-info margin-top-4 padding-top-5 padding-bottom-2">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
                        <ul class="group group--horizontal group--separate">
                            <li class="group__item">
                                <a class="text-color-white" href="/imprint.html">Imprint</a>
                            </li>
                            <li class="group__item">
                                <a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a>
                            </li>
                        </ul>
                        <p class="margin-top-1">
                            Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a>
                        </p>
 					</div>
 				</div>
 			</div>
 		</div>
 	</footer>

 </body>
 </html>
--- a/dist/example/styles.css
+++ b/dist/example/styles.css
--- a/dist/example/symbol-defs.svg
+++ b/dist/example/symbol-defs.svg
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -2,5 +2,6 @@
    "/dist/crispy-all.css": "/dist/crispy-all.css",
    "/dist/crispy-minimal.css": "/dist/crispy-minimal.css",
    "/dist/example/styles.css": "/dist/example/styles.css",
    "/spritemap.js": "/spritemap.js",
    "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "crispy-css",
  "version": "3.0.0",
  "version": "3.0.0-pre",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -920,6 +920,55 @@
        "to-fast-properties": "^2.0.0"
      }
    },
    "@hapi/address": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-4.0.1.tgz",
      "integrity": "sha512-0oEP5UiyV4f3d6cBL8F3Z5S7iWSX39Knnl0lY8i+6gfmmIBj44JCBNtcMgwyS+5v7j3VYavNay0NFHDS+UGQcw==",
      "dev": true,
      "requires": {
        "@hapi/hoek": "^9.0.0"
      }
    },
    "@hapi/formula": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz",
      "integrity": "sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==",
      "dev": true
    },
    "@hapi/hoek": {
      "version": "9.0.4",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.0.4.tgz",
      "integrity": "sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==",
      "dev": true
    },
    "@hapi/joi": {
      "version": "17.1.1",
      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-17.1.1.tgz",
      "integrity": "sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==",
      "dev": true,
      "requires": {
        "@hapi/address": "^4.0.1",
        "@hapi/formula": "^2.0.0",
        "@hapi/hoek": "^9.0.0",
        "@hapi/pinpoint": "^2.0.0",
        "@hapi/topo": "^5.0.0"
      }
    },
    "@hapi/pinpoint": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.0.tgz",
      "integrity": "sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==",
      "dev": true
    },
    "@hapi/topo": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.0.0.tgz",
      "integrity": "sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==",
      "dev": true,
      "requires": {
        "@hapi/hoek": "^9.0.0"
      }
    },
    "@mrmlnc/readdir-enhanced": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -4443,6 +4492,12 @@
        "uglify-js": "3.4.x"
      }
    },
    "html4-id": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/html4-id/-/html4-id-1.0.0.tgz",
      "integrity": "sha1-uS9lInlVRoHNL24W0n6q9nwCmL8=",
      "dev": true
    },
    "http-deceiver": {
      "version": "1.2.7",
      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@ -5492,6 +5547,12 @@
      "integrity": "sha1-ftLCzMyvhNP/y3pptXcR/CCDQBs=",
      "dev": true
    },
    "mini-svg-data-uri": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==",
      "dev": true
    },
    "minimalistic-assert": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -8432,6 +8493,57 @@
        "has-flag": "^3.0.0"
      }
    },
    "svg-element-attributes": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/svg-element-attributes/-/svg-element-attributes-1.3.1.tgz",
      "integrity": "sha512-Bh05dSOnJBf3miNMqpsormfNtfidA/GxQVakhtn0T4DECWKeXQRQUceYjJ+OxYiiLdGe4Jo9iFV8wICFapFeIA==",
      "dev": true
    },
    "svg-spritemap-webpack-plugin": {
      "version": "3.5.5",
      "resolved": "https://registry.npmjs.org/svg-spritemap-webpack-plugin/-/svg-spritemap-webpack-plugin-3.5.5.tgz",
      "integrity": "sha512-MOdamYIJ3O9D4e1lds2bgIfqml59ivloDFtNsVzJpQnuNaF7I8NjKX3udp6Eal/b1X0rJZUQ70xy+RoW3LlUiw==",
      "dev": true,
      "requires": {
        "@hapi/joi": "^17.1.1",
        "glob": "^7.1.6",
        "html4-id": "^1.0.0",
        "loader-utils": "^2.0.0",
        "mini-svg-data-uri": "^1.1.3",
        "mkdirp": "^1.0.3",
        "svg-element-attributes": "^1.3.1",
        "svg4everybody": "^2.1.9",
        "svgo": "^1.3.2",
        "webpack-merge": "^4.2.2",
        "webpack-sources": "^1.4.3",
        "xmldom": "^0.3.0"
      },
      "dependencies": {
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "mkdirp": {
          "version": "1.0.4",
          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
          "dev": true
        }
      }
    },
    "svg4everybody": {
      "version": "2.1.9",
      "resolved": "https://registry.npmjs.org/svg4everybody/-/svg4everybody-2.1.9.tgz",
      "integrity": "sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0=",
      "dev": true
    },
    "svgo": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@ -9813,6 +9925,12 @@
        "async-limiter": "~1.0.0"
      }
    },
    "xmldom": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.3.0.tgz",
      "integrity": "sha512-z9s6k3wxE+aZHgXYxSTpGDo7BYOUfJsIRyoZiX6HTjwpwfS2wpQBQKa2fD+ShLyPkqDYo5ud7KitmLZ2Cd6r0g==",
      "dev": true
    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -23,7 +23,8 @@
    "postcss-css-variables": "^0.11.0",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
    "sass-loader": "^8.0.2",
    "svg-spritemap-webpack-plugin": "^3.5.5"
  },
  "dependencies": {
    "reflex-grid": "^2.0.4"
--- a/src/_modifiers.scss
+++ b/src/_modifiers.scss
@ -7,7 +7,7 @@
 */

 // spacing
 $crispy__modifiers__spacing: 0.75em !default;
 $crispy__modifiers__spacing: 0.75rem !default;
 $crispy__modifiers__spacing__steps: 6 !default;

 // width
@ -328,37 +328,55 @@ $crispy__modifiers__width: (
        padding: 0 !important;
    }

    @for $i from 0 through ($crispy__modifiers__spacing__steps / 2) {
        .margin-left-#{$i} {
            margin-left: ($crispy__modifiers__spacing * $i * 0.5) !important;
        }

        .margin-right-#{$i} {
            margin-right: ($crispy__modifiers__spacing * $i * 0.5) !important;
        }

        .padding-left-#{$i} {
            padding-left: ($crispy__modifiers__spacing * $i * 0.5) !important;
        }

        .padding-right-#{$i} {
            padding-right: ($crispy__modifiers__spacing * $i * 0.5) !important;
        }
    }

    @for $i from 0 through $crispy__modifiers__spacing__steps {
        .margin-top-#{$i} {
            margin-top: ($crispy__modifiers__spacing * $i) !important;
        }
            margin-top: ($crispy__modifiers__spacing * $i * 0.5) !important;

        .margin-left-#{$i} {
            margin-left: ($crispy__modifiers__spacing * $i) !important;
            @include crispy__media-md() {
                margin-top: ($crispy__modifiers__spacing * $i) !important;
            }
        }

        .margin-bottom-#{$i} {
            margin-bottom: ($crispy__modifiers__spacing * $i) !important;
        }
            margin-bottom: ($crispy__modifiers__spacing * $i * 0.5) !important;

        .margin-right-#{$i} {
            margin-right: ($crispy__modifiers__spacing * $i) !important;
            @include crispy__media-md() {
                margin-bottom: ($crispy__modifiers__spacing * $i) !important;
            }
        }

        .padding-top-#{$i} {
            padding-top: ($crispy__modifiers__spacing * $i) !important;
        }
            padding-top: ($crispy__modifiers__spacing * $i * 0.5) !important;

        .padding-left-#{$i} {
            padding-left: ($crispy__modifiers__spacing * $i) !important;
            @include crispy__media-md() {
                padding-top: ($crispy__modifiers__spacing * $i) !important;
            }
        }

        .padding-bottom-#{$i} {
            padding-bottom: ($crispy__modifiers__spacing * $i) !important;
        }
            padding-bottom: ($crispy__modifiers__spacing * $i * 0.5) !important;

        .padding-right-#{$i} {
            padding-right: ($crispy__modifiers__spacing * $i) !important;
            @include crispy__media-md() {
                padding-bottom: ($crispy__modifiers__spacing * $i) !important;
            }
        }
    }
 }
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -35,11 +35,11 @@ $crispy__direction: ltr !default;

 $crispy__font-sizes: (
    'default' : $crispy__font-size,
    'small'   : $crispy__font-size * 0.8,
    'medium'  : $crispy__font-size * 1.1,
    'large'   : $crispy__font-size * 1.3,
    'big'     : $crispy__font-size * 1.5,
    'mega'    : $crispy__font-size * 1.8
    'small'   : $crispy__font-size * 0.75,
    'medium'  : $crispy__font-size * 1.25,
    'large'   : $crispy__font-size * 1.5,
    'big'     : $crispy__font-size * 1.75,
    'mega'    : $crispy__font-size * 2,
 ) !default;

 // colors
@ -85,7 +85,7 @@ $crispy__colors: (
 *  Padding & Margin
 *
 */
 $crispy__margin: 0 0 1em !default;
 $crispy__margin: 0 0 1rem !default;
 $crispy__padding: 0.8em 1.2em !default;


--- a/src/components/_button.scss
+++ b/src/components/_button.scss
@ -11,7 +11,8 @@
 *
 */

 $crispy__button__padding: 0.25em 1em 0.3em !default;
 $crispy__button__padding: 0.5em 1.2em 0.6em !default;
 $crispy__button__margin: $crispy__margin !default;

@mixin crispy__button() {
    .button {
@ -21,6 +22,7 @@ $crispy__button__padding: 0.25em 1em 0.3em !default;
        text-decoration: none;

        padding: $crispy__button__padding;
        margin: $crispy__button__margin;

        &:hover {
            cursor: pointer;
--- a/src/components/_field.scss
+++ b/src/components/_field.scss
@ -27,11 +27,11 @@ $crispy__field__choice__checked__color: $crispy__color-success !default;
 $crispy__field__choice__unchecked__color: $crispy__color-danger !default;

 $crispy__field__input__font-size: $crispy__font-size !default;
 $crispy__field__input__padding: 6px 8px !default;
 $crispy__field__input__padding: 0.4em 0.6em !default;
 $crispy__field__input__color: $crispy__color-text !default;

 $crispy__field__select__padding: 0.25em !default;
 $crispy__field__panel__padding: 0.25em !default;
 $crispy__field__select__padding: 0.3em 0.5em !default;
 $crispy__field__panel__padding: 0.3em 0.6em !default;

 $crispy__field__select__background-color: white !default;
 $crispy__field__select__border: $crispy__border !default;
--- a/src/components/_icon.scss
+++ b/src/components/_icon.scss
@ -32,8 +32,8 @@ $crispy__icon__offset: -0.2em !default;
        }
    }

    // workaround for buttons and a
    .button, a {
    // workaround for buttons
    .button {
        .icon {
            margin: $crispy__icon__offset 0 0;
        }
--- a/src/example/_config.scss
+++ b/src/example/_config.scss
--- a/src/example/styles.scss
+++ b/src/example/styles.scss
@ -7,9 +7,10 @@
    'templates/home';

@include site__header();
@include template__home();

 .container {
    max-width: $crispy__md;
    max-width: $crispy__lg;
 }

 .sm, .md, .md-only, .lg-only {
@ -60,14 +61,3 @@
    @include triangle('bottom', $crispy__color-primary);
 }

 .h3__icon {
    display: inline-block;
    border: 3px solid $crispy__color-primary;
    border-radius: 50%;
    padding: 0.6em;
    margin: 0 0 0.5em;

    .icon {
        font-size: 3rem !important;
    }
 }
--- a/src/example/templates/_home.scss
+++ b/src/example/templates/_home.scss
@ -6,7 +6,16 @@
 *
 */

@mixin templates__home()
@mixin template__home()
 {
    .h3__icon {
        display: inline-block;
        border-radius: 50%;
        padding: 0.9em;
        margin: 0 0 0.5em;

        .icon {
            font-size: 3rem !important;
        }
    }
 }
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -1,4 +1,6 @@
 let mix = require('laravel-mix');
 const mix = require('laravel-mix');

 const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin');

 /*
 |--------------------------------------------------------------------------
@ -11,6 +13,19 @@ let mix = require('laravel-mix');
 |
 */

 mix.webpackConfig({
    plugins: [
        new SvgSpritemapPlugin('assets/svg/*.svg', {
            output: {
                filename: 'dist/example/symbol-defs.svg'
            },
            sprite: {
                prefix: 'icon-'
            }
        })
    ]
 });

 mix.sass('src/crispy-all.scss', 'dist/crispy-all.css')
    .sass('src/crispy-minimal.scss', 'dist/crispy-minimal.css')
    .sass('src/example/styles.scss', 'dist/example/styles.css', {
@ -20,7 +35,6 @@ mix.sass('src/crispy-all.scss', 'dist/crispy-all.css')
                ]
            }
    })
    .copy('assets/iconmoon/symbol-defs.svg', 'dist/example')
    .options({
        postCss: [
            require('postcss-css-variables')()