From 7f5be16bb2ab8e0c8abd56044358640379bae2da Mon Sep 17 00:00:00 2001
From: octoshrimpy <octavo.acapella@gmail.com>
Date: Sat, 29 Oct 2022 00:31:48 -0600
Subject: [PATCH] v 0.0.2

---
 __sensible.css  |  47 +++++++
 colar.css       | 256 +++++++++++++++++++++++++++++++++++
 mdl_shadows.css |  19 +++
 micro.css       | 346 +-----------------------------------------------
 nerdfonts.css   |  50 +++++++
 5 files changed, 377 insertions(+), 341 deletions(-)
 create mode 100644 __sensible.css
 create mode 100644 colar.css
 create mode 100644 mdl_shadows.css
 create mode 100644 nerdfonts.css

diff --git a/__sensible.css b/__sensible.css
new file mode 100644
index 0000000..7d4388b
--- /dev/null
+++ b/__sensible.css
@@ -0,0 +1,47 @@
+/* pico-sensible */
+/* @todo add description of what this will achieve */
+:root {
+  --form-spacing: calc(var(--spacing) / 2);
+  --form-input-max-length: 15;
+  --form-font-scale: 0.5;
+}
+
+/* max-width */
+input:not([type=checkbox],[type=radio]), 
+select, 
+textarea {
+  max-width: calc(var(--font-size) * var(--form-input-max-length));
+}
+
+/* spacing between elements */
+form.__sensible > * {
+  font-size: var(--font-size);
+  margin-left: var(--form-spacing);
+  margin-right: var(--form-spacing);
+}
+form.__sensible {
+  margin-left: calc(var(--form-spacing) * -1);
+  margin-right: calc(var(--form-spacing) * -1);
+}
+
+
+@media (min-width: 576px) {
+  form.__sensible {
+    --font-size: 17px;
+  }
+}
+@media (min-width: 768px) {
+  form.__sensible {
+    --font-size: 17px;
+  }
+}
+@media (min-width: 992px) {
+  form.__sensible {
+    --font-size: 18px;
+  }
+}
+@media (min-width: 1200px) {
+  form.__sensible {
+    --font-size: 18px;
+  }
+}
diff --git a/colar.css b/colar.css
new file mode 100644
index 0000000..02779e4
--- /dev/null
+++ b/colar.css
@@ -0,0 +1,256 @@
+/* Colar */
+/* https://github.com/fchristant/colar */
+/* https://ferdychristant.com/color-for-the-color-challenged-884c7aa04a56 */
+:root {
+--colar-gray-0 : #f8fafb;
+--colar-gray-1 : #f2f4f6;
+--colar-gray-2 : #ebedef;
+--colar-gray-3 : #e0e4e5;
+--colar-gray-4 : #d1d6d8;
+--colar-gray-5 : #b1b6b9;
+--colar-gray-6 : #979b9d;
+--colar-gray-7 : #7e8282;
+--colar-gray-8 : #666968;
+--colar-gray-9 : #50514f;
+--colar-gray-10: #3a3a37;
+--colar-gray-11: #252521;
+--colar-gray-12: #121210;
+
+--colar-red-0 : #fff5f5;
+--colar-red-1 : #ffe3e3;
+--colar-red-2 : #ffc9c9;
+--colar-red-3 : #ffa8a8;
+--colar-red-4 : #ff8787;
+--colar-red-5 : #ff6b6b;
+--colar-red-6 : #fa5252;
+--colar-red-7 : #f03e3e;
+--colar-red-8 : #e03131;
+--colar-red-9 : #c92a2a;
+--colar-red-10: #b02525;
+--colar-red-11: #962020;
+--colar-red-12: #7d1a1a;
+
+--colar-pink-0 : #fff0f6;
+--colar-pink-1 : #ffdeeb;
+--colar-pink-2 : #fcc2d7;
+--colar-pink-3 : #faa2c1;
+--colar-pink-4 : #f783ac;
+--colar-pink-5 : #f06595;
+--colar-pink-6 : #e64980;
+--colar-pink-7 : #d6336c;
+--colar-pink-8 : #c2255c;
+--colar-pink-9 : #a61e4d;
+--colar-pink-10: #8c1941;
+--colar-pink-11: #731536;
+--colar-pink-12: #59102a;
+
+--colar-purple-0 : #f8f0fc;
+--colar-purple-1 : #f3d9fa;
+--colar-purple-2 : #eebefa;
+--colar-purple-3 : #e599f7;
+--colar-purple-4 : #da77f2;
+--colar-purple-5 : #cc5de8;
+--colar-purple-6 : #be4bdb;
+--colar-purple-7 : #ae3ec9;
+--colar-purple-8 : #9c36b5;
+--colar-purple-9 : #862e9c;
+--colar-purple-10: #702682;
+--colar-purple-11: #5a1e69;
+--colar-purple-12: #44174f;
+
+--colar-violet-0 : #f3f0ff;
+--colar-violet-1 : #e5dbff;
+--colar-violet-2 : #d0bfff;
+--colar-violet-3 : #b197fc;
+--colar-violet-4 : #9775fa;
+--colar-violet-5 : #845ef7;
+--colar-violet-6 : #7950f2;
+--colar-violet-7 : #7048e8;
+--colar-violet-8 : #6741d9;
+--colar-violet-9 : #5f3dc4;
+--colar-violet-10: #5235ab;
+--colar-violet-11: #462d91;
+--colar-violet-12: #3a2578;
+
+--colar-indigo-0 : #edf2ff;
+--colar-indigo-1 : #dbe4ff;
+--colar-indigo-2 : #bac8ff;
+--colar-indigo-3 : #91a7ff;
+--colar-indigo-4 : #748ffc;
+--colar-indigo-5 : #5c7cfa;
+--colar-indigo-6 : #4c6ef5;
+--colar-indigo-7 : #4263eb;
+--colar-indigo-8 : #3b5bdb;
+--colar-indigo-9 : #364fc7;
+--colar-indigo-10: #2f44ad;
+--colar-indigo-11: #283a94;
+--colar-indigo-12: #21307a;
+
+--colar-blue-0 : #e7f5ff;
+--colar-blue-1 : #d0ebff;
+--colar-blue-2 : #a5d8ff;
+--colar-blue-3 : #74c0fc;
+--colar-blue-4 : #4dabf7;
+--colar-blue-5 : #339af0;
+--colar-blue-6 : #228be6;
+--colar-blue-7 : #1c7ed6;
+--colar-blue-8 : #1971c2;
+--colar-blue-9 : #1864ab;
+--colar-blue-10: #145591;
+--colar-blue-11: #114678;
+--colar-blue-12: #0d375e;
+
+--colar-cyan-0 : #e3fafc;
+--colar-cyan-1 : #c5f6fa;
+--colar-cyan-2 : #99e9f2;
+--colar-cyan-3 : #66d9e8;
+--colar-cyan-4 : #3bc9db;
+--colar-cyan-5 : #22b8cf;
+--colar-cyan-6 : #15aabf;
+--colar-cyan-7 : #1098ad;
+--colar-cyan-8 : #0c8599;
+--colar-cyan-9 : #0b7285;
+--colar-cyan-10: #095c6b;
+--colar-cyan-11: #074652;
+--colar-cyan-12: #053038;
+
+--colar-teal-0 : #e6fcf5;
+--colar-teal-1 : #c3fae8;
+--colar-teal-2 : #96f2d7;
+--colar-teal-3 : #63e6be;
+--colar-teal-4 : #38d9a9;
+--colar-teal-5 : #20c997;
+--colar-teal-6 : #12b886;
+--colar-teal-7 : #0ca678;
+--colar-teal-8 : #099268;
+--colar-teal-9 : #087f5b;
+--colar-teal-10: #066649;
+--colar-teal-11: #054d37;
+--colar-teal-12: #033325;
+
+--colar-green-0 : #ebfbee;
+--colar-green-1 : #d3f9d8;
+--colar-green-2 : #b2f2bb;
+--colar-green-3 : #8ce99a;
+--colar-green-4 : #69db7c;
+--colar-green-5 : #51cf66;
+--colar-green-6 : #40c057;
+--colar-green-7 : #37b24d;
+--colar-green-8 : #2f9e44;
+--colar-green-9 : #2b8a3e;
+--colar-green-10: #237032;
+--colar-green-11: #1b5727;
+--colar-green-12: #133d1b;
+
+--colar-lime-0 : #f4fce3;
+--colar-lime-1 : #e9fac8;
+--colar-lime-2 : #d8f5a2;
+--colar-lime-3 : #c0eb75;
+--colar-lime-4 : #a9e34b;
+--colar-lime-5 : #94d82d;
+--colar-lime-6 : #82c91e;
+--colar-lime-7 : #74b816;
+--colar-lime-8 : #66a80f;
+--colar-lime-9 : #5c940d;
+--colar-lime-10: #4c7a0b;
+--colar-lime-11: #3c6109;
+--colar-lime-12: #2c4706;
+
+--colar-yellow-0 : #fff9db;
+--colar-yellow-1 : #fff3bf;
+--colar-yellow-2 : #ffec99;
+--colar-yellow-3 : #ffe066;
+--colar-yellow-4 : #ffd43b;
+--colar-yellow-5 : #fcc419;
+--colar-yellow-6 : #fab005;
+--colar-yellow-7 : #f59f00;
+--colar-yellow-8 : #f08c00;
+--colar-yellow-9 : #e67700;
+--colar-yellow-10: #b35c00;
+--colar-yellow-11: #804200;
+--colar-yellow-12: #663500;
+
+--colar-orange-0 : #fff4e6;
+--colar-orange-1 : #ffe8cc;
+--colar-orange-2 : #ffd8a8;
+--colar-orange-3 : #ffc078;
+--colar-orange-4 : #ffa94d;
+--colar-orange-5 : #ff922b;
+--colar-orange-6 : #fd7e14;
+--colar-orange-7 : #f76707;
+--colar-orange-8 : #e8590c;
+--colar-orange-9 : #d9480f;
+--colar-orange-10: #bf400d;
+--colar-orange-11: #99330b;
+--colar-orange-12: #802b09;
+
+--colar-choco-0 : #fff8dc;
+--colar-choco-1 : #fce1bc;
+--colar-choco-2 : #f7ca9e;
+--colar-choco-3 : #f1b280;
+--colar-choco-4 : #e99b62;
+--colar-choco-5 : #df8545;
+--colar-choco-6 : #d46e25;
+--colar-choco-7 : #bd5f1b;
+--colar-choco-8 : #a45117;
+--colar-choco-9 : #8a4513;
+--colar-choco-10: #703a13;
+--colar-choco-11: #572f12;
+--colar-choco-12: #3d210d;
+
+--colar-brown-0 : #faf4eb;
+--colar-brown-1 : #ede0d1;
+--colar-brown-2 : #e0cab7;
+--colar-brown-3 : #d3b79e;
+--colar-brown-4 : #c5a285;
+--colar-brown-5 : #b78f6d;
+--colar-brown-6 : #a87c56;
+--colar-brown-7 : #956b47;
+--colar-brown-8 : #825b3a;
+--colar-brown-9 : #6f4b2d;
+--colar-brown-10: #5e3a21;
+--colar-brown-11: #4e2b15;
+--colar-brown-12: #422412;
+
+--colar-sand-0 : #f8fafb;
+--colar-sand-1 : #e6e4dc;
+--colar-sand-2 : #d5cfbd;
+--colar-sand-3 : #c2b9a0;
+--colar-sand-4 : #aea58c;
+--colar-sand-5 : #9a9178;
+--colar-sand-6 : #867c65;
+--colar-sand-7 : #736a53;
+--colar-sand-8 : #5f5746;
+--colar-sand-9 : #4b4639;
+--colar-sand-10: #38352d;
+--colar-sand-11: #252521;
+--colar-sand-12: #121210;
+
+--colar-camo-0 : #f9fbe7;
+--colar-camo-1 : #e8ed9c;
+--colar-camo-2 : #d2df4e;
+--colar-camo-3 : #c2ce34;
+--colar-camo-4 : #b5bb2e;
+--colar-camo-5 : #a7a827;
+--colar-camo-6 : #999621;
+--colar-camo-7 : #8c851c;
+--colar-camo-8 : #7e7416;
+--colar-camo-9 : #6d6414;
+--colar-camo-10: #5d5411;
+--colar-camo-11: #4d460e;
+--colar-camo-12: #36300a;
+
+--colar-jungle-0 : #ecfeb0;
+--colar-jungle-1 : #def39a;
+--colar-jungle-2 : #d0e884;
+--colar-jungle-3 : #c2dd6e;
+--colar-jungle-4 : #b5d15b;
+--colar-jungle-5 : #a8c648;
+--colar-jungle-6 : #9bbb36;
+--colar-jungle-7 : #8fb024;
+--colar-jungle-8 : #84a513;
+--colar-jungle-9 : #7a9908;
+--colar-jungle-10: #658006;
+--colar-jungle-11: #516605;
+--colar-jungle-12: #3d4d04;
+}
diff --git a/mdl_shadows.css b/mdl_shadows.css
new file mode 100644
index 0000000..1e5619a
--- /dev/null
+++ b/mdl_shadows.css
@@ -0,0 +1,19 @@
+/* MDL shadows */
+/* https://material.io/design/environment/elevation.html */
+:root {
+  --shadow-none        : inset 0 0 0 rgba(0,0,0,0),          inset 0 0 0 rgba(0,0,0,0),          0 0 0 rgba(0,0,0,0),          0 0 0 rgba(0,0,0,0);
+  
+  --shadow-border      : inset 0 0 0 rgba(10,10,10,.1),      0 0 0 0 rgba(10,10,10,.1),          0 2px 3px rgba(10,10,10,.1),  0 0 0 1px rgba(10,10,10,.1);
+  --shadow-1           : inset 0 0 0 rgba(0,0,0,0.12),       inset 0 0 0 rgba(0,0,0,0.24),       0 1px 3px rgba(0,0,0,0.12),   0 1px 2px rgba(0,0,0,0.24);
+  --shadow-2           : inset 0 0 0 rgba(0,0,0,0.16),       inset 0 0 0 rgba(0,0,0,0.23),       0 3px 6px rgba(0,0,0,0.16),   0 3px 6px rgba(0,0,0,0.23);
+  --shadow-3           : inset 0 0 0 rgba(0,0,0,0.19),       inset 0 0 0 rgba(0,0,0,0.23),       0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  --shadow-4           : inset 0 0 0 rgba(0,0,0,0.25),       inset 0 0 0 rgba(0,0,0,0.22),       0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  --shadow-5           : inset 0 0 0 rgba(0,0,0,0.30),       inset 0 0 0 rgba(0,0,0,0.22),       0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+  
+  --inset-shadow-border: inset 0 2px 3px rgba(10,10,10,.1),  inset 0 0 0 1px rgba(10,10,10,.1),  0 0 0 rgba(10,10,10,.1),      0 0 0 0 rgba(10,10,10,.1);
+  --inset-shadow-1     : inset 0 1px 3px rgba(0,0,0,0.12),   inset 0 1px 2px rgba(0,0,0,0.24),   0 0 0 rgba(0,0,0,0.12),       0 0 0 rgba(0,0,0,0.24);
+  --inset-shadow-2     : inset 0 3px 6px rgba(0,0,0,0.16),   inset 0 3px 6px rgba(0,0,0,0.23),   0 0 0 rgba(0,0,0,0.16),       0 0 0 rgba(0,0,0,0.23);
+  --inset-shadow-3     : inset 0 10px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23),   0 0 0 rgba(0,0,0,0.19),       0 0 0 rgba(0,0,0,0.23);
+  --inset-shadow-4     : inset 0 14px 28px rgba(0,0,0,0.25), inset 0 10px 10px rgba(0,0,0,0.22), 0 0 0 rgba(0,0,0,0.25),       0 0 0 rgba(0,0,0,0.22);
+  --inset-shadow-5     : inset 0 19px 38px rgba(0,0,0,0.30), inset 0 15px 12px rgba(0,0,0,0.22), 0 0 0 rgba(0,0,0,0.30),       0 0 0 rgba(0,0,0,0.22);
+}
diff --git a/micro.css b/micro.css
index f1b5d3b..94f09a1 100644
--- a/micro.css
+++ b/micro.css
@@ -1,350 +1,14 @@
 /* https://open-props.style */
 /* https://yeun.github.io/open-color */
