a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/**
2 * List spacing and indentation
3 *
4 * Nested lists inherit spacing
5 */
6ul, ol {
7 margin-bottom: var(--space-lg);
8 padding-left: var(--space-xl);
9 max-width: var(--content-width);
10}
11
12/**
13 * List items
14 */
15li {
16 margin-bottom: var(--space-sm);
17}
18
19li::marker {
20 color: var(--color-accent);
21}
22
23/**
24 * Nested lists - Reduced spacing
25 */
26li > ul, li > ol {
27 margin-top: var(--space-sm);
28 margin-bottom: var(--space-sm);
29}
30
31/**
32 * Description lists - For key-value pairs
33 */
34dl {
35 margin-bottom: var(--space-lg);
36 max-width: var(--content-width);
37}
38
39dt {
40 font-weight: 700;
41 margin-top: var(--space-md);
42 margin-bottom: var(--space-xs);
43}
44
45dd {
46 margin-left: var(--space-xl);
47 margin-bottom: var(--space-sm);
48 color: var(--color-text-muted);
49}
50
51
52table {
53 width: 100%;
54 max-width: var(--content-width);
55 margin: var(--space-xl) 0;
56 border-collapse: collapse;
57 overflow-x: auto;
58 display: block;
59}
60
61thead {
62 background-color: var(--color-bg-alt);
63 border-bottom: 2px solid var(--color-border);
64}
65
66th {
67 padding: var(--space-sm) var(--space-md);
68 text-align: left;
69 font-weight: 700;
70 color: var(--color-text);
71}
72
73td {
74 padding: var(--space-sm) var(--space-md);
75 border-bottom: 1px solid var(--color-border);
76}
77
78tbody tr:nth-child(even) {
79 background-color: var(--color-bg-alt);
80}
81
82tbody tr:hover {
83 background-color: var(--color-border);
84 transition: background-color var(--transition-fast);
85}