unit.gl 0.0.34 → 0.0.35

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.
Files changed (15) hide show
  1. package/css/unit.gl.css +177 -299
  2. package/css/unit.gl.min.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/_global.scss +0 -2
  5. package/scss/_reset.scss +0 -1
  6. package/scss/dev/_banner.scss +11 -0
  7. package/scss/functions/_index.scss +2 -0
  8. package/scss/index.scss +3 -15
  9. package/scss/variables/_device.scss +1 -4
  10. package/scss/variables/_index.scss +1 -2
  11. package/scss/variables/_scale.scss +1 -1
  12. package/scss/variables/_unit.scss +17 -3
  13. package/scss/variables/_view.scss +8 -0
  14. /package/scss/{variables → functions}/_unit_conversion.scss +0 -0
  15. /package/scss/{variables → functions}/_unit_functions.scss +0 -0
package/css/unit.gl.css CHANGED
@@ -1,14 +1,179 @@
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
- */
1
+ *,
2
+ a,
3
+ abbr,
4
+ acronym,
5
+ address,
6
+ applet,
7
+ area,
8
+ article,
9
+ aside,
10
+ audio,
11
+ b,
12
+ base,
13
+ basefont,
14
+ bb,
15
+ bdo,
16
+ big,
17
+ blockquote,
18
+ body,
19
+ br,
20
+ button,
21
+ canvas,
22
+ caption,
23
+ center,
24
+ cite,
25
+ code,
26
+ col,
27
+ colgroup,
28
+ command,
29
+ datalist,
30
+ dd,
31
+ del,
32
+ details,
33
+ dfn,
34
+ dialog,
35
+ dir,
36
+ div,
37
+ dl,
38
+ dt,
39
+ em,
40
+ embed,
41
+ eventsource,
42
+ fieldset,
43
+ figcaption,
44
+ figure,
45
+ font,
46
+ footer,
47
+ form,
48
+ frame,
49
+ frameset,
50
+ h1,
51
+ h2,
52
+ h3,
53
+ h4,
54
+ h5,
55
+ h6,
56
+ head,
57
+ header,
58
+ hgroup,
59
+ hr,
60
+ html,
61
+ i,
62
+ iframe,
63
+ img,
64
+ input,
65
+ ins,
66
+ isindex,
67
+ kbd,
68
+ keygen,
69
+ label,
70
+ legend,
71
+ li,
72
+ link,
73
+ map,
74
+ mark,
75
+ menu,
76
+ meta,
77
+ meter,
78
+ nav,
79
+ noframes,
80
+ noscript,
81
+ object,
82
+ ol,
83
+ optgroup,
84
+ option,
85
+ output,
86
+ p,
87
+ param,
88
+ pre,
89
+ progress,
90
+ q,
91
+ rp,
92
+ rt,
93
+ ruby,
94
+ s,
95
+ samp,
96
+ script,
97
+ section,
98
+ select,
99
+ small,
100
+ source,
101
+ span,
102
+ strike,
103
+ strong,
104
+ style,
105
+ sub,
106
+ sup,
107
+ table,
108
+ tbody,
109
+ td,
110
+ textarea,
111
+ tfoot,
112
+ th,
113
+ thead,
114
+ time,
115
+ title,
116
+ tr,
117
+ track,
118
+ tt,
119
+ u,
120
+ ul,
121
+ var,
122
+ video,
123
+ wbr {
124
+ margin: 0;
125
+ -webkit-margin-before: 0;
126
+ margin-block-start: 0;
127
+ -webkit-margin-after: 0;
128
+ margin-block-end: 0;
129
+ -webkit-margin-start: 0;
130
+ margin-inline-start: 0;
131
+ -webkit-margin-end: 0;
132
+ margin-inline-end: 0;
133
+ padding: 0;
134
+ }
135
+
136
+ html {
137
+ box-sizing: border-box;
138
+ -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
139
+ word-break: normal;
140
+ -moz-tab-size: 4;
141
+ -o-tab-size: 4;
142
+ tab-size: 4;
143
+ height: 100%;
144
+ }
145
+
146
+ body {
147
+ min-height: 100%;
148
+ margin: 0;
149
+ position: absolute;
150
+ height: 100vh;
151
+ width: 100vw;
152
+ }
153
+
154
+ html, body {
155
+ height: 100%;
156
+ margin: 0;
157
+ }
158
+
159
+ *,
160
+ ::before,
161
+ ::after {
162
+ background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
163
+ box-sizing: inherit;
164
+ }
165
+
166
+ ::before,
167
+ ::after {
168
+ text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
169
+ vertical-align: inherit;
170
+ }
171
+
172
+ * {
173
+ padding: 0; /* Reset `padding` and `margin` of all elements */
174
+ margin: 0;
175
+ }
176
+
12
177
  :root {
13
178
  --q: $q;
14
179
  }
