src/utils.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


.airy     { --density: 3;  }
.spacious { --density: 2;  }
.dense    { --density: 1;  }
.crowded  { --density: .5; }
.packed   { --density: 0;  }

.autodensity {
    --density: 1;
    @media (min-width: 768px)  { --density: 2 }
    @media (min-width: 1024px) { --density: 3 }
}
.vh, v-h {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.all\:initial {
	all: initial;
}

.bold { font-weight: bold }
.italic {
	font-style: italic;
	& em, & cite, & dfn, & var, & i, & address {
		font-style: normal;
	}
}

.allcaps {
	text-transform: uppercase;
	letter-spacing: .1rem;
}


.primary-font { font-family: var(--primary-font) }
.secondary-font { font-family: var(--secondary-font) }
.display-font { font-family: var(--display-font) }
.mono-font, .monospace { font-family: var(--mono-font) }

.massivetext {
    font-size: calc(.13 * var(--eff-line-length));
	line-height: 1em;
    letter-spacing: 0;
}

.aestheticbreak {
    display: block;
    margin: 0;
    padding: 0;
    height: calc(.5 * var(--gap));
}