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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
/// based on Raster v20 (release package) (rsms.me/raster)
u-grid {
--grid-tc: repeat(4, 1fr);
--grid-ce: -1;
--grid-cs: 1;
display: grid;
grid-column-gap: var(--column-gap);
grid-row-gap: var(--row-gap);
grid-template-columns: var(--grid-tc);
&.compact { grid-row-gap: 0; }
&.debug {
> * {
--color: rgba(248, 110, 91, 0.3);
background-image: linear-gradient(180deg, var(--color) 0, var(--color));
}
> :nth-child(6n+2) {
--color: rgba(103, 126, 208, 0.3);
}
> :nth-child(6n+3) {
--color: rgba(224, 174, 72, 0.3);
}
> :nth-child(6n+4) {
--color: rgba(77, 214, 115, 0.3);
}
> :nth-child(6n+5) {
--color: rgba(217, 103, 219, 0.3);
}
> :nth-child(6n+6) {
--color: rgba(94, 204, 211, 0.3);
}
> :nth-child(6n+7) {
--color: rgba(248, 110, 91, 0.3);
}
}
> hr { grid-column: 1 / -1; }
> hr,
> hr:not(:first-child):not(:last-child) {
margin-top: calc(var(--line-height) - var(--hr-thickness));
margin-bottom: 0;
}
> u-cell {
appearance: none;
display: block;
&[span] { grid-column-end: span var(--grid-ce); }
&[span*="+"], &[span*="-"], &[span*=".."] { grid-column-start: var(--grid-cs); }
&[span*="-"], &[span*=".."] { grid-column-end: var(--grid-ce); }
&[span=row] { grid-column: var(--grid-cs) / var(--grid-ce); }
&[span^="1"] { --grid-cs: 1; }
&[span^="2"] { --grid-cs: 2; }
&[span^="3"] { --grid-cs: 3; }
&[span^="4"] { --grid-cs: 4; }
&[span^="5"] { --grid-cs: 5; }
&[span^="6"] { --grid-cs: 6; }
&[span^="7"] { --grid-cs: 7; }
&[span^="8"] { --grid-cs: 8; }
&[span^="9"] { --grid-cs: 9; }
&[span^="10"] { --grid-cs: 10; }
&[span^="11"] { --grid-cs: 11; }
&[span^="12"] { --grid-cs: 12; }
&[span^="13"] { --grid-cs: 13; }
&[span^="14"] { --grid-cs: 14; }
&[span^="15"] { --grid-cs: 15; }
&[span^="16"] { --grid-cs: 16; }
&[span^="17"] { --grid-cs: 17; }
&[span^="18"] { --grid-cs: 18; }
&[span^="19"] { --grid-cs: 19; }
&[span^="20"] { --grid-cs: 20; }
&[span^="21"] { --grid-cs: 21; }
&[span^="22"] { --grid-cs: 22; }
&[span^="23"] { --grid-cs: 23; }
&[span^="24"] { --grid-cs: 24; }
&[span^="25"] { --grid-cs: 25; }
&[span^="26"] { --grid-cs: 26; }
&[span^="27"] { --grid-cs: 27; }
&[span^="28"] { --grid-cs: 28; }
&[span^="29"] { --grid-cs: 29; }
&[span^="30"] { --grid-cs: 30; }
&[span$="+1"], &[span="1"] { --grid-ce: 1; }
&[span$="+2"], &[span$="-1"], &[span="2"] { --grid-ce: 2; }
&[span$="+3"], &[span$="-2"], &[span="3"] { --grid-ce: 3; }
&[span$="+4"], &[span$="-3"], &[span="4"] { --grid-ce: 4; }
&[span$="+5"], &[span$="-4"], &[span="5"] { --grid-ce: 5; }
&[span$="+6"], &[span$="-5"], &[span="6"] { --grid-ce: 6; }
&[span$="+7"], &[span$="-6"], &[span="7"] { --grid-ce: 7; }
&[span$="+8"], &[span$="-7"], &[span="8"] { --grid-ce: 8; }
&[span$="+9"], &[span$="-8"], &[span="9"] { --grid-ce: 9; }
&[span$="+10"], &[span$="-9"], &[span="10"] { --grid-ce: 10; }
&[span$="+11"], &[span$="-10"], &[span="11"] { --grid-ce: 11; }
&[span$="+12"], &[span$="-11"], &[span="12"] { --grid-ce: 12; }
&[span$="+13"], &[span$="-12"], &[span="13"] { --grid-ce: 13; }
&[span$="+14"], &[span$="-13"], &[span="14"] { --grid-ce: 14; }
&[span$="+15"], &[span$="-14"], &[span="15"] { --grid-ce: 15; }
&[span$="+16"], &[span$="-15"], &[span="16"] { --grid-ce: 16; }
&[span$="+17"], &[span$="-16"], &[span="17"] { --grid-ce: 17; }
&[span$="+18"], &[span$="-17"], &[span="18"] { --grid-ce: 18; }
&[span$="+19"], &[span$="-18"], &[span="19"] { --grid-ce: 19; }
&[span$="+20"], &[span$="-19"], &[span="20"] { --grid-ce: 20; }
&[span$="+21"], &[span$="-20"], &[span="21"] { --grid-ce: 21; }
&[span$="+22"], &[span$="-21"], &[span="22"] { --grid-ce: 22; }
&[span$="+23"], &[span$="-22"], &[span="23"] { --grid-ce: 23; }
&[span$="+24"], &[span$="-23"], &[span="24"] { --grid-ce: 24; }
&[span$="+25"], &[span$="-24"], &[span="25"] { --grid-ce: 25; }
&[span$="+26"], &[span$="-25"], &[span="26"] { --grid-ce: 26; }
&[span$="+27"], &[span$="-26"], &[span="27"] { --grid-ce: 27; }
&[span$="+28"], &[span$="-27"], &[span="28"] { --grid-ce: 28; }
&[span$="+29"], &[span$="-28"], &[span="29"] { --grid-ce: 29; }
&[span$="+30"], &[span$="-29"], &[span="30"] { --grid-ce: 30; }
&[span$="-30"] { --grid-ce: 31; }
&.h1, &.h2, &.h3, &.h4, &.h5, &.h6 { margin-bottom: 0; }
> img,
> p > img {
max-width: 100%;
object-fit: contain;
}
}
&[columns="1"] { --grid-tc: repeat(1, 1fr); }
&[columns="2"] { --grid-tc: repeat(2, 1fr); }
&[columns="3"] { --grid-tc: repeat(3, 1fr); }
&[columns="4"] { --grid-tc: repeat(4, 1fr); }
&[columns="5"] { --grid-tc: repeat(5, 1fr); }
&[columns="6"] { --grid-tc: repeat(6, 1fr); }
&[columns="7"] { --grid-tc: repeat(7, 1fr); }
&[columns="8"] { --grid-tc: repeat(8, 1fr); }
&[columns="9"] { --grid-tc: repeat(9, 1fr); }
&[columns="10"] { --grid-tc: repeat(10, 1fr); }
&[columns="11"] { --grid-tc: repeat(11, 1fr); }
&[columns="12"] { --grid-tc: repeat(12, 1fr); }
&[columns="13"] { --grid-tc: repeat(13, 1fr); }
&[columns="14"] { --grid-tc: repeat(14, 1fr); }
&[columns="15"] { --grid-tc: repeat(15, 1fr); }
&[columns="16"] { --grid-tc: repeat(16, 1fr); }
&[columns="17"] { --grid-tc: repeat(17, 1fr); }
&[columns="18"] { --grid-tc: repeat(18, 1fr); }
&[columns="19"] { --grid-tc: repeat(19, 1fr); }
&[columns="20"] { --grid-tc: repeat(20, 1fr); }
&[columns="21"] { --grid-tc: repeat(21, 1fr); }
&[columns="22"] { --grid-tc: repeat(22, 1fr); }
&[columns="23"] { --grid-tc: repeat(23, 1fr); }
&[columns="24"] { --grid-tc: repeat(24, 1fr); }
&[columns="25"] { --grid-tc: repeat(25, 1fr); }
&[columns="26"] { --grid-tc: repeat(26, 1fr); }
&[columns="27"] { --grid-tc: repeat(27, 1fr); }
&[columns="28"] { --grid-tc: repeat(28, 1fr); }
&[columns="29"] { --grid-tc: repeat(29, 1fr); }
&[columns="30"] { --grid-tc: repeat(30, 1fr); }
}
[flow-cols] {
column-fill: balance;
column-gap: var(--column-gap);
}
[flow-cols="1"] { column-count: 1; }
[flow-cols="2"] { column-count: 2; }
[flow-cols="3"] { column-count: 3; }
[flow-cols="4"] { column-count: 4; }
[flow-cols="5"] { column-count: 5; }
[flow-cols="6"] { column-count: 6; }
[flow-cols="7"] { column-count: 7; }
[flow-cols="8"] { column-count: 8; }
|