@@ -18,7 +183,7 @@ html {
18
183
  }
19
184
  @media screen and (min-width: 320px) {
20
185
  html {
21
- font-size: calc(12px + unit_strip(12px) * (100vw - 320px) / unit_strip(1120px));
186
+ font-size: calc(12px + 12 * (100vw - 320px) / 1120);
22
187
  }
23
188
  }
24
189
  @media screen and (min-width: 1440px) {
@@ -27,39 +192,6 @@ html {
27
192
  }
28
193
  }
29
194
 
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
195
  .ratio_1x1 {
64
196
  aspect-ratio: 1;
65
197
  width: 100%;
@@ -268,39 +400,6 @@ html {
268
400
  display: inline-block;
269
401
  }
270
402
 
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
- */
304
403
  .guide {
305
404
  position: absolute;
306
405
  top: 0;
@@ -337,225 +436,4 @@ html {
337
436
  background-size: 100% 1.5rem;
338
437
  background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
339
438
  }
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
- */
561
439
  /*# sourceMappingURL=to.css.map */
package/css/unit.gl.min.css CHANGED
@@ -1,2 +1,2 @@
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}
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}:root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@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}
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.34",
3
+ "version": "0.0.35",
4
4
  "description": "Layout Engine.",
5
5
  "keywords": [
6
6
  "unit.gl",
package/scss/_global.scss CHANGED
@@ -13,8 +13,6 @@
13
13
  // limitations under the License.
14
14
 
15
15
 
16
- @use "variables" as *;
17
-
18
16
  // Base | Body
19
17
  // ============================================================================
20
18
 
package/scss/_reset.scss CHANGED
@@ -12,7 +12,6 @@
12
12
  // See the License for the specific language governing permissions and
13
13
  // limitations under the License.
14
14
 
15
- @use "variables" as *;
16
15
 
17
16
  // ============================================================================
18
17
  // Base | Reset
package/scss/dev/_banner.scss ADDED
@@ -0,0 +1,11 @@
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
+ */
package/scss/functions/_index.scss CHANGED
@@ -18,3 +18,5 @@
18
18
  @forward "scale";
19
19
  @forward "sequence";
20
20
 
21
+ @forward "unit_conversion";
22
+ @forward "unit_functions";
package/scss/index.scss CHANGED
@@ -13,27 +13,15 @@
13
13
  // limitations under the License.
14
14
 
15
15
 
16
- /**
17
- * unit.gl
18
- *
19
- * @description Layout Engine
20
- * @author Scape Agency (https://www.scape.agency)
21
- * @version v1.0.0
22
- * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
23
- * @website https://www.unit.gl/
24
- * @repository https://github.com/scape-agency/unit.gl/
25
- * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
26
- */
27
-
28
16
  @charset "utf-8";
29
17
 
30
18
  @use "sass:math";
31
19
 
20
+ @forward "reset";
21
+ @forward "global";
22
+
32
23
  @forward "variables";
33
24
  @forward "functions";
34
25
  @forward "mixins";
35
26
 
36
- @forward "reset";
37
- @forward "global";
38
-
39
27
  @forward "classes";
package/scss/variables/_device.scss CHANGED
@@ -13,9 +13,8 @@
13
13
  // limitations under the License.
14
14
 
15
15
 
16
-
17
-
18
16
  // Device Attribute Map
17
+ // ============================================================================
19
18
  $devices: (
20
19
  // iPhones
21
20
  // ------------------------------------------------------------------------
@@ -76,5 +75,3 @@ $devices: (
76
75
  "lenovo-thinkpad": ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2),
77
76
 
78
77
  );
79
-
80
-
package/scss/variables/_index.scss CHANGED
@@ -20,8 +20,7 @@
20
20
  @forward "layer";
21
21
  @forward "paper";
22
22
 
23
- @forward "unit_conversion";
24
- @forward "unit_functions";
23
+
25
24
 
26
25
  @forward "unit";
27
26
 
package/scss/variables/_scale.scss CHANGED
@@ -74,7 +74,7 @@ $typographic_scale: (
74
74
  $basepoint_scale: 4;
75
75
 
76
76
  @function basepoint($value) {
77
- @return calc($q * $value * $basepoint_scale);
77
+ @return calc($q * $value * $basepoint_scale);
78
78
  }
79
79
 
80
80
  $basepoint_01: basepoint( 1) !default;
package/scss/variables/_unit.scss CHANGED
@@ -19,8 +19,8 @@
19
19
  // ============================================================================
20
20
 
21
21
  @use "sass:math";
22
-
23
22
  @use "view" as *;
23
+ @use "../functions" as *;
24
24
 
25
25
 
26
26
  // Kyū Measurement System for Responsive Typography
@@ -50,7 +50,6 @@ $q: 0.0625rem !default; // 1px, or 0.25mm
50
50
  }
51
51
 
52
52
 
53
-
54
53
  // Minimum and maximum Kyū sizes
55
54
  $q_min: 0.75px !default;
56
55
  $q_max: 1.50px !default;
@@ -59,6 +58,20 @@ $q_max: 1.50px !default;
59
58
  $font_min: calc((1rem / $q) * $q_min) !default;
60
59
  $font_max: calc((1rem / $q) * $q_max) !default;
61
60
 
61
+ // @mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) {
62
+ // // Assign font-size for the starting viewport width
63
+ // font-size: $min-font-size;
64
+
65
+ // // Apply fluid scaling between the minimum and maximum viewport widths
66
+ // @media screen and (min-width: $min-vw) {
67
+ // font-size: calc(#{$min-font-size} + #{unitless($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{unitless($max-vw - $min-vw)}));
68
+ // }
69
+
70
+ // // Fix the font-size at the maximum size beyond the maximum viewport width
71
+ // @media screen and (min-width: $max-vw) {
72
+ // font-size: $max-font-size;
73
+ // }
74
+ // }
62
75
 
63
76
  @mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) {
64
77
  $u1: unit($min-vw);
@@ -80,8 +93,9 @@ $font_max: calc((1rem / $q) * $q_max) !default;
80
93
  }
