tombl.dev
a post-component library for building user-interfaces on the web.
1@import '../../../reset.css';
2
3:root {
4 --hue: 180;
5 --lightness: 95%;
6
7 --bg-0: hsl(var(--hue), 25%, 90%);
8 --bg-1: hsl(var(--hue), 25%, 85%);
9 --bg-2: hsl(var(--hue), 25%, 50%);
10
11 --fg-0: hsla(var(--hue), 100%, 15%, 20%);
12 --fg-1: hsla(var(--hue), 100%, 10%, 20%);
13 --fg-2: hsla(var(--hue), 100%, 5%, 20%);
14
15 @media (prefers-color-scheme: dark) {
16 --bg-0: hsl(var(--hue), 25%, 15%);
17 --bg-1: hsl(var(--hue), 25%, 10%);
18 --bg-2: hsl(var(--hue), 25%, 5%);
19
20 --fg-0: hsla(var(--hue), 100%, 90%, 20%);
21 --fg-1: hsla(var(--hue), 100%, 85%, 20%);
22 --fg-2: hsla(var(--hue), 100%, 50%, 20%);
23 }
24}
25
26body {
27 background-color: var(--bg-2);
28}
29
30main {
31 padding: 1rem;
32}
33
34h1,
35h2,
36h3 {
37 font-weight: normal;
38 font-size: 1rem;
39}
40
41input,
42textarea,
43button {
44 background-color: var(--bg-1);
45 border: 2px solid var(--bg-2);
46 border-radius: 4px;
47}
48
49[data-route='/boards'] {
50}
51
52[data-route='/boards/:id'] {
53 h1 {
54 font-size: 1.5rem;
55 margin-bottom: 1rem;
56 }
57
58 .columns {
59 display: flex;
60 gap: 1rem;
61 flex-direction: row;
62 list-style-type: none;
63 padding: 0;
64 align-items: flex-start;
65
66 .column {
67 display: flex;
68 flex-direction: column;
69 gap: 0.5rem;
70 background-color: var(--bg-1);
71 border-radius: 1rem;
72 padding: 0.5rem;
73 box-shadow: 0 1px 2px var(--fg-1);
74 border: 1px solid var(--fg-1);
75
76 header {
77 padding: 0.25rem;
78 display: flex;
79 button {
80 border: none;
81 }
82 }
83
84 .cards {
85 display: flex;
86 flex-direction: column;
87 list-style-type: none;
88 gap: 0.2rem;
89 padding: 0;
90
91 .card {
92 background-color: var(--bg-0);
93 border-radius: 0.5rem;
94 box-shadow: 0 1px 2px var(--fg-1);
95 border: 1px solid var(--fg-1);
96
97 input {
98 padding: 0.5rem;
99 width: 100%;
100 }
101 }
102 }
103
104 footer {
105 display: flex;
106 button {
107 flex: 1;
108 border: none;
109 border-radius: 0.5rem;
110 padding: 0.5rem;
111 }
112 }
113 }
114 }
115}