unit.gl 0.0.29 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/unit.gl.css +288 -271
- package/css/unit.gl.min.css +1 -1
- package/package.json +1 -1
- package/scss/_global.scss +3 -1
- package/scss/_reset.scss +2 -1
- package/scss/classes/_index.scss +17 -0
- package/scss/classes/_paper.scss +97 -0
- package/scss/{math/_math_arithmetic.scss → functions/_arithmetic.scss} +1 -1
- package/scss/functions/_index.scss +13 -0
- package/scss/{math/_math_ratio.scss → functions/_ratio.scss} +1 -1
- package/scss/{math/_math_scale.scss → functions/_scale.scss} +1 -1
- package/scss/{math/_math_sequence.scss → functions/_sequence.scss} +1 -1
- package/scss/index.scss +6 -19
- package/scss/mixins/_device.scss +42 -0
- package/scss/{display/_display_orientation.scss → mixins/_display.scss} +9 -13
- package/scss/{_guide.scss → mixins/_guide.scss} +3 -1
- package/scss/{_helper.scss → mixins/_helper.scss} +2 -4
- package/scss/mixins/_index.scss +23 -0
- package/scss/mixins/_paper.scss +35 -0
- package/scss/mixins/_ratio.scss +171 -0
- package/scss/mixins/_view.scss +79 -0
- package/scss/{display → variables}/_device.scss +5 -31
- package/scss/variables/_index.scss +32 -0
- package/scss/{_layer.scss → variables/_layer.scss} +1 -2
- package/scss/{_paper.scss → variables/_paper.scss} +3 -109
- package/scss/{_scale.scss → variables/_scale.scss} +4 -14
- package/scss/{_unit.scss → variables/_unit.scss} +3 -1
- package/scss/{_unit_conversion.scss → variables/_unit_conversion.scss} +1 -1
- package/scss/{_unit_functions.scss → variables/_unit_functions.scss} +14 -0
- package/scss/{_view.scss → variables/_view.scss} +2 -61
- package/scss/_ratio.scss +0 -97
package/css/unit.gl.css
CHANGED
|
@@ -9,276 +9,6 @@
|
|
|
9
9
|
* @repository https://github.com/scape-agency/unit.gl/
|
|
10
10
|
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
11
11
|
*/
|
|
12
|
-
*,
|
|
13
|
-
a,
|
|
14
|
-
abbr,
|
|
15
|
-
acronym,
|
|
16
|
-
address,
|
|
17
|
-
applet,
|
|
18
|
-
area,
|
|
19
|
-
article,
|
|
20
|
-
aside,
|
|
21
|
-
audio,
|
|
22
|
-
b,
|
|
23
|
-
base,
|
|
24
|
-
basefont,
|
|
25
|
-
bb,
|
|
26
|
-
bdo,
|
|
27
|
-
big,
|
|
28
|
-
blockquote,
|
|
29
|
-
body,
|
|
30
|
-
br,
|
|
31
|
-
button,
|
|
32
|
-
canvas,
|
|
33
|
-
caption,
|
|
34
|
-
center,
|
|
35
|
-
cite,
|
|
36
|
-
code,
|
|
37
|
-
col,
|
|
38
|
-
colgroup,
|
|
39
|
-
command,
|
|
40
|
-
datalist,
|
|
41
|
-
dd,
|
|
42
|
-
del,
|
|
43
|
-
details,
|
|
44
|
-
dfn,
|
|
45
|
-
dialog,
|
|
46
|
-
dir,
|
|
47
|
-
div,
|
|
48
|
-
dl,
|
|
49
|
-
dt,
|
|
50
|
-
em,
|
|
51
|
-
embed,
|
|
52
|
-
eventsource,
|
|
53
|
-
fieldset,
|
|
54
|
-
figcaption,
|
|
55
|
-
figure,
|
|
56
|
-
font,
|
|
57
|
-
footer,
|
|
58
|
-
form,
|
|
59
|
-
frame,
|
|
60
|
-
frameset,
|
|
61
|
-
h1,
|
|
62
|
-
h2,
|
|
63
|
-
h3,
|
|
64
|
-
h4,
|
|
65
|
-
h5,
|
|
66
|
-
h6,
|
|
67
|
-
head,
|
|
68
|
-
header,
|
|
69
|
-
hgroup,
|
|
70
|
-
hr,
|
|
71
|
-
html,
|
|
72
|
-
i,
|
|
73
|
-
iframe,
|
|
74
|
-
img,
|
|
75
|
-
input,
|
|
76
|
-
ins,
|
|
77
|
-
isindex,
|
|
78
|
-
kbd,
|
|
79
|
-
keygen,
|
|
80
|
-
label,
|
|
81
|
-
legend,
|
|
82
|
-
li,
|
|
83
|
-
link,
|
|
84
|
-
map,
|
|
85
|
-
mark,
|
|
86
|
-
menu,
|
|
87
|
-
meta,
|
|
88
|
-
meter,
|
|
89
|
-
nav,
|
|
90
|
-
noframes,
|
|
91
|
-
noscript,
|
|
92
|
-
object,
|
|
93
|
-
ol,
|
|
94
|
-
optgroup,
|
|
95
|
-
option,
|
|
96
|
-
output,
|
|
97
|
-
p,
|
|
98
|
-
param,
|
|
99
|
-
pre,
|
|
100
|
-
progress,
|
|
101
|
-
q,
|
|
102
|
-
rp,
|
|
103
|
-
rt,
|
|
104
|
-
ruby,
|
|
105
|
-
s,
|
|
106
|
-
samp,
|
|
107
|
-
script,
|
|
108
|
-
section,
|
|
109
|
-
select,
|
|
110
|
-
small,
|
|
111
|
-
source,
|
|
112
|
-
span,
|
|
113
|
-
strike,
|
|
114
|
-
strong,
|
|
115
|
-
style,
|
|
116
|
-
sub,
|
|
117
|
-
sup,
|
|
118
|
-
table,
|
|
119
|
-
tbody,
|
|
120
|
-
td,
|
|
121
|
-
textarea,
|
|
122
|
-
tfoot,
|
|
123
|
-
th,
|
|
124
|
-
thead,
|
|
125
|
-
time,
|
|
126
|
-
title,
|
|
127
|
-
tr,
|
|
128
|
-
track,
|
|
129
|
-
tt,
|
|
130
|
-
u,
|
|
131
|
-
ul,
|
|
132
|
-
var,
|
|
133
|
-
video,
|
|
134
|
-
wbr {
|
|
135
|
-
margin: 0;
|
|
136
|
-
-webkit-margin-before: 0;
|
|
137
|
-
margin-block-start: 0;
|
|
138
|
-
-webkit-margin-after: 0;
|
|
139
|
-
margin-block-end: 0;
|
|
140
|
-
-webkit-margin-start: 0;
|
|
141
|
-
margin-inline-start: 0;
|
|
142
|
-
-webkit-margin-end: 0;
|
|
143
|
-
margin-inline-end: 0;
|
|
144
|
-
padding: 0;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
html {
|
|
148
|
-
box-sizing: border-box;
|
|
149
|
-
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
|
|
150
|
-
word-break: normal;
|
|
151
|
-
-moz-tab-size: 4;
|
|
152
|
-
-o-tab-size: 4;
|
|
153
|
-
tab-size: 4;
|
|
154
|
-
height: 100%;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
body {
|
|
158
|
-
min-height: 100%;
|
|
159
|
-
margin: 0;
|
|
160
|
-
position: absolute;
|
|
161
|
-
height: 100vh;
|
|
162
|
-
width: 100vw;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
html, body {
|
|
166
|
-
height: 100%;
|
|
167
|
-
margin: 0;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
*,
|
|
171
|
-
::before,
|
|
172
|
-
::after {
|
|
173
|
-
background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
|
|
174
|
-
box-sizing: inherit;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
::before,
|
|
178
|
-
::after {
|
|
179
|
-
text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
|
|
180
|
-
vertical-align: inherit;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
* {
|
|
184
|
-
padding: 0; /* Reset `padding` and `margin` of all elements */
|
|
185
|
-
margin: 0;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.paper.ansi_a {
|
|
189
|
-
width: 8.5in;
|
|
190
|
-
height: 11in;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.paper.q0 {
|
|
194
|
-
width: 720mm;
|
|
195
|
-
height: 1080mm;
|
|
196
|
-
}
|
|
197
|
-
.paper.q1 {
|
|
198
|
-
width: 540mm;
|
|
199
|
-
height: 720mm;
|
|
200
|
-
}
|
|
201
|
-
.paper.q2 {
|
|
202
|
-
width: 360mm;
|
|
203
|
-
height: 540mm;
|
|
204
|
-
}
|
|
205
|
-
.paper.q3 {
|
|
206
|
-
width: 270mm;
|
|
207
|
-
height: 360mm;
|
|
208
|
-
}
|
|
209
|
-
.paper.q4 {
|
|
210
|
-
width: 180mm;
|
|
211
|
-
height: 270mm;
|
|
212
|
-
}
|
|
213
|
-
.paper.q5 {
|
|
214
|
-
width: 135mm;
|
|
215
|
-
height: 180mm;
|
|
216
|
-
}
|
|
217
|
-
.paper.q6 {
|
|
218
|
-
width: 90mm;
|
|
219
|
-
height: 135mm;
|
|
220
|
-
}
|
|
221
|
-
.paper.q7 {
|
|
222
|
-
width: 62.5mm;
|
|
223
|
-
height: 90mm;
|
|
224
|
-
}
|
|
225
|
-
.paper.q8 {
|
|
226
|
-
width: 45mm;
|
|
227
|
-
height: 62.5mm;
|
|
228
|
-
}
|
|
229
|
-
.paper.q9 {
|
|
230
|
-
width: 31.25mm;
|
|
231
|
-
height: 45mm;
|
|
232
|
-
}
|
|
233
|
-
.paper.q10 {
|
|
234
|
-
width: 22.5mm;
|
|
235
|
-
height: 31.25mm;
|
|
236
|
-
}
|
|
237
|
-
.paper.iso_a0 {
|
|
238
|
-
width: 841mm;
|
|
239
|
-
height: 1189mm;
|
|
240
|
-
}
|
|
241
|
-
.paper.iso_a1 {
|
|
242
|
-
width: 594mm;
|
|
243
|
-
height: 841mm;
|
|
244
|
-
}
|
|
245
|
-
.paper.iso_a2 {
|
|
246
|
-
width: 420mm;
|
|
247
|
-
height: 594mm;
|
|
248
|
-
}
|
|
249
|
-
.paper.iso_a3 {
|
|
250
|
-
width: 297mm;
|
|
251
|
-
height: 420mm;
|
|
252
|
-
}
|
|
253
|
-
.paper.iso_a4 {
|
|
254
|
-
width: 210mm;
|
|
255
|
-
height: 297mm;
|
|
256
|
-
}
|
|
257
|
-
.paper.iso_a5 {
|
|
258
|
-
width: 148mm;
|
|
259
|
-
height: 210mm;
|
|
260
|
-
}
|
|
261
|
-
.paper.iso_a6 {
|
|
262
|
-
width: 105mm;
|
|
263
|
-
height: 148mm;
|
|
264
|
-
}
|
|
265
|
-
.paper.iso_a7 {
|
|
266
|
-
width: 74mm;
|
|
267
|
-
height: 105mm;
|
|
268
|
-
}
|
|
269
|
-
.paper.iso_a8 {
|
|
270
|
-
width: 52mm;
|
|
271
|
-
height: 74mm;
|
|
272
|
-
}
|
|
273
|
-
.paper.iso_a9 {
|
|
274
|
-
width: 37mm;
|
|
275
|
-
height: 52mm;
|
|
276
|
-
}
|
|
277
|
-
.paper.iso_a10 {
|
|
278
|
-
width: 26mm;
|
|
279
|
-
height: 37mm;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
12
|
:root {
|
|
283
13
|
--q: $q;
|
|
284
14
|
}
|
|
@@ -288,7 +18,7 @@ html {
|
|
|
288
18
|
}
|
|
289
19
|
@media screen and (min-width: 320px) {
|
|
290
20
|
html {
|
|
291
|
-
font-size: calc(12px +
|
|
21
|
+
font-size: calc(12px + unit_strip(12px) * (100vw - 320px) / unit_strip(1120px));
|
|
292
22
|
}
|
|
293
23
|
}
|
|
294
24
|
@media screen and (min-width: 1440px) {
|
|
@@ -297,6 +27,39 @@ html {
|
|
|
297
27
|
}
|
|
298
28
|
}
|
|
299
29
|
|
|
30
|
+
/**
|
|
31
|
+
* unit.gl
|
|
32
|
+
*
|
|
33
|
+
* @description Layout Engine
|
|
34
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
35
|
+
* @version v1.0.0
|
|
36
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
37
|
+
* @website https://www.unit.gl/
|
|
38
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
39
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
40
|
+
*/
|
|
41
|
+
/**
|
|
42
|
+
* unit.gl
|
|
43
|
+
*
|
|
44
|
+
* @description Layout Engine
|
|
45
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
46
|
+
* @version v1.0.0
|
|
47
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
48
|
+
* @website https://www.unit.gl/
|
|
49
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
50
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
51
|
+
*/
|
|
52
|
+
/**
|
|
53
|
+
* unit.gl
|
|
54
|
+
*
|
|
55
|
+
* @description Layout Engine
|
|
56
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
57
|
+
* @version v1.0.0
|
|
58
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
59
|
+
* @website https://www.unit.gl/
|
|
60
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
61
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
62
|
+
*/
|
|
300
63
|
.ratio_1x1 {
|
|
301
64
|
aspect-ratio: 1;
|
|
302
65
|
width: 100%;
|
|
@@ -505,6 +268,39 @@ html {
|
|
|
505
268
|
display: inline-block;
|
|
506
269
|
}
|
|
507
270
|
|
|
271
|
+
/**
|
|
272
|
+
* unit.gl
|
|
273
|
+
*
|
|
274
|
+
* @description Layout Engine
|
|
275
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
276
|
+
* @version v1.0.0
|
|
277
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
278
|
+
* @website https://www.unit.gl/
|
|
279
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
280
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
281
|
+
*/
|
|
282
|
+
/**
|
|
283
|
+
* unit.gl
|
|
284
|
+
*
|
|
285
|
+
* @description Layout Engine
|
|
286
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
287
|
+
* @version v1.0.0
|
|
288
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
289
|
+
* @website https://www.unit.gl/
|
|
290
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
291
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
292
|
+
*/
|
|
293
|
+
/**
|
|
294
|
+
* unit.gl
|
|
295
|
+
*
|
|
296
|
+
* @description Layout Engine
|
|
297
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
298
|
+
* @version v1.0.0
|
|
299
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
300
|
+
* @website https://www.unit.gl/
|
|
301
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
302
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
303
|
+
*/
|
|
508
304
|
.guide {
|
|
509
305
|
position: absolute;
|
|
510
306
|
top: 0;
|
|
@@ -541,4 +337,225 @@ html {
|
|
|
541
337
|
background-size: 100% 1.5rem;
|
|
542
338
|
background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
|
|
543
339
|
}
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* unit.gl
|
|
343
|
+
*
|
|
344
|
+
* @description Layout Engine
|
|
345
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
346
|
+
* @version v1.0.0
|
|
347
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
348
|
+
* @website https://www.unit.gl/
|
|
349
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
350
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
351
|
+
*/
|
|
352
|
+
/**
|
|
353
|
+
* unit.gl
|
|
354
|
+
*
|
|
355
|
+
* @description Layout Engine
|
|
356
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
357
|
+
* @version v1.0.0
|
|
358
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
359
|
+
* @website https://www.unit.gl/
|
|
360
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
361
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
362
|
+
*/
|
|
363
|
+
*,
|
|
364
|
+
a,
|
|
365
|
+
abbr,
|
|
366
|
+
acronym,
|
|
367
|
+
address,
|
|
368
|
+
applet,
|
|
369
|
+
area,
|
|
370
|
+
article,
|
|
371
|
+
aside,
|
|
372
|
+
audio,
|
|
373
|
+
b,
|
|
374
|
+
base,
|
|
375
|
+
basefont,
|
|
376
|
+
bb,
|
|
377
|
+
bdo,
|
|
378
|
+
big,
|
|
379
|
+
blockquote,
|
|
380
|
+
body,
|
|
381
|
+
br,
|
|
382
|
+
button,
|
|
383
|
+
canvas,
|
|
384
|
+
caption,
|
|
385
|
+
center,
|
|
386
|
+
cite,
|
|
387
|
+
code,
|
|
388
|
+
col,
|
|
389
|
+
colgroup,
|
|
390
|
+
command,
|
|
391
|
+
datalist,
|
|
392
|
+
dd,
|
|
393
|
+
del,
|
|
394
|
+
details,
|
|
395
|
+
dfn,
|
|
396
|
+
dialog,
|
|
397
|
+
dir,
|
|
398
|
+
div,
|
|
399
|
+
dl,
|
|
400
|
+
dt,
|
|
401
|
+
em,
|
|
402
|
+
embed,
|
|
403
|
+
eventsource,
|
|
404
|
+
fieldset,
|
|
405
|
+
figcaption,
|
|
406
|
+
figure,
|
|
407
|
+
font,
|
|
408
|
+
footer,
|
|
409
|
+
form,
|
|
410
|
+
frame,
|
|
411
|
+
frameset,
|
|
412
|
+
h1,
|
|
413
|
+
h2,
|
|
414
|
+
h3,
|
|
415
|
+
h4,
|
|
416
|
+
h5,
|
|
417
|
+
h6,
|
|
418
|
+
head,
|
|
419
|
+
header,
|
|
420
|
+
hgroup,
|
|
421
|
+
hr,
|
|
422
|
+
html,
|
|
423
|
+
i,
|
|
424
|
+
iframe,
|
|
425
|
+
img,
|
|
426
|
+
input,
|
|
427
|
+
ins,
|
|
428
|
+
isindex,
|
|
429
|
+
kbd,
|
|
430
|
+
keygen,
|
|
431
|
+
label,
|
|
432
|
+
legend,
|
|
433
|
+
li,
|
|
434
|
+
link,
|
|
435
|
+
map,
|
|
436
|
+
mark,
|
|
437
|
+
menu,
|
|
438
|
+
meta,
|
|
439
|
+
meter,
|
|
440
|
+
nav,
|
|
441
|
+
noframes,
|
|
442
|
+
noscript,
|
|
443
|
+
object,
|
|
444
|
+
ol,
|
|
445
|
+
optgroup,
|
|
446
|
+
option,
|
|
447
|
+
output,
|
|
448
|
+
p,
|
|
449
|
+
param,
|
|
450
|
+
pre,
|
|
451
|
+
progress,
|
|
452
|
+
q,
|
|
453
|
+
rp,
|
|
454
|
+
rt,
|
|
455
|
+
ruby,
|
|
456
|
+
s,
|
|
457
|
+
samp,
|
|
458
|
+
script,
|
|
459
|
+
section,
|
|
460
|
+
select,
|
|
461
|
+
small,
|
|
462
|
+
source,
|
|
463
|
+
span,
|
|
464
|
+
strike,
|
|
465
|
+
strong,
|
|
466
|
+
style,
|
|
467
|
+
sub,
|
|
468
|
+
sup,
|
|
469
|
+
table,
|
|
470
|
+
tbody,
|
|
471
|
+
td,
|
|
472
|
+
textarea,
|
|
473
|
+
tfoot,
|
|
474
|
+
th,
|
|
475
|
+
thead,
|
|
476
|
+
time,
|
|
477
|
+
title,
|
|
478
|
+
tr,
|
|
479
|
+
track,
|
|
480
|
+
tt,
|
|
481
|
+
u,
|
|
482
|
+
ul,
|
|
483
|
+
var,
|
|
484
|
+
video,
|
|
485
|
+
wbr {
|
|
486
|
+
margin: 0;
|
|
487
|
+
-webkit-margin-before: 0;
|
|
488
|
+
margin-block-start: 0;
|
|
489
|
+
-webkit-margin-after: 0;
|
|
490
|
+
margin-block-end: 0;
|
|
491
|
+
-webkit-margin-start: 0;
|
|
492
|
+
margin-inline-start: 0;
|
|
493
|
+
-webkit-margin-end: 0;
|
|
494
|
+
margin-inline-end: 0;
|
|
495
|
+
padding: 0;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
/**
|
|
499
|
+
* unit.gl
|
|
500
|
+
*
|
|
501
|
+
* @description Layout Engine
|
|
502
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
503
|
+
* @version v1.0.0
|
|
504
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
505
|
+
* @website https://www.unit.gl/
|
|
506
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
507
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
508
|
+
*/
|
|
509
|
+
html {
|
|
510
|
+
box-sizing: border-box;
|
|
511
|
+
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
|
|
512
|
+
word-break: normal;
|
|
513
|
+
-moz-tab-size: 4;
|
|
514
|
+
-o-tab-size: 4;
|
|
515
|
+
tab-size: 4;
|
|
516
|
+
height: 100%;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
body {
|
|
520
|
+
min-height: 100%;
|
|
521
|
+
margin: 0;
|
|
522
|
+
position: absolute;
|
|
523
|
+
height: 100vh;
|
|
524
|
+
width: 100vw;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
html, body {
|
|
528
|
+
height: 100%;
|
|
529
|
+
margin: 0;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
*,
|
|
533
|
+
::before,
|
|
534
|
+
::after {
|
|
535
|
+
background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
|
|
536
|
+
box-sizing: inherit;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
::before,
|
|
540
|
+
::after {
|
|
541
|
+
text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
|
|
542
|
+
vertical-align: inherit;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
* {
|
|
546
|
+
padding: 0; /* Reset `padding` and `margin` of all elements */
|
|
547
|
+
margin: 0;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/**
|
|
551
|
+
* unit.gl
|
|
552
|
+
*
|
|
553
|
+
* @description Layout Engine
|
|
554
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
555
|
+
* @version v1.0.0
|
|
556
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
557
|
+
* @website https://www.unit.gl/
|
|
558
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
559
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
560
|
+
*/
|
|
544
561
|
/*# sourceMappingURL=to.css.map */
|
package/css/unit.gl.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
:root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(12px + unit_strip(12px)*(100vw - 320px)/unit_strip(1120px))}}@media screen and (min-width:1440px){html{font-size:24px}}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
|
|
2
2
|
/*# sourceMappingURL=to.css.map */
|
package/package.json
CHANGED
package/scss/_global.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright
|
|
1
|
+
// Copyright 2024 Scape Agency BV
|
|
2
2
|
|
|
3
3
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
4
|
// you may not use this file except in compliance with the License.
|
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
// limitations under the License.
|
|
14
14
|
|
|
15
15
|
|
|
16
|
+
@use "variables" as *;
|
|
17
|
+
|
|
16
18
|
// Base | Body
|
|
17
19
|
// ============================================================================
|
|
18
20
|
|
package/scss/_reset.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright
|
|
1
|
+
// Copyright 2024 Scape Agency BV
|
|
2
2
|
|
|
3
3
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
4
|
// you may not use this file except in compliance with the License.
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
// See the License for the specific language governing permissions and
|
|
13
13
|
// limitations under the License.
|
|
14
14
|
|
|
15
|
+
@use "variables" as *;
|
|
15
16
|
|
|
16
17
|
// ============================================================================
|
|
17
18
|
// Base | Reset
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Copyright 2024 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
@forward "paper";
|