diff --git a/example/css/styles.css b/example/css/styles.css
new file mode 100644
index 0000000..1d1a2ea
--- /dev/null
+++ b/example/css/styles.css
@@ -0,0 +1,14 @@
+html {
+ min-width: 540px
+}
+
+.box {
+ height: 1.5em;
+ min-width: 1.5em;
+ line-height: 1.5em;
+ margin: 1px;
+ display: inline-block;
+ font-weight: bold;
+ letter-spacing: .2em;
+ color: #FAFAFA;
+}
\ No newline at end of file
diff --git a/example/example.html b/example/example.html
index f6e7380..18296b4 100644
--- a/example/example.html
+++ b/example/example.html
@@ -5,20 +5,9 @@
Grayscale CSS
-
-
+
+
+
diff --git a/example/js/example.js b/example/js/example.js
index f2f11b0..e8463ce 100644
--- a/example/js/example.js
+++ b/example/js/example.js
@@ -68,8 +68,7 @@ function update() {
const rgb = HEXToRGB(form.elements['theme'].value);
const hsl = RGBToHSL(rgb.r, rgb.g, rgb.b);
- const style = document.createElement('style');
- style.innerHTML = `
+ const theme = String(`
:root {
--Hsl: ${hsl.h};
--hSl: ${hsl.s}%;
@@ -79,8 +78,12 @@ function update() {
--space: ${form.elements['spacing'].value}rem;
--line: ${form.elements['line'].value};
--radius: ${form.elements['radius'].value}rem;
- }
- `;
+ }`).replace(/\s/g, '');
+
+ $('#dynamic').innerHTML = theme;
+
+ return theme;
+}
$('head').appendChild(style);
}