- commit
- 78eb71e
- parent
- 423bfb5
- author
- Eric Bower
- date
- 2024-03-19 19:53:13 +0000 UTC
chore: update smol.css
1 files changed,
+183,
-37
+183,
-37
1@@ -19,19 +19,21 @@
2 :root {
3 --main-hue: 250;
4 --white: #6a737d;
5- --code: #fff8d3;
6- --code-border: #f0d547;
7+ --white-light: #cfe0f4;
8+ --white-dark: #9b9b9b;
9+ --code: #e3e5e8;
10+ --code-border: #e3e5e8;
11 --pre: #f6f8fa;
12- --bg-color: #fff;
13+ --bg-color: #fdfdfd;
14 --text-color: #24292f;
15 --link-color: #005cc5;
16 --visited: #6f42c1;
17 --blockquote: #005cc5;
18- --blockquote-bg: #fff;
19+ --blockquote-bg: #cfe0f4;
20 --hover: #d73a49;
21 --grey: #ccc;
22 --grey-light: #6a708e;
23- --shadow: #252525;
24+ --shadow: #e8e8e8;
25 }
26 }
27
28@@ -39,6 +41,8 @@
29 :root {
30 --main-hue: 250;
31 --white: #f2f2f2;
32+ --white-light: #f2f2f2;
33+ --white-dark: #c6c6c6;
34 --code: #414558;
35 --code-border: #252525;
36 --pre: #252525;
37@@ -65,6 +69,7 @@ html {
38 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
39 -webkit-text-size-adjust: 100%;
40 -moz-tab-size: 4;
41+ -o-tab-size: 4;
42 tab-size: 4;
43 }
44
45@@ -157,7 +162,7 @@ hr {
46 color: inherit;
47 border: 0;
48 margin: 0;
49- height: 1px;
50+ height: 2px;
51 background: var(--grey);
52 margin: 1rem auto;
53 text-align: center;
54@@ -217,6 +222,10 @@ blockquote > p {
55 margin: 0;
56 }
57
58+blockquote code {
59+ border: 1px solid var(--blockquote);
60+}
61+
62 ul,
63 ol {
64 padding: 0 0 0 2rem;
65@@ -257,7 +266,12 @@ figure {
66 }
67
68 .container {
69- max-width: 900px;
70+ max-width: 50em;
71+ width: 100%;
72+}
73+
74+.container-sm {
75+ max-width: 40em;
76 width: 100%;
77 }
78
79@@ -268,12 +282,56 @@ figure {
80 justify-content: center;
81 }
82
83+.mono {
84+ font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
85+ monospace;
86+}
87+
88+.link-alt-adj,
89+.link-alt-adj:visited,
90+.link-alt-adj:visited:hover,
91+.link-alt-adj:hover {
92+ color: var(--link-color);
93+ text-decoration: none;
94+}
95+
96+.link-alt-adj:visited:hover,
97+.link-alt-adj:hover {
98+ text-decoration: underline;
99+}
100+
101+.link-alt-hover,
102+.link-alt-hover:visited,
103+.link-alt-hover:visited:hover,
104+.link-alt-hover:hover {
105+ color: var(--hover);
106+ text-decoration: none;
107+}
108+
109+.link-alt-hover:visited:hover,
110+.link-alt-hover:hover {
111+ text-decoration: underline;
112+}
113+
114+.link-alt,
115+.link-alt:visited,
116+.link-alt:visited:hover,
117+.link-alt:hover {
118+ color: var(--white);
119+ text-decoration: none;
120+}
121+
122+.link-alt:visited:hover,
123+.link-alt:hover {
124+ text-decoration: underline;
125+}
126+
127 .text-3xl {
128- font-size: 3rem;
129+ font-size: 2.5rem;
130 }
131
132 .text-2xl {
133- font-size: 1.85rem;
134+ font-size: 1.9rem;
135 line-height: 1.15;
136 }
137
138@@ -296,6 +354,30 @@ figure {
139 font-size: 0.875rem;
140 }
141
142+.text-xs {
143+ font-size: 0.775rem;
144+}
145+
146+.cursor-pointer {
147+ cursor: pointer;
148+}
149+
150+.w-full {
151+ width: 100%;
152+}
153+
154+.h-full {
155+ height: 100%;
156+}
157+
158+.border {
159+ border: 2px solid var(--grey-light);
160+}
161+
162+.text-left {
163+ text-align: left;
164+}
165+
166 .text-center {
167 text-align: center;
168 }
169@@ -305,6 +387,15 @@ figure {
170 padding-bottom: 3px;
171 }
172
173+.text-hdr {
174+ color: var(--hover);
175+}
176+
177+.text-underline-hdr {
178+ border-bottom: 3px solid var(--hover);
179+ padding-bottom: 3px;
180+}
181+
182 .font-bold {
183 font-weight: bold;
184 }
185@@ -325,6 +416,14 @@ figure {
186 max-width: 50%;
187 }
188
189+.h-screen {
190+ height: 100vh;
191+}
192+
193+.w-screen {
194+ width: 100vw;
195+}
196+
197 .flex {
198 display: flex;
199 }
200@@ -419,6 +518,14 @@ figure {
201 margin-right: 1rem;
202 }
203
204+.m-1 {
205+ margin: 0.5rem;
206+}
207+
208+.p-1 {
209+ padding: 0.5rem;
210+}
211+
212 .p-0 {
213 padding: 0;
214 }
215@@ -499,11 +606,54 @@ figure {
216 text-align: right;
217 }
218
219+/* ==== MARKDOWN ==== */
220+
221+.md h1,
222+.md h2,
223+.md h3,
224+.md h4 {
225+ padding: 0;
226+ margin: 1.5rem 0 0.9rem 0;
227+ font-weight: bold;
228+}
229+
230+.md h1 a,
231+.md h2 a,
232+.md h3 a,
233+.md h4 a {
234+ color: var(--grey-light);
235+ text-decoration: none;
236+}
237+
238+.md h1 {
239+ font-size: 1.6rem;
240+ line-height: 1.15;
241+ border-bottom: 2px solid var(--grey);
242+ padding-bottom: 1rem;
243+}
244+
245+.md h2 {
246+ font-size: 1.3rem;
247+ line-height: 1.15;
248+ color: var(--white-dark);
249+}
250+
251+.md h3 {
252+ font-size: 1.2rem;
253+ color: var(--white-dark);
254+}
255+
256+.md h4 {
257+ font-size: 1rem;
258+ color: var(--white-dark);
259+}
260+
261 /* ==== HELPERS ==== */
262
263 .logo-header {
264 line-height: 1;
265 display: inline-block;
266+ background-color: #FF79C6;
267 background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
268 color: transparent;
269 background-clip: text;
270@@ -511,50 +661,46 @@ figure {
271 padding: 8px 10px 10px 10px;
272 border-radius: 10px;
273 box-shadow: 0px 5px 0px 0px var(--shadow);
274+ background-size: 100%;
275+ -webkit-background-clip: text;
276+ -moz-background-clip: text;
277+ -webkit-text-fill-color: transparent;
278+ -moz-text-fill-color: transparent;
279 }
280
281-.btn-icon {
282- border: 3px solid hsl(var(--main-hue), 92%, 66%);
283- background-color: hsl(var(--main-hue), 92%, 66%);
284- padding: 0.25rem 0.3rem;
285- border-radius: 0.25rem;
286- box-shadow: 0px 5px 0px 0px var(--shadow);
287- color: var(--white);
288- cursor: pointer;
289+.btn {
290+ border: 2px solid var(--link-color);
291+ color: var(--link-color);
292+ padding: 0.4rem 1rem;
293+ font-weight: bold;
294+ display: inline-block;
295 }
296
297-.btn-link {
298- border: 3px solid hsl(var(--main-hue), 92%, 66%);
299- background-color: hsl(var(--main-hue), 92%, 66%);
300- padding: 0.5rem 1rem;
301- border-radius: 0.25rem;
302- box-shadow: 0px 5px 0px 0px var(--shadow);
303- color: var(--white);
304+.btn-link:hover {
305+ border: 2px solid var(--hover);
306+}
307+
308+.btn-link,
309+.btn-link:visited {
310+ border: 2px solid var(--link-color);
311+ color: var(--link-color);
312+ padding: 0.4rem 1rem;
313 text-decoration: none;
314 font-weight: bold;
315+ display: inline-block;
316 }
317
318 .btn-link:visited:hover,
319 .btn-link:hover {
320- border: 3px solid hsl(260, 92%, 66%);
321- background-color: hsl(260, 92%, 66%);
322- color: var(--white);
323- transform: scale(.98, .98);
324-}
325-
326-.btn-link:visited {
327- color: var(--white);
328+ border: 2px solid var(--hover);
329 }
330
331 .box {
332 border: 2px solid var(--grey-light);
333- padding: 1rem;
334- text-decoration: none;
335- box-shadow: 0px 5px 0px 0px var(--shadow);
336- color: var(--white);
337+ padding: 0.5rem 0.75rem;
338 }
339
340-@media only screen and (max-width: 600px) {
341+@media only screen and (max-width: 40em) {
342 body {
343 padding: 0 1rem;
344 }