unit.gl 0.0.28 → 0.0.30
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 +345 -105
- package/css/unit.gl.min.css +1 -1
- package/package.json +2 -1
- package/scss/_global.scss +3 -1
- package/scss/_guide.scss +3 -1
- package/scss/_helper.scss +2 -4
- package/scss/_reset.scss +2 -1
- package/scss/classes/_index.scss +17 -0
- package/scss/classes/_paper.scss +97 -0
- package/scss/display/_device.scss +4 -3
- package/scss/display/_display_orientation.scss +3 -5
- package/scss/display/_index.scss +13 -0
- package/scss/guides/_index.scss +13 -0
- package/scss/index.scss +10 -16
- package/scss/math/{_math_arithmetic.scss → _arithmetic.scss} +1 -1
- package/scss/math/_index.scss +13 -0
- package/scss/math/{_math_ratio.scss → _ratio.scss} +1 -1
- package/scss/math/{_math_scale.scss → _scale.scss} +1 -1
- package/scss/math/{_math_sequence.scss → _sequence.scss} +1 -1
- package/scss/mixins/_index.scss +19 -0
- package/scss/mixins/_paper.scss +35 -0
- package/scss/mixins/_ratio.scss +171 -0
- package/scss/mixins/_view.scss +79 -0
- package/scss/variables/_index.scss +24 -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} +6 -129
- package/scss/{_unit.scss → variables/_unit.scss} +3 -5
- 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
|
@@ -1,3 +1,273 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* unit.gl
|
|
3
|
+
*
|
|
4
|
+
* @description Layout Engine
|
|
5
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
6
|
+
* @version v1.0.0
|
|
7
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
8
|
+
* @website https://www.unit.gl/
|
|
9
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
10
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
11
|
+
*/
|
|
12
|
+
:root {
|
|
13
|
+
--q: $q;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
html {
|
|
17
|
+
font-size: 12px;
|
|
18
|
+
}
|
|
19
|
+
@media screen and (min-width: 320px) {
|
|
20
|
+
html {
|
|
21
|
+
font-size: calc(12px + unit_strip(12px) * (100vw - 320px) / unit_strip(1120px));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
@media screen and (min-width: 1440px) {
|
|
25
|
+
html {
|
|
26
|
+
font-size: 24px;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
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
|
+
*/
|
|
63
|
+
.ratio_1x1 {
|
|
64
|
+
aspect-ratio: 1;
|
|
65
|
+
width: 100%;
|
|
66
|
+
position: relative;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
display: inline-block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.ratio_1x2 {
|
|
72
|
+
aspect-ratio: 0.5;
|
|
73
|
+
width: 100%;
|
|
74
|
+
position: relative;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
display: inline-block;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.ratio_2x1 {
|
|
80
|
+
aspect-ratio: 2;
|
|
81
|
+
width: 100%;
|
|
82
|
+
position: relative;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
display: inline-block;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ratio_1x3 {
|
|
88
|
+
aspect-ratio: 0.3333333333;
|
|
89
|
+
width: 100%;
|
|
90
|
+
position: relative;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
display: inline-block;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ratio_3x1 {
|
|
96
|
+
aspect-ratio: 3;
|
|
97
|
+
width: 100%;
|
|
98
|
+
position: relative;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
display: inline-block;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ratio_1x4 {
|
|
104
|
+
aspect-ratio: 0.25;
|
|
105
|
+
width: 100%;
|
|
106
|
+
position: relative;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
display: inline-block;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.ratio_4x1 {
|
|
112
|
+
aspect-ratio: 4;
|
|
113
|
+
width: 100%;
|
|
114
|
+
position: relative;
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
display: inline-block;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.ratio_3x2 {
|
|
120
|
+
aspect-ratio: 1.5;
|
|
121
|
+
width: 100%;
|
|
122
|
+
position: relative;
|
|
123
|
+
overflow: hidden;
|
|
124
|
+
display: inline-block;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.ratio_2x3 {
|
|
128
|
+
aspect-ratio: 0.6666666667;
|
|
129
|
+
width: 100%;
|
|
130
|
+
position: relative;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
display: inline-block;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ratio_4x3 {
|
|
136
|
+
aspect-ratio: 1.3333333333;
|
|
137
|
+
width: 100%;
|
|
138
|
+
position: relative;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
display: inline-block;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.ratio_3x4 {
|
|
144
|
+
aspect-ratio: 0.75;
|
|
145
|
+
width: 100%;
|
|
146
|
+
position: relative;
|
|
147
|
+
overflow: hidden;
|
|
148
|
+
display: inline-block;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.ratio_16x9 {
|
|
152
|
+
aspect-ratio: 1.7777777778;
|
|
153
|
+
width: 100%;
|
|
154
|
+
position: relative;
|
|
155
|
+
overflow: hidden;
|
|
156
|
+
display: inline-block;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.ratio_16x10 {
|
|
160
|
+
aspect-ratio: 1.6;
|
|
161
|
+
width: 100%;
|
|
162
|
+
position: relative;
|
|
163
|
+
overflow: hidden;
|
|
164
|
+
display: inline-block;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.ratio_p_1x1 {
|
|
168
|
+
padding-bottom: 100%;
|
|
169
|
+
width: 100%;
|
|
170
|
+
position: relative;
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
display: inline-block;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.ratio_p_1x2 {
|
|
176
|
+
padding-bottom: 200%;
|
|
177
|
+
width: 100%;
|
|
178
|
+
position: relative;
|
|
179
|
+
overflow: hidden;
|
|
180
|
+
display: inline-block;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.ratio_p_2x1 {
|
|
184
|
+
padding-bottom: 50%;
|
|
185
|
+
width: 100%;
|
|
186
|
+
position: relative;
|
|
187
|
+
overflow: hidden;
|
|
188
|
+
display: inline-block;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.ratio_p_1x3 {
|
|
192
|
+
padding-bottom: 300%;
|
|
193
|
+
width: 100%;
|
|
194
|
+
position: relative;
|
|
195
|
+
overflow: hidden;
|
|
196
|
+
display: inline-block;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.ratio_p_3x1 {
|
|
200
|
+
padding-bottom: 33.33%;
|
|
201
|
+
width: 100%;
|
|
202
|
+
position: relative;
|
|
203
|
+
overflow: hidden;
|
|
204
|
+
display: inline-block;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.ratio_p_1x4 {
|
|
208
|
+
padding-bottom: 400%;
|
|
209
|
+
width: 100%;
|
|
210
|
+
position: relative;
|
|
211
|
+
overflow: hidden;
|
|
212
|
+
display: inline-block;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.ratio_p_4x1 {
|
|
216
|
+
padding-bottom: 25%;
|
|
217
|
+
width: 100%;
|
|
218
|
+
position: relative;
|
|
219
|
+
overflow: hidden;
|
|
220
|
+
display: inline-block;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.ratio_p_3x2 {
|
|
224
|
+
padding-bottom: 66.67%;
|
|
225
|
+
width: 100%;
|
|
226
|
+
position: relative;
|
|
227
|
+
overflow: hidden;
|
|
228
|
+
display: inline-block;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.ratio_p_2x3 {
|
|
232
|
+
padding-bottom: 150%;
|
|
233
|
+
width: 100%;
|
|
234
|
+
position: relative;
|
|
235
|
+
overflow: hidden;
|
|
236
|
+
display: inline-block;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.ratio_p_4x3 {
|
|
240
|
+
padding-bottom: 75%;
|
|
241
|
+
width: 100%;
|
|
242
|
+
position: relative;
|
|
243
|
+
overflow: hidden;
|
|
244
|
+
display: inline-block;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.ratio_p_3x4 {
|
|
248
|
+
padding-bottom: 133.33%;
|
|
249
|
+
width: 100%;
|
|
250
|
+
position: relative;
|
|
251
|
+
overflow: hidden;
|
|
252
|
+
display: inline-block;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.ratio_p_16x9 {
|
|
256
|
+
padding-bottom: 56.25%;
|
|
257
|
+
width: 100%;
|
|
258
|
+
position: relative;
|
|
259
|
+
overflow: hidden;
|
|
260
|
+
display: inline-block;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.ratio_p_16x10 {
|
|
264
|
+
padding-bottom: 62.5%;
|
|
265
|
+
width: 100%;
|
|
266
|
+
position: relative;
|
|
267
|
+
overflow: hidden;
|
|
268
|
+
display: inline-block;
|
|
269
|
+
}
|
|
270
|
+
|
|
1
271
|
/**
|
|
2
272
|
* unit.gl
|
|
3
273
|
*
|
|
@@ -144,6 +414,17 @@ wbr {
|
|
|
144
414
|
padding: 0;
|
|
145
415
|
}
|
|
146
416
|
|
|
417
|
+
/**
|
|
418
|
+
* unit.gl
|
|
419
|
+
*
|
|
420
|
+
* @description Layout Engine
|
|
421
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
422
|
+
* @version v1.0.0
|
|
423
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
424
|
+
* @website https://www.unit.gl/
|
|
425
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
426
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
427
|
+
*/
|
|
147
428
|
html {
|
|
148
429
|
box-sizing: border-box;
|
|
149
430
|
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
|
|
@@ -185,115 +466,74 @@ html, body {
|
|
|
185
466
|
margin: 0;
|
|
186
467
|
}
|
|
187
468
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
469
|
+
/**
|
|
470
|
+
* unit.gl
|
|
471
|
+
*
|
|
472
|
+
* @description Layout Engine
|
|
473
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
474
|
+
* @version v1.0.0
|
|
475
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
476
|
+
* @website https://www.unit.gl/
|
|
477
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
478
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
479
|
+
*/
|
|
480
|
+
/**
|
|
481
|
+
* unit.gl
|
|
482
|
+
*
|
|
483
|
+
* @description Layout Engine
|
|
484
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
485
|
+
* @version v1.0.0
|
|
486
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
487
|
+
* @website https://www.unit.gl/
|
|
488
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
489
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
490
|
+
*/
|
|
491
|
+
.guide {
|
|
492
|
+
position: absolute;
|
|
493
|
+
top: 0;
|
|
494
|
+
left: 0;
|
|
495
|
+
width: 100%;
|
|
496
|
+
height: 100%;
|
|
497
|
+
margin: 0;
|
|
498
|
+
pointer-events: none;
|
|
499
|
+
z-index: 9999;
|
|
191
500
|
}
|
|
192
501
|
|
|
193
|
-
.
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
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;
|
|
502
|
+
.guide_graph {
|
|
503
|
+
position: absolute;
|
|
504
|
+
top: 0;
|
|
505
|
+
left: 0;
|
|
506
|
+
width: 100%;
|
|
507
|
+
height: 100%;
|
|
508
|
+
margin: 0;
|
|
509
|
+
pointer-events: none;
|
|
510
|
+
z-index: 9999;
|
|
511
|
+
background-size: 0.25rem 0.25rem;
|
|
512
|
+
background-image: repeating-linear-gradient(to bottom, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%), repeating-linear-gradient(to right, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%);
|
|
280
513
|
}
|
|
281
514
|
|
|
282
|
-
|
|
283
|
-
|
|
515
|
+
.guide_baseline {
|
|
516
|
+
position: absolute;
|
|
517
|
+
top: 0;
|
|
518
|
+
left: 0;
|
|
519
|
+
width: 100%;
|
|
520
|
+
height: 100%;
|
|
521
|
+
margin: 0;
|
|
522
|
+
pointer-events: none;
|
|
523
|
+
z-index: 9999;
|
|
524
|
+
background-size: 100% 1.5rem;
|
|
525
|
+
background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
|
|
284
526
|
}
|
|
285
527
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
@
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
@
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
}
|
|
298
|
-
}
|
|
528
|
+
/**
|
|
529
|
+
* unit.gl
|
|
530
|
+
*
|
|
531
|
+
* @description Layout Engine
|
|
532
|
+
* @author Scape Agency (https://www.scape.agency)
|
|
533
|
+
* @version v1.0.0
|
|
534
|
+
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
535
|
+
* @website https://www.unit.gl/
|
|
536
|
+
* @repository https://github.com/scape-agency/unit.gl/
|
|
537
|
+
* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
|
|
538
|
+
*/
|
|
299
539
|
/*# sourceMappingURL=to.css.map */
|
package/css/unit.gl.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
*,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}.
|
|
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%}*,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}.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}
|
|
2
2
|
/*# sourceMappingURL=to.css.map */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unit.gl",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.30",
|
|
4
4
|
"description": "Layout Engine.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"unit.gl",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"q",
|
|
10
10
|
"stylescape",
|
|
11
11
|
"sass",
|
|
12
|
+
"typography",
|
|
12
13
|
"fluid type",
|
|
13
14
|
"responsive",
|
|
14
15
|
"front-end",
|
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/_guide.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
|
// ============================================================================
|
|
17
19
|
// Utilities | Guides
|
|
18
20
|
// ============================================================================
|
package/scss/_helper.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,9 +13,7 @@
|
|
|
13
13
|
// limitations under the License.
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
@use "variables" as *;
|
|
19
17
|
|
|
20
18
|
|
|
21
19
|
|
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";
|
|
@@ -0,0 +1,97 @@
|
|
|
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
|
+
// Paper Module
|
|
18
|
+
// ============================================================================
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
@use "../variables" as *;
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
// Usage
|
|
25
|
+
// ============================================================================
|
|
26
|
+
|
|
27
|
+
// .paper {
|
|
28
|
+
|
|
29
|
+
// // Q Series
|
|
30
|
+
// // ------------------------------------------------------------------------
|
|
31
|
+
// &.q0 { @include set_paper_size("q0"); }
|
|
32
|
+
// &.q1 { @include set_paper_size("q1"); }
|
|
33
|
+
// &.q2 { @include set_paper_size("q2"); }
|
|
34
|
+
// &.q3 { @include set_paper_size("q3"); }
|
|
35
|
+
// &.q4 { @include set_paper_size("q4"); }
|
|
36
|
+
// &.q5 { @include set_paper_size("q5"); }
|
|
37
|
+
// &.q6 { @include set_paper_size("q6"); }
|
|
38
|
+
// &.q7 { @include set_paper_size("q7"); }
|
|
39
|
+
// &.q8 { @include set_paper_size("q8"); }
|
|
40
|
+
// &.q9 { @include set_paper_size("q9"); }
|
|
41
|
+
// &.q10 { @include set_paper_size("q10"); }
|
|
42
|
+
|
|
43
|
+
// // ISO A Series
|
|
44
|
+
// // ------------------------------------------------------------------------
|
|
45
|
+
// &.iso_a0 { @include set_paper_size("iso_a0"); }
|
|
46
|
+
// &.iso_a1 { @include set_paper_size("iso_a1"); }
|
|
47
|
+
// &.iso_a2 { @include set_paper_size("iso_a2"); }
|
|
48
|
+
// &.iso_a3 { @include set_paper_size("iso_a3"); }
|
|
49
|
+
// &.iso_a4 { @include set_paper_size("iso_a4"); }
|
|
50
|
+
// &.iso_a5 { @include set_paper_size("iso_a5"); }
|
|
51
|
+
// &.iso_a6 { @include set_paper_size("iso_a6"); }
|
|
52
|
+
// &.iso_a7 { @include set_paper_size("iso_a7"); }
|
|
53
|
+
// &.iso_a8 { @include set_paper_size("iso_a8"); }
|
|
54
|
+
// &.iso_a9 { @include set_paper_size("iso_a9"); }
|
|
55
|
+
// &.iso_a10 { @include set_paper_size("iso_a10"); }
|
|
56
|
+
|
|
57
|
+
// }
|
|
58
|
+
|
|
59
|
+
// Function to calculate ISO paper sizes
|
|
60
|
+
// @function iso-paper-size($number) {
|
|
61
|
+
// $base-width: 841mm;
|
|
62
|
+
// $base-height: 1189mm;
|
|
63
|
+
|
|
64
|
+
// @for $i from 0 through $number {
|
|
65
|
+
// $base-width: $base-width / if($i > 0, 2, 1);
|
|
66
|
+
// $base-height: $base-height / if($i > 0 and $i % 2 == 0, 2, 1);
|
|
67
|
+
// }
|
|
68
|
+
|
|
69
|
+
// @return (width: $base-width, height: $base-height);
|
|
70
|
+
// }
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
// Function to calculate ISO B-series paper sizes
|
|
74
|
+
// @function iso-paper-size-b($number) {
|
|
75
|
+
// $base-width: 1000mm; // Approximate base width for B0
|
|
76
|
+
// $base-height: 1414mm; // Approximate base height for B0
|
|
77
|
+
|
|
78
|
+
// @for $i from 0 through $number {
|
|
79
|
+
// $base-width: $base-width / if($i > 0, sqrt(2), 1);
|
|
80
|
+
// $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
|
|
81
|
+
// }
|
|
82
|
+
|
|
83
|
+
// @return (width: $base-width, height: $base-height);
|
|
84
|
+
// }
|
|
85
|
+
|
|
86
|
+
// Function to calculate ISO C-series paper sizes
|
|
87
|
+
// @function iso-paper-size-c($number) {
|
|
88
|
+
// $base-width: 917mm; // Approximate base width for C0
|
|
89
|
+
// $base-height: 1297mm; // Approximate base height for C0
|
|
90
|
+
|
|
91
|
+
// @for $i from 0 through $number {
|
|
92
|
+
// $base-width: $base-width / if($i > 0, sqrt(2), 1);
|
|
93
|
+
// $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
|
|
94
|
+
// }
|
|
95
|
+
|
|
96
|
+
// @return (width: $base-width, height: $base-height);
|
|
97
|
+
// }
|