81
94
 
82
95
 
96
+
83
97
  html {
84
- @include fluid-type($media_xs, $media_sl, $font_min, $font_max);
98
+ @include fluid_type($media_xs, $media_sl, $font_min, $font_max);
85
99
  }
86
100
 
87
101
 
package/scss/variables/_view.scss CHANGED
@@ -43,6 +43,7 @@ $breakpoints: (
43
43
  sl: calc_breakpoint(90), // 1440px - Super large devices (Large TV)
44
44
  ) !default;
45
45
 
46
+
46
47
  // Expose individual breakpoints for easier direct access
47
48
  $media_xs: map-get($breakpoints, xs) !default;
48
49
  $media_sm: map-get($breakpoints, sm) !default;
@@ -51,6 +52,13 @@ $media_lg: map-get($breakpoints, lg) !default;
51
52
  $media_xl: map-get($breakpoints, xl) !default;
52
53
  $media_sl: map-get($breakpoints, sl) !default;
53
54
 
55
+ // $media_xs: 320px !default;
56
+ // $media_sm: 480px !default;
57
+ // $media_md: 768px !default;
58
+ // $media_lg: 1024px !default;
59
+ // $media_xl: 1280px !default;
60
+ // $media_sl: 1440px !default;
61
+
54
62
  $media_dif: calc($media_sl - $media_xs);
55
63
 
56
64
  // $media_min: 320px !default; // Mobile