the best lightweight web dev stack built on bun
1@import url("./buttons.css");
2@import url("./header.css");
3
4:root {
5 /* Color palette */
6 --gunmetal: #2d3142ff;
7 --paynes-gray: #4f5d75ff;
8 --silver: #bfc0c0ff;
9 --white: #ffffffff;
10 --off-white: #fcf6f1;
11 --coral: #ef8354ff;
12 --success-green: #16a34a;
13
14 /* Semantic color assignments */
15 --text: var(--gunmetal);
16 --background: var(--off-white);
17 --primary: var(--paynes-gray);
18 --secondary: var(--silver);
19 --accent: var(--coral);
20 --success: var(--success-green);
21}
22
23body {
24 font-family: "Charter", "Bitstream Charter", "Sitka Text", Cambria, serif;
25 font-weight: 400;
26 margin: 0;
27 padding: 2rem;
28 line-height: 1.6;
29 background: var(--background);
30 color: var(--text);
31}
32
33h1,
34h2,
35h3,
36h4,
37h5 {
38 font-family: "Charter", "Bitstream Charter", "Sitka Text", Cambria, serif;
39 font-weight: 600;
40 line-height: 1.2;
41 color: var(--text);
42}
43
44html {
45 font-size: 100%;
46}
47
48h1 {
49 font-size: 4.21rem;
50 margin-top: 0;
51}
52
53h2 {
54 font-size: 3.158rem;
55}
56
57h3 {
58 font-size: 2.369rem;
59}
60
61h4 {
62 font-size: 1.777rem;
63}
64
65h5 {
66 font-size: 1.333rem;
67}
68
69small {
70 font-size: 0.75rem;
71}
72
73main {
74 margin: 0 auto;
75 max-width: 48rem;
76}