-/* @import "https://unpkg.com/open-props"; */
 @import "https://cdn.jsdelivr.net/npm/open-props/open-props.min.css";
 
 
 /* https://picocss.com/docs */
-/* @import "https://unpkg.com/@picocss/pico"; */
 @import "https://cdn.jsdelivr.net/npm/@picocss/pico";
 
 
-/* MDL shadows */
-/* https://material.io/design/environment/elevation.html */
-:root {
-  --shadow-none        : inset 0 0 0 rgba(0,0,0,0),          inset 0 0 0 rgba(0,0,0,0),          0 0 0 rgba(0,0,0,0),          0 0 0 rgba(0,0,0,0);
-  
-  --shadow-border      : inset 0 0 0 rgba(10,10,10,.1),      0 0 0 0 rgba(10,10,10,.1),          0 2px 3px rgba(10,10,10,.1),  0 0 0 1px rgba(10,10,10,.1);
-  --shadow-1           : inset 0 0 0 rgba(0,0,0,0.12),       inset 0 0 0 rgba(0,0,0,0.24),       0 1px 3px rgba(0,0,0,0.12),   0 1px 2px rgba(0,0,0,0.24);
-  --shadow-2           : inset 0 0 0 rgba(0,0,0,0.16),       inset 0 0 0 rgba(0,0,0,0.23),       0 3px 6px rgba(0,0,0,0.16),   0 3px 6px rgba(0,0,0,0.23);
-  --shadow-3           : inset 0 0 0 rgba(0,0,0,0.19),       inset 0 0 0 rgba(0,0,0,0.23),       0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  --shadow-4           : inset 0 0 0 rgba(0,0,0,0.25),       inset 0 0 0 rgba(0,0,0,0.22),       0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-  --shadow-5           : inset 0 0 0 rgba(0,0,0,0.30),       inset 0 0 0 rgba(0,0,0,0.22),       0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-  
-  --inset-shadow-border: inset 0 2px 3px rgba(10,10,10,.1),  inset 0 0 0 1px rgba(10,10,10,.1),  0 0 0 rgba(10,10,10,.1),      0 0 0 0 rgba(10,10,10,.1);
-  --inset-shadow-1     : inset 0 1px 3px rgba(0,0,0,0.12),   inset 0 1px 2px rgba(0,0,0,0.24),   0 0 0 rgba(0,0,0,0.12),       0 0 0 rgba(0,0,0,0.24);
-  --inset-shadow-2     : inset 0 3px 6px rgba(0,0,0,0.16),   inset 0 3px 6px rgba(0,0,0,0.23),   0 0 0 rgba(0,0,0,0.16),       0 0 0 rgba(0,0,0,0.23);
-  --inset-shadow-3     : inset 0 10px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23),   0 0 0 rgba(0,0,0,0.19),       0 0 0 rgba(0,0,0,0.23);
-  --inset-shadow-4     : inset 0 14px 28px rgba(0,0,0,0.25), inset 0 10px 10px rgba(0,0,0,0.22), 0 0 0 rgba(0,0,0,0.25),       0 0 0 rgba(0,0,0,0.22);
-  --inset-shadow-5     : inset 0 19px 38px rgba(0,0,0,0.30), inset 0 15px 12px rgba(0,0,0,0.22), 0 0 0 rgba(0,0,0,0.30),       0 0 0 rgba(0,0,0,0.22);
-}
-
-
-/* Colar */
-/* https://github.com/fchristant/colar */
-/* https://ferdychristant.com/color-for-the-color-challenged-884c7aa04a56 */
-:root {
---colar-gray-0 : #f8fafb;
---colar-gray-1 : #f2f4f6;
---colar-gray-2 : #ebedef;
---colar-gray-3 : #e0e4e5;
---colar-gray-4 : #d1d6d8;
---colar-gray-5 : #b1b6b9;
---colar-gray-6 : #979b9d;
---colar-gray-7 : #7e8282;
---colar-gray-8 : #666968;
---colar-gray-9 : #50514f;
---colar-gray-10: #3a3a37;
---colar-gray-11: #252521;
---colar-gray-12: #121210;
-
---colar-red-0 : #fff5f5;
---colar-red-1 : #ffe3e3;
---colar-red-2 : #ffc9c9;
---colar-red-3 : #ffa8a8;
---colar-red-4 : #ff8787;
---colar-red-5 : #ff6b6b;
---colar-red-6 : #fa5252;
---colar-red-7 : #f03e3e;
---colar-red-8 : #e03131;
---colar-red-9 : #c92a2a;
---colar-red-10: #b02525;
---colar-red-11: #962020;
---colar-red-12: #7d1a1a;
-
---colar-pink-0 : #fff0f6;
---colar-pink-1 : #ffdeeb;
---colar-pink-2 : #fcc2d7;
---colar-pink-3 : #faa2c1;
---colar-pink-4 : #f783ac;
---colar-pink-5 : #f06595;
---colar-pink-6 : #e64980;
---colar-pink-7 : #d6336c;
---colar-pink-8 : #c2255c;
---colar-pink-9 : #a61e4d;
---colar-pink-10: #8c1941;
---colar-pink-11: #731536;
---colar-pink-12: #59102a;
-
---colar-purple-0 : #f8f0fc;
---colar-purple-1 : #f3d9fa;
---colar-purple-2 : #eebefa;
---colar-purple-3 : #e599f7;
---colar-purple-4 : #da77f2;
---colar-purple-5 : #cc5de8;
---colar-purple-6 : #be4bdb;
---colar-purple-7 : #ae3ec9;
---colar-purple-8 : #9c36b5;
---colar-purple-9 : #862e9c;
---colar-purple-10: #702682;
---colar-purple-11: #5a1e69;
---colar-purple-12: #44174f;
-
---colar-violet-0 : #f3f0ff;
---colar-violet-1 : #e5dbff;
---colar-violet-2 : #d0bfff;
---colar-violet-3 : #b197fc;
---colar-violet-4 : #9775fa;
---colar-violet-5 : #845ef7;
---colar-violet-6 : #7950f2;
---colar-violet-7 : #7048e8;
---colar-violet-8 : #6741d9;
---colar-violet-9 : #5f3dc4;
---colar-violet-10: #5235ab;
---colar-violet-11: #462d91;
---colar-violet-12: #3a2578;
-
---colar-indigo-0 : #edf2ff;
---colar-indigo-1 : #dbe4ff;
---colar-indigo-2 : #bac8ff;
---colar-indigo-3 : #91a7ff;
---colar-indigo-4 : #748ffc;
---colar-indigo-5 : #5c7cfa;
---colar-indigo-6 : #4c6ef5;
---colar-indigo-7 : #4263eb;
---colar-indigo-8 : #3b5bdb;
---colar-indigo-9 : #364fc7;
---colar-indigo-10: #2f44ad;
---colar-indigo-11: #283a94;
---colar-indigo-12: #21307a;
-
---colar-blue-0 : #e7f5ff;
---colar-blue-1 : #d0ebff;
---colar-blue-2 : #a5d8ff;
---colar-blue-3 : #74c0fc;
---colar-blue-4 : #4dabf7;
---colar-blue-5 : #339af0;
---colar-blue-6 : #228be6;
---colar-blue-7 : #1c7ed6;
---colar-blue-8 : #1971c2;
---colar-blue-9 : #1864ab;
---colar-blue-10: #145591;
---colar-blue-11: #114678;
---colar-blue-12: #0d375e;
-
---colar-cyan-0 : #e3fafc;
---colar-cyan-1 : #c5f6fa;
---colar-cyan-2 : #99e9f2;
---colar-cyan-3 : #66d9e8;
---colar-cyan-4 : #3bc9db;
---colar-cyan-5 : #22b8cf;
---colar-cyan-6 : #15aabf;
---colar-cyan-7 : #1098ad;
---colar-cyan-8 : #0c8599;
---colar-cyan-9 : #0b7285;
---colar-cyan-10: #095c6b;
---colar-cyan-11: #074652;
---colar-cyan-12: #053038;
-
---colar-teal-0 : #e6fcf5;
---colar-teal-1 : #c3fae8;
---colar-teal-2 : #96f2d7;
---colar-teal-3 : #63e6be;
---colar-teal-4 : #38d9a9;
---colar-teal-5 : #20c997;
---colar-teal-6 : #12b886;
---colar-teal-7 : #0ca678;
---colar-teal-8 : #099268;
---colar-teal-9 : #087f5b;
---colar-teal-10: #066649;
---colar-teal-11: #054d37;
---colar-teal-12: #033325;
-
---colar-green-0 : #ebfbee;
---colar-green-1 : #d3f9d8;
---colar-green-2 : #b2f2bb;
---colar-green-3 : #8ce99a;
---colar-green-4 : #69db7c;
---colar-green-5 : #51cf66;
---colar-green-6 : #40c057;
---colar-green-7 : #37b24d;
---colar-green-8 : #2f9e44;
---colar-green-9 : #2b8a3e;
---colar-green-10: #237032;
---colar-green-11: #1b5727;
---colar-green-12: #133d1b;
-
---colar-lime-0 : #f4fce3;
---colar-lime-1 : #e9fac8;
---colar-lime-2 : #d8f5a2;
---colar-lime-3 : #c0eb75;
---colar-lime-4 : #a9e34b;
---colar-lime-5 : #94d82d;
---colar-lime-6 : #82c91e;
---colar-lime-7 : #74b816;
---colar-lime-8 : #66a80f;
---colar-lime-9 : #5c940d;
---colar-lime-10: #4c7a0b;
---colar-lime-11: #3c6109;
---colar-lime-12: #2c4706;
-
---colar-yellow-0 : #fff9db;
---colar-yellow-1 : #fff3bf;
---colar-yellow-2 : #ffec99;
---colar-yellow-3 : #ffe066;
---colar-yellow-4 : #ffd43b;
---colar-yellow-5 : #fcc419;
---colar-yellow-6 : #fab005;
---colar-yellow-7 : #f59f00;
---colar-yellow-8 : #f08c00;
---colar-yellow-9 : #e67700;
---colar-yellow-10: #b35c00;
---colar-yellow-11: #804200;
---colar-yellow-12: #663500;
-
---colar-orange-0 : #fff4e6;
---colar-orange-1 : #ffe8cc;
---colar-orange-2 : #ffd8a8;
---colar-orange-3 : #ffc078;
---colar-orange-4 : #ffa94d;
---colar-orange-5 : #ff922b;
---colar-orange-6 : #fd7e14;
---colar-orange-7 : #f76707;
---colar-orange-8 : #e8590c;
---colar-orange-9 : #d9480f;
---colar-orange-10: #bf400d;
---colar-orange-11: #99330b;
---colar-orange-12: #802b09;
-
---colar-choco-0 : #fff8dc;
---colar-choco-1 : #fce1bc;
---colar-choco-2 : #f7ca9e;
---colar-choco-3 : #f1b280;
---colar-choco-4 : #e99b62;
---colar-choco-5 : #df8545;
---colar-choco-6 : #d46e25;
---colar-choco-7 : #bd5f1b;
---colar-choco-8 : #a45117;
---colar-choco-9 : #8a4513;
---colar-choco-10: #703a13;
---colar-choco-11: #572f12;
---colar-choco-12: #3d210d;
-
---colar-brown-0 : #faf4eb;
---colar-brown-1 : #ede0d1;
---colar-brown-2 : #e0cab7;
---colar-brown-3 : #d3b79e;
---colar-brown-4 : #c5a285;
---colar-brown-5 : #b78f6d;
---colar-brown-6 : #a87c56;
---colar-brown-7 : #956b47;
---colar-brown-8 : #825b3a;
---colar-brown-9 : #6f4b2d;
---colar-brown-10: #5e3a21;
---colar-brown-11: #4e2b15;
---colar-brown-12: #422412;
-
---colar-sand-0 : #f8fafb;
---colar-sand-1 : #e6e4dc;
---colar-sand-2 : #d5cfbd;
---colar-sand-3 : #c2b9a0;
---colar-sand-4 : #aea58c;
---colar-sand-5 : #9a9178;
---colar-sand-6 : #867c65;
---colar-sand-7 : #736a53;
---colar-sand-8 : #5f5746;
---colar-sand-9 : #4b4639;
---colar-sand-10: #38352d;
---colar-sand-11: #252521;
---colar-sand-12: #121210;
-
---colar-camo-0 : #f9fbe7;
---colar-camo-1 : #e8ed9c;
---colar-camo-2 : #d2df4e;
---colar-camo-3 : #c2ce34;
---colar-camo-4 : #b5bb2e;
---colar-camo-5 : #a7a827;
---colar-camo-6 : #999621;
---colar-camo-7 : #8c851c;
---colar-camo-8 : #7e7416;
---colar-camo-9 : #6d6414;
---colar-camo-10: #5d5411;
---colar-camo-11: #4d460e;
---colar-camo-12: #36300a;
-
---colar-jungle-0 : #ecfeb0;
---colar-jungle-1 : #def39a;
---colar-jungle-2 : #d0e884;
---colar-jungle-3 : #c2dd6e;
---colar-jungle-4 : #b5d15b;
---colar-jungle-5 : #a8c648;
---colar-jungle-6 : #9bbb36;
---colar-jungle-7 : #8fb024;
---colar-jungle-8 : #84a513;
---colar-jungle-9 : #7a9908;
---colar-jungle-10: #658006;
---colar-jungle-11: #516605;
---colar-jungle-12: #3d4d04;
-}
-
-
-/* Nerd Font */
-/* nerdfont.com */
-/* nerdfont.com/cheatsheet */
-@import "https://octoshrimpy.github.io/microcss/nf.css";
-
-/*
-  iconYouWantGoesHere = class from cheatsheet
-
-  <span class='icon'>
-    <i class='nf-iconYouWantGoesHere'>
-  </span>
-
-*/
-
-/* pico-sensible */
-:root {
-  --form-spacing: calc(var(--spacing) / 2);
-  --form-input-max-length: 15;
-  --form-font-scale: 0.5;
-}
-
-/* max-width */
-input:not([type=checkbox],[type=radio]), 
-select, 
-textarea {
-  max-width: calc(var(--font-size) * var(--form-input-max-length));
-}
-
-/* spacing between elements */
-form > * {
-  font-size: var(--font-size);
-  margin-left: var(--form-spacing);
-  margin-right: var(--form-spacing);
-}
-form {
-  margin-left: calc(var(--form-spacing) * -1);
-  margin-right: calc(var(--form-spacing) * -1);
-}
-
-
-@media (min-width: 576px) {
-  form {
-    --font-size: 17px;
-  }
-}
-@media (min-width: 768px) {
-  form {
-    --font-size: 17px;
-  }
-}
-@media (min-width: 992px) {
-  form {
-    --font-size: 18px;
-  }
-}
-@media (min-width: 1200px) {
-  form {
-    --font-size: 18px;
-  }
-}
+/* micro bits and bobs */
+@import "https://cdn.jsdelivr.net/gh/octoshrimpy/microcss@main/nerdfonts.css";
+@import "https://cdn.jsdelivr.net/gh/octoshrimpy/microcss@main/mdl_shadows.css";
+@import "https://cdn.jsdelivr.net/gh/octoshrimpy/microcss@main/colar.css";
+@import "https://cdn.jsdelivr.net/gh/octoshrimpy/microcss@main/__sensible.css";
diff --git a/nerdfonts.css b/nerdfonts.css
new file mode 100644
index 0000000..861038b
--- /dev/null
+++ b/nerdfonts.css
@@ -0,0 +1,50 @@
+/* Nerd Font */
+/* nerdfont.com */
+/* nerdfont.com/cheatsheet */
+@import "https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@master/css/nerd-fonts-generated.min.css";
+
+
+
+/*
+  iconYouWantGoesHere = class from cheatsheet linked above
+
+  <span class='icon'>
+    <i class='nf-iconYouWantGoesHere'>
+  </span>
+
+*/
+
+
+
+
+@font-face {
+  font-family: 'NerdFontsSymbols Nerd Font';
+  /* @TODO you need to adjust the path to the font: */
+  src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@master/patched-fonts/NerdFontsSymbolsOnly/complete/Symbols-2048-em%20Nerd%20Font%20Complete%20Mono%20Windows%20Compatible.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon {
+  aspect-ratio: 1 / 1;
+/*   padding: 0.25rem; */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+
+i[class^="nf-"] {
+  font-family: 'NerdFontsSymbols Nerd Font';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering (from devicons, et al) */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: all 0.15s ease-in-out;
+  color: currentColor;
+}
\ No newline at end of file