Skip to content

Commit 7f5be16

Browse files
octoshrimpyoctoshrimpy
committed
v 0.0.2
1 parent 508db85 commit 7f5be16

File tree

5 files changed

+377
-341
lines changed

5 files changed

+377
-341
lines changed

‎__sensible.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* pico-sensible */
2+
/* @todo add description of what this will achieve */
3+
:root {
4+
--form-spacing: calc(var(--spacing) / 2);
5+
--form-input-max-length: 15;
6+
--form-font-scale: 0.5;
7+
}
8+
9+
/* max-width */
10+
input:not([type=checkbox],[type=radio]),
11+
select,
12+
textarea {
13+
max-width: calc(var(--font-size) * var(--form-input-max-length));
14+
}
15+
16+
/* spacing between elements */
17+
form.__sensible > * {
18+
font-size: var(--font-size);
19+
margin-left: var(--form-spacing);
20+
margin-right: var(--form-spacing);
21+
}
22+
form.__sensible {
23+
margin-left: calc(var(--form-spacing) * -1);
24+
margin-right: calc(var(--form-spacing) * -1);
25+
}
26+
27+
28+
@media (min-width: 576px) {
29+
form.__sensible {
30+
--font-size: 17px;
31+
}
32+
}
33+
@media (min-width: 768px) {
34+
form.__sensible {
35+
--font-size: 17px;
36+
}
37+
}
38+
@media (min-width: 992px) {
39+
form.__sensible {
40+
--font-size: 18px;
41+
}
42+
}
43+
@media (min-width: 1200px) {
44+
form.__sensible {
45+
--font-size: 18px;
46+
}
47+
}

