Experiment to rebuild Diffuse using web applets.
1@import "../variables.css";
2
3:root {
4 font-family: "Inter", sans-serif;
5 font-size: var(--fs-base);
6
7 /* Colors */
8 --palm-leaf: #32472b;
9 --mana-tree: #4c7541;
10 --beyond-the-pines: #6c824a;
11 --rural-green: #89854f;
12 --wasteland: #a18a5a;
13 --incense: #ac9b7d;
14}
15
16@supports (font-variation-settings: normal) {
17 :root {
18 font-family: "InterVariable", sans-serif;
19 font-feature-settings:
20 "ss03" 2,
21 "ss02" 2;
22 font-optical-sizing: auto;
23 }
24}
25
26body {
27 background: var(--palm-leaf);
28 color: var(--incense);
29}
30
31header,
32main {
33 margin: var(--space-md) var(--space-lg);
34}
35
36main {
37 display: flex;
38 flex-wrap: wrap;
39 gap: 0 var(--space-3xl);
40}
41
42main > section {
43 /* flex: 1; */
44 min-width: min(var(--container-xs), 100%);
45 width: 32.5%;
46}
47
48a {
49 color: inherit;
50 text-underline-offset: 6px;
51}
52
53h1 svg {
54 fill: oklch(from var(--palm-leaf) calc(l + 0.125) c h);
55}
56
57h2 {
58 color: var(--beyond-the-pines);
59 font-size: var(--fs-xl);
60 font-weight: 900;
61 line-height: 1;
62 margin: var(--space-2xl) 0 var(--space-md);
63 text-transform: uppercase;
64}
65
66h3 {
67 font-size: var(--fs-md);
68 font-weight: 800;
69 line-height: 1;
70 margin: var(--space-xl) 0 var(--space-sm);
71 text-transform: uppercase;
72}
73
74h2 + h3 {
75 margin-top: var(--space-md);
76}
77
78ul,
79ol {
80 padding-left: var(--space-md);
81}
82
83p,
84ul,
85ol {
86 margin: var(--space-sm) 0;
87 max-width: var(--container-sm);
88}