Commit 78eb71e

Eric Bower  ·  2024-03-19 15:53:13 -0400 EDT
parent 423bfb5 
chore: update smol.css
1 files changed,  +183, -37
M static/smol.css
M static/smol.css
+183, -37
......@@ -19,19 +19,21 @@
1919 :root {
2020 --main-hue: 250;
2121 --white: #6a737d;
22- --code: #fff8d3;
23- --code-border: #f0d547;
22+ --white-light: #cfe0f4;
23+ --white-dark: #9b9b9b;
24+ --code: #e3e5e8;
25+ --code-border: #e3e5e8;
2426 --pre: #f6f8fa;
25- --bg-color: #fff;
27+ --bg-color: #fdfdfd;
2628 --text-color: #24292f;
2729 --link-color: #005cc5;
2830 --visited: #6f42c1;
2931 --blockquote: #005cc5;
30- --blockquote-bg: #fff;
32+ --blockquote-bg: #cfe0f4;
3133 --hover: #d73a49;
3234 --grey: #ccc;
3335 --grey-light: #6a708e;
34- --shadow: #252525;
36+ --shadow: #e8e8e8;
3537 }
3638 }
3739
......@@ -39,6 +41,8 @@
3941 :root {
4042 --main-hue: 250;
4143 --white: #f2f2f2;
44+ --white-light: #f2f2f2;
45+ --white-dark: #c6c6c6;
4246 --code: #414558;
4347 --code-border: #252525;
4448 --pre: #252525;
......@@ -65,6 +69,7 @@ html {
6569 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
6670 -webkit-text-size-adjust: 100%;
6771 -moz-tab-size: 4;
72+ -o-tab-size: 4;
6873 tab-size: 4;
6974 }
7075
......@@ -157,7 +162,7 @@ hr {
157162 color: inherit;
158163 border: 0;
159164 margin: 0;
160- height: 1px;
165+ height: 2px;
161166 background: var(--grey);
162167 margin: 1rem auto;
163168 text-align: center;
......@@ -217,6 +222,10 @@ blockquote > p {
217222 margin: 0;
218223 }
219224
225+blockquote code {
226+ border: 1px solid var(--blockquote);
227+}
228+
220229 ul,
221230 ol {
222231 padding: 0 0 0 2rem;
......@@ -257,7 +266,12 @@ figure {
257266 }
258267
259268 .container {
260- max-width: 900px;
269+ max-width: 50em;
270+ width: 100%;
271+}
272+
273+.container-sm {
274+ max-width: 40em;
261275 width: 100%;
262276 }
263277
......@@ -268,12 +282,56 @@ figure {
268282 justify-content: center;
269283 }
270284
285+.mono {
286+ font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
287+ monospace;
288+}
289+
290+.link-alt-adj,
291+.link-alt-adj:visited,
292+.link-alt-adj:visited:hover,
293+.link-alt-adj:hover {
294+ color: var(--link-color);
295+ text-decoration: none;
296+}
297+
298+.link-alt-adj:visited:hover,
299+.link-alt-adj:hover {
300+ text-decoration: underline;
301+}
302+
303+.link-alt-hover,
304+.link-alt-hover:visited,
305+.link-alt-hover:visited:hover,
306+.link-alt-hover:hover {
307+ color: var(--hover);
308+ text-decoration: none;
309+}
310+
311+.link-alt-hover:visited:hover,
312+.link-alt-hover:hover {
313+ text-decoration: underline;
314+}
315+
316+.link-alt,
317+.link-alt:visited,
318+.link-alt:visited:hover,
319+.link-alt:hover {
320+ color: var(--white);
321+ text-decoration: none;
322+}
323+
324+.link-alt:visited:hover,
325+.link-alt:hover {
326+ text-decoration: underline;
327+}
328+
271329 .text-3xl {
272- font-size: 3rem;
330+ font-size: 2.5rem;
273331 }
274332
275333 .text-2xl {
276- font-size: 1.85rem;
334+ font-size: 1.9rem;
277335 line-height: 1.15;
278336 }
279337
......@@ -296,6 +354,30 @@ figure {
296354 font-size: 0.875rem;
297355 }
298356
357+.text-xs {
358+ font-size: 0.775rem;
359+}
360+
361+.cursor-pointer {
362+ cursor: pointer;
363+}
364+
365+.w-full {
366+ width: 100%;
367+}
368+
369+.h-full {
370+ height: 100%;
371+}
372+
373+.border {
374+ border: 2px solid var(--grey-light);
375+}
376+
377+.text-left {
378+ text-align: left;
379+}
380+
299381 .text-center {
300382 text-align: center;
301383 }
......@@ -305,6 +387,15 @@ figure {
305387 padding-bottom: 3px;
306388 }
307389
390+.text-hdr {
391+ color: var(--hover);
392+}
393+
394+.text-underline-hdr {
395+ border-bottom: 3px solid var(--hover);
396+ padding-bottom: 3px;
397+}
398+
308399 .font-bold {
309400 font-weight: bold;
310401 }
......@@ -325,6 +416,14 @@ figure {
325416 max-width: 50%;
326417 }
327418
419+.h-screen {
420+ height: 100vh;
421+}
422+
423+.w-screen {
424+ width: 100vw;
425+}
426+
328427 .flex {
329428 display: flex;
330429 }
......@@ -419,6 +518,14 @@ figure {
419518 margin-right: 1rem;
420519 }
421520
521+.m-1 {
522+ margin: 0.5rem;
523+}
524+
525+.p-1 {
526+ padding: 0.5rem;
527+}
528+
422529 .p-0 {
423530 padding: 0;
424531 }
......@@ -499,11 +606,54 @@ figure {
499606 text-align: right;
500607 }
501608
609+/* ==== MARKDOWN ==== */
610+
611+.md h1,
612+.md h2,
613+.md h3,
614+.md h4 {
615+ padding: 0;
616+ margin: 1.5rem 0 0.9rem 0;
617+ font-weight: bold;
618+}
619+
620+.md h1 a,
621+.md h2 a,
622+.md h3 a,
623+.md h4 a {
624+ color: var(--grey-light);
625+ text-decoration: none;
626+}
627+
628+.md h1 {
629+ font-size: 1.6rem;
630+ line-height: 1.15;
631+ border-bottom: 2px solid var(--grey);
632+ padding-bottom: 1rem;
633+}
634+
635+.md h2 {
636+ font-size: 1.3rem;
637+ line-height: 1.15;
638+ color: var(--white-dark);
639+}
640+
641+.md h3 {
642+ font-size: 1.2rem;
643+ color: var(--white-dark);
644+}
645+
646+.md h4 {
647+ font-size: 1rem;
648+ color: var(--white-dark);
649+}
650+
502651 /* ==== HELPERS ==== */
503652
504653 .logo-header {
505654 line-height: 1;
506655 display: inline-block;
656+ background-color: #FF79C6;
507657 background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
508658 color: transparent;
509659 background-clip: text;
......@@ -511,50 +661,46 @@ figure {
511661 padding: 8px 10px 10px 10px;
512662 border-radius: 10px;
513663 box-shadow: 0px 5px 0px 0px var(--shadow);
664+ background-size: 100%;
665+ -webkit-background-clip: text;
666+ -moz-background-clip: text;
667+ -webkit-text-fill-color: transparent;
668+ -moz-text-fill-color: transparent;
514669 }
515670
516-.btn-icon {
517- border: 3px solid hsl(var(--main-hue), 92%, 66%);
518- background-color: hsl(var(--main-hue), 92%, 66%);
519- padding: 0.25rem 0.3rem;
520- border-radius: 0.25rem;
521- box-shadow: 0px 5px 0px 0px var(--shadow);
522- color: var(--white);
523- cursor: pointer;
671+.btn {
672+ border: 2px solid var(--link-color);
673+ color: var(--link-color);
674+ padding: 0.4rem 1rem;
675+ font-weight: bold;
676+ display: inline-block;
524677 }
525678
526-.btn-link {
527- border: 3px solid hsl(var(--main-hue), 92%, 66%);
528- background-color: hsl(var(--main-hue), 92%, 66%);
529- padding: 0.5rem 1rem;
530- border-radius: 0.25rem;
531- box-shadow: 0px 5px 0px 0px var(--shadow);
532- color: var(--white);
679+.btn-link:hover {
680+ border: 2px solid var(--hover);
681+}
682+
683+.btn-link,
684+.btn-link:visited {
685+ border: 2px solid var(--link-color);
686+ color: var(--link-color);
687+ padding: 0.4rem 1rem;
533688 text-decoration: none;
534689 font-weight: bold;
690+ display: inline-block;
535691 }
536692
537693 .btn-link:visited:hover,
538694 .btn-link:hover {
539- border: 3px solid hsl(260, 92%, 66%);
540- background-color: hsl(260, 92%, 66%);
541- color: var(--white);
542- transform: scale(.98, .98);
543-}
544-
545-.btn-link:visited {
546- color: var(--white);
695+ border: 2px solid var(--hover);
547696 }
548697
549698 .box {
550699 border: 2px solid var(--grey-light);
551- padding: 1rem;
552- text-decoration: none;
553- box-shadow: 0px 5px 0px 0px var(--shadow);
554- color: var(--white);
700+ padding: 0.5rem 0.75rem;
555701 }
556702
557-@media only screen and (max-width: 600px) {
703+@media only screen and (max-width: 40em) {
558704 body {
559705 padding: 0 1rem;
560706 }