‎colar.css‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
/* Colar */
2+
/* https://github.com/fchristant/colar */
3+
/* https://ferdychristant.com/color-for-the-color-challenged-884c7aa04a56 */
4+
:root {
5+
--colar-gray-0 : #f8fafb;
6+
--colar-gray-1 : #f2f4f6;
7+
--colar-gray-2 : #ebedef;
8+
--colar-gray-3 : #e0e4e5;
9+
--colar-gray-4 : #d1d6d8;
10+
--colar-gray-5 : #b1b6b9;
11+
--colar-gray-6 : #979b9d;
12+
--colar-gray-7 : #7e8282;
13+
--colar-gray-8 : #666968;
14+
--colar-gray-9 : #50514f;
15+
--colar-gray-10: #3a3a37;
16+
--colar-gray-11: #252521;
17+
--colar-gray-12: #121210;
18+
19+
--colar-red-0 : #fff5f5;
20+
--colar-red-1 : #ffe3e3;
21+
--colar-red-2 : #ffc9c9;
22+
--colar-red-3 : #ffa8a8;
23+
--colar-red-4 : #ff8787;
24+
--colar-red-5 : #ff6b6b;
25+
--colar-red-6 : #fa5252;
26+
--colar-red-7 : #f03e3e;
27+
--colar-red-8 : #e03131;
28+
--colar-red-9 : #c92a2a;
29+
--colar-red-10: #b02525;
30+
--colar-red-11: #962020;
31+
--colar-red-12: #7d1a1a;
32+
33+
--colar-pink-0 : #fff0f6;
34+
--colar-pink-1 : #ffdeeb;
35+
--colar-pink-2 : #fcc2d7;
36+
--colar-pink-3 : #faa2c1;
37+
--colar-pink-4 : #f783ac;
38+
--colar-pink-5 : #f06595;
39+
--colar-pink-6 : #e64980;
40+
--colar-pink-7 : #d6336c;
41+
--colar-pink-8 : #c2255c;
42+
--colar-pink-9 : #a61e4d;
43+
--colar-pink-10: #8c1941;
44+
--colar-pink-11: #731536;
45+
--colar-pink-12: #59102a;
46+
47+
--colar-purple-0 : #f8f0fc;
48+
--colar-purple-1 : #f3d9fa;
49+
--colar-purple-2 : #eebefa;
50+
--colar-purple-3 : #e599f7;
51+
--colar-purple-4 : #da77f2;
52+
--colar-purple-5 : #cc5de8;
53+
--colar-purple-6 : #be4bdb;
54+
--colar-purple-7 : #ae3ec9;
55+
--colar-purple-8 : #9c36b5;
56+
--colar-purple-9 : #862e9c;
57+
--colar-purple-10: #702682;
58+
--colar-purple-11: #5a1e69;
59+
--colar-purple-12: #44174f;
60+
61+
--colar-violet-0 : #f3f0ff;
62+
--colar-violet-1 : #e5dbff;
63+
--colar-violet-2 : #d0bfff;
64+
--colar-violet-3 : #b197fc;
65+
--colar-violet-4 : #9775fa;
66+
--colar-violet-5 : #845ef7;
67+
--colar-violet-6 : #7950f2;
68+
--colar-violet-7 : #7048e8;
69+
--colar-violet-8 : #6741d9;
70+
--colar-violet-9 : #5f3dc4;
71+
--colar-violet-10: #5235ab;
72+
--colar-violet-11: #462d91;
73+
--colar-violet-12: #3a2578;
74+
75+
--colar-indigo-0 : #edf2ff;
76+
--colar-indigo-1 : #dbe4ff;
77+
--colar-indigo-2 : #bac8ff;
78+
--colar-indigo-3 : #91a7ff;
79+
--colar-indigo-4 : #748ffc;
80+
--colar-indigo-5 : #5c7cfa;
81+
--colar-indigo-6 : #4c6ef5;
82+
--colar-indigo-7 : #4263eb;
83+
--colar-indigo-8 : #3b5bdb;
84+
--colar-indigo-9 : #364fc7;
85+
--colar-indigo-10: #2f44ad;
86+
--colar-indigo-11: #283a94;
87+
--colar-indigo-12: #21307a;
88+
89+
--colar-blue-0 : #e7f5ff;
90+
--colar-blue-1 : #d0ebff;
91+
--colar-blue-2 : #a5d8ff;
92+
--colar-blue-3 : #74c0fc;
93+
--colar-blue-4 : #4dabf7;
94+
--colar-blue-5 : #339af0;
95+
--colar-blue-6 : #228be6;
96+
--colar-blue-7 : #1c7ed6;
97+
--colar-blue-8 : #1971c2;
98+
--colar-blue-9 : #1864ab;
99+
--colar-blue-10: #145591;
100+
--colar-blue-11: #114678;
101+
--colar-blue-12: #0d375e;
102+
103+
--colar-cyan-0 : #e3fafc;
104+
--colar-cyan-1 : #c5f6fa;
105+
--colar-cyan-2 : #99e9f2;
106+
--colar-cyan-3 : #66d9e8;
107+
--colar-cyan-4 : #3bc9db;
108+
--colar-cyan-5 : #22b8cf;
109+
--colar-cyan-6 : #15aabf;
110+
--colar-cyan-7 : #1098ad;
111+
--colar-cyan-8 : #0c8599;
112+
--colar-cyan-9 : #0b7285;
113+
--colar-cyan-10: #095c6b;
114+
--colar-cyan-11: #074652;
115+
--colar-cyan-12: #053038;
116+
117+
--colar-teal-0 : #e6fcf5;
118+
--colar-teal-1 : #c3fae8;
119+
--colar-teal-2 : #96f2d7;
120+
--colar-teal-3 : #63e6be;
121+
--colar-teal-4 : #38d9a9;
122+
--colar-teal-5 : #20c997;
123+
--colar-teal-6 : #12b886;
124+
--colar-teal-7 : #0ca678;
125+
--colar-teal-8 : #099268;
126+
--colar-teal-9 : #087f5b;
127+
--colar-teal-10: #066649;
128+
--colar-teal-11: #054d37;
129+
--colar-teal-12: #033325;
130+
131+
--colar-green-0 : #ebfbee;
132+
--colar-green-1 : #d3f9d8;
133+
--colar-green-2 : #b2f2bb;
134+
--colar-green-3 : #8ce99a;
135+
--colar-green-4 : #69db7c;
136+
--colar-green-5 : #51cf66;
137+
--colar-green-6 : #40c057;
138+
--colar-green-7 : #37b24d;
139+
--colar-green-8 : #2f9e44;
140+
--colar-green-9 : #2b8a3e;
141+
--colar-green-10: #237032;
142+
--colar-green-11: #1b5727;
143+
--colar-green-12: #133d1b;
144+
145+
--colar-lime-0 : #f4fce3;
146+
--colar-lime-1 : #e9fac8;
147+
--colar-lime-2 : #d8f5a2;
148+
--colar-lime-3 : #c0eb75;
149+
--colar-lime-4 : #a9e34b;
150+
--colar-lime-5 : #94d82d;
151+
--colar-lime-6 : #82c91e;
152+
--colar-lime-7 : #74b816;
153+
--colar-lime-8 : #66a80f;
154+
--colar-lime-9 : #5c940d;
155+
--colar-lime-10: #4c7a0b;
156+
--colar-lime-11: #3c6109;
157+
--colar-lime-12: #2c4706;
158+
159+
--colar-yellow-0 : #fff9db;
160+
--colar-yellow-1 : #fff3bf;
161+
--colar-yellow-2 : #ffec99;
162+
--colar-yellow-3 : #ffe066;
163+
--colar-yellow-4 : #ffd43b;
164+
--colar-yellow-5 : #fcc419;
165+
--colar-yellow-6 : #fab005;
166+
--colar-yellow-7 : #f59f00;
167+
--colar-yellow-8 : #f08c00;
168+
--colar-yellow-9 : #e67700;
169+
--colar-yellow-10: #b35c00;
170+
--colar-yellow-11: #804200;
171+
--colar-yellow-12: #663500;
172+
173+
--colar-orange-0 : #fff4e6;
174+
--colar-orange-1 : #ffe8cc;
175+
--colar-orange-2 : #ffd8a8;
176+
--colar-orange-3 : #ffc078;
177+
--colar-orange-4 : #ffa94d;
178+
--colar-orange-5 : #ff922b;
179+
--colar-orange-6 : #fd7e14;
180+
--colar-orange-7 : #f76707;
181+
--colar-orange-8 : #e8590c;
182+
--colar-orange-9 : #d9480f;
183+
--colar-orange-10: #bf400d;
184+
--colar-orange-11: #99330b;
185+
--colar-orange-12: #802b09;
186+
187+
--colar-choco-0 : #fff8dc;
188+
--colar-choco-1 : #fce1bc;
189+
--colar-choco-2 : #f7ca9e;
190+
--colar-choco-3 : #f1b280;
191+
--colar-choco-4 : #e99b62;
192+
--colar-choco-5 : #df8545;
193+
--colar-choco-6 : #d46e25;
194+
--colar-choco-7 : #bd5f1b;
195+
--colar-choco-8 : #a45117;
196+
--colar-choco-9 : #8a4513;
197+
--colar-choco-10: #703a13;
198+
--colar-choco-11: #572f12;
199+
--colar-choco-12: #3d210d;
200+
201+
--colar-brown-0 : #faf4eb;
202+
--colar-brown-1 : #ede0d1;
203+
--colar-brown-2 : #e0cab7;
204+
--colar-brown-3 : #d3b79e;
205+
--colar-brown-4 : #c5a285;
206+
--colar-brown-5 : #b78f6d;
207+
--colar-brown-6 : #a87c56;
208+
--colar-brown-7 : #956b47;
209+
--colar-brown-8 : #825b3a;
210+
--colar-brown-9 : #6f4b2d;
211+
--colar-brown-10: #5e3a21;
212+
--colar-brown-11: #4e2b15;
213+
--colar-brown-12: #422412;
214+
215+
--colar-sand-0 : #f8fafb;
216+
--colar-sand-1 : #e6e4dc;
217+
--colar-sand-2 : #d5cfbd;
218+
--colar-sand-3 : #c2b9a0;
219+
--colar-sand-4 : #aea58c;
220+
--colar-sand-5 : #9a9178;
221+
--colar-sand-6 : #867c65;
222+
--colar-sand-7 : #736a53;
223+
--colar-sand-8 : #5f5746;
224+
--colar-sand-9 : #4b4639;
225+
--colar-sand-10: #38352d;
226+
--colar-sand-11: #252521;
227+
--colar-sand-12: #121210;
228+
229+
--colar-camo-0 : #f9fbe7;
230+
--colar-camo-1 : #e8ed9c;
231+
--colar-camo-2 : #d2df4e;
232+
--colar-camo-3 : #c2ce34;
233+
--colar-camo-4 : #b5bb2e;
234+
--colar-camo-5 : #a7a827;
235+
--colar-camo-6 : #999621;
236+
--colar-camo-7 : #8c851c;
237+
--colar-camo-8 : #7e7416;
238+
--colar-camo-9 : #6d6414;
239+
--colar-camo-10: #5d5411;
240+
--colar-camo-11: #4d460e;
241+
--colar-camo-12: #36300a;
242+
243+
--colar-jungle-0 : #ecfeb0;
244+
--colar-jungle-1 : #def39a;
245+
--colar-jungle-2 : #d0e884;
246+
--colar-jungle-3 : #c2dd6e;
247+
--colar-jungle-4 : #b5d15b;
248+
--colar-jungle-5 : #a8c648;
249+
--colar-jungle-6 : #9bbb36;
250+
--colar-jungle-7 : #8fb024;
251+
--colar-jungle-8 : #84a513;
252+
--colar-jungle-9 : #7a9908;
253+
--colar-jungle-10: #658006;
254+
--colar-jungle-11: #516605;
255+
--colar-jungle-12: #3d4d04;
256+
}

‎mdl_shadows.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* MDL shadows */
2+
/* https://material.io/design/environment/elevation.html */
3+
:root {
4+
--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);
5+
6+
--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);
7+
--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);
8+
--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);
9+
--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);
10+
--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);
11+
--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);
12+
13+
--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);
14+
--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);
15+
--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);
16+
--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);
17+
--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);
18+
--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);
19+
}

0 commit comments

Comments
 (0)