unit.gl 0.0.22 → 0.0.24
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 +51 -38
- package/css/unit.gl.css.map +1 -1
- package/css/unit.gl.min.css +1 -1
- package/css/unit.gl.min.css.map +1 -1
- package/package.json +1 -1
- package/scss/_global.scss +129 -0
- package/scss/_scale.scss +2 -1
- package/scss/_unit.scss +45 -14
- package/scss/_unit_functions.scss +95 -0
- package/scss/index.scss +7 -4
package/css/unit.gl.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* unit.gl
|
|
3
3
|
*
|
|
4
|
-
* @description
|
|
4
|
+
* @description Layout Engine
|
|
5
5
|
* @author Scape Agency (https://www.scape.agency)
|
|
6
6
|
* @version v1.0.0
|
|
7
7
|
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
@@ -144,6 +144,47 @@ wbr {
|
|
|
144
144
|
padding: 0;
|
|
145
145
|
}
|
|
146
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
|
+
|
|
147
188
|
.paper.ansi_a {
|
|
148
189
|
width: 8.5in;
|
|
149
190
|
height: 11in;
|
|
@@ -243,44 +284,16 @@ wbr {
|
|
|
243
284
|
}
|
|
244
285
|
|
|
245
286
|
html {
|
|
246
|
-
font-size:
|
|
247
|
-
line-height: calc(6 * clamp(0.75px, 0.75px + calc((1.5 - 0.75) / (1440 - 320)) * (100vw - 320px), 1.5px) * 4);
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.guide {
|
|
251
|
-
position: absolute;
|
|
252
|
-
top: 0;
|
|
253
|
-
left: 0;
|
|
254
|
-
width: 100%;
|
|
255
|
-
height: 100%;
|
|
256
|
-
margin: 0;
|
|
257
|
-
pointer-events: none;
|
|
258
|
-
z-index: 9999;
|
|
287
|
+
font-size: 12px;
|
|
259
288
|
}
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
left: 0;
|
|
265
|
-
width: 100%;
|
|
266
|
-
height: 100%;
|
|
267
|
-
margin: 0;
|
|
268
|
-
pointer-events: none;
|
|
269
|
-
z-index: 9999;
|
|
270
|
-
background-size: calc(clamp(0.75px, 0.75px + calc((1.5 - 0.75) / (1440 - 320)) * (100vw - 320px), 1.5px) * 4) calc(clamp(0.75px, 0.75px + calc((1.5 - 0.75) / (1440 - 320)) * (100vw - 320px), 1.5px) * 4);
|
|
271
|
-
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%);
|
|
289
|
+
@media screen and (min-width: 320px) {
|
|
290
|
+
html {
|
|
291
|
+
font-size: calc(12px + 12 * (100vw - 320px) / 1120);
|
|
292
|
+
}
|
|
272
293
|
}
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
left: 0;
|
|
278
|
-
width: 100%;
|
|
279
|
-
height: 100%;
|
|
280
|
-
margin: 0;
|
|
281
|
-
pointer-events: none;
|
|
282
|
-
z-index: 9999;
|
|
283
|
-
background-size: 100% calc(6 * clamp(0.75px, 0.75px + calc((1.5 - 0.75) / (1440 - 320)) * (100vw - 320px), 1.5px) * 4);
|
|
284
|
-
background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
|
|
294
|
+
@media screen and (min-width: 1440px) {
|
|
295
|
+
html {
|
|
296
|
+
font-size: 24px;
|
|
297
|
+
}
|
|
285
298
|
}
|
|
286
299
|
/*# sourceMappingURL=to.css.map */
|
package/css/unit.gl.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["%3Cinput%20css%
|
|
1
|
+
{"version":3,"sources":["%3Cinput%20css%20bjronK%3E"],"names":[],"mappings":"AAAA;;;;;;;;;;CAUC;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HE,SAAS;EACT,wBAAqB;UAArB,qBAAqB;EACrB,uBAAmB;UAAnB,mBAAmB;EACnB,uBAAsB;UAAtB,sBAAsB;EACtB,qBAAoB;UAApB,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,sBAAsB;EACtB,8BAA8B,EAAE,sEAAsE;EACtG,kBAAkB;EAClB,gBAAgB;EAChB,cAAW;KAAX,WAAW;EACX,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,SAAS;EACT,kBAAkB;EAClB,aAAa;EACb,YAAY;AACd;;AAEA;EACE,YAAY;EACZ,SAAS;AACX;;AAEA;;;EAGE,4BAA4B,EAAE,2EAA2E;EACzG,mBAAmB;AACrB;;AAEA;;EAEE,wBAAwB,EAAE,uFAAuF;EACjH,uBAAuB;AACzB;;AAEA;EACE,UAAU,EAAE,iDAAiD;EAC7D,SAAS;AACX;;AAEA;EACE,YAAY;EACZ,YAAY;AACd;;AAEA;EACE,YAAY;EACZ,cAAc;AAChB;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,WAAW;EACX,aAAa;AACf;AACA;EACE,aAAa;EACb,YAAY;AACd;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,cAAc;EACd,YAAY;AACd;AACA;EACE,aAAa;EACb,eAAe;AACjB;AACA;EACE,YAAY;EACZ,cAAc;AAChB;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,YAAY;EACZ,aAAa;AACf;AACA;EACE,WAAW;EACX,aAAa;AACf;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,OAAO;AACT;;AAEA;EACE,eAAe;AACjB;AACA;EACE;IACE,mDAAmD;EACrD;AACF;AACA;EACE;IACE,eAAe;EACjB;AACF","file":"to.css","sourcesContent":["/**\n* unit.gl\n*\n* @description Layout Engine\n* @author Scape Agency (https://www.scape.agency)\n* @version v1.0.0\n* @copyright 2020-2024 Scape Agency (https://www.scape.agency)\n* @website https://www.unit.gl/\n* @repository https://github.com/scape-agency/unit.gl/\n* @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)\n*/\n*,\na,\nabbr,\nacronym,\naddress,\napplet,\narea,\narticle,\naside,\naudio,\nb,\nbase,\nbasefont,\nbb,\nbdo,\nbig,\nblockquote,\nbody,\nbr,\nbutton,\ncanvas,\ncaption,\ncenter,\ncite,\ncode,\ncol,\ncolgroup,\ncommand,\ndatalist,\ndd,\ndel,\ndetails,\ndfn,\ndialog,\ndir,\ndiv,\ndl,\ndt,\nem,\nembed,\neventsource,\nfieldset,\nfigcaption,\nfigure,\nfont,\nfooter,\nform,\nframe,\nframeset,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhead,\nheader,\nhgroup,\nhr,\nhtml,\ni,\niframe,\nimg,\ninput,\nins,\nisindex,\nkbd,\nkeygen,\nlabel,\nlegend,\nli,\nlink,\nmap,\nmark,\nmenu,\nmeta,\nmeter,\nnav,\nnoframes,\nnoscript,\nobject,\nol,\noptgroup,\noption,\noutput,\np,\nparam,\npre,\nprogress,\nq,\nrp,\nrt,\nruby,\ns,\nsamp,\nscript,\nsection,\nselect,\nsmall,\nsource,\nspan,\nstrike,\nstrong,\nstyle,\nsub,\nsup,\ntable,\ntbody,\ntd,\ntextarea,\ntfoot,\nth,\nthead,\ntime,\ntitle,\ntr,\ntrack,\ntt,\nu,\nul,\nvar,\nvideo,\nwbr {\n margin: 0;\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n padding: 0;\n}\n\nhtml {\n box-sizing: border-box;\n -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */\n word-break: normal;\n -moz-tab-size: 4;\n tab-size: 4;\n height: 100%;\n}\n\nbody {\n min-height: 100%;\n margin: 0;\n position: absolute;\n height: 100vh;\n width: 100vw;\n}\n\nhtml, body {\n height: 100%;\n margin: 0;\n}\n\n*,\n::before,\n::after {\n background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */\n box-sizing: inherit;\n}\n\n::before,\n::after {\n text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */\n vertical-align: inherit;\n}\n\n* {\n padding: 0; /* Reset `padding` and `margin` of all elements */\n margin: 0;\n}\n\n.paper.ansi_a {\n width: 8.5in;\n height: 11in;\n}\n\n.paper.q0 {\n width: 720mm;\n height: 1080mm;\n}\n.paper.q1 {\n width: 540mm;\n height: 720mm;\n}\n.paper.q2 {\n width: 360mm;\n height: 540mm;\n}\n.paper.q3 {\n width: 270mm;\n height: 360mm;\n}\n.paper.q4 {\n width: 180mm;\n height: 270mm;\n}\n.paper.q5 {\n width: 135mm;\n height: 180mm;\n}\n.paper.q6 {\n width: 90mm;\n height: 135mm;\n}\n.paper.q7 {\n width: 62.5mm;\n height: 90mm;\n}\n.paper.q8 {\n width: 45mm;\n height: 62.5mm;\n}\n.paper.q9 {\n width: 31.25mm;\n height: 45mm;\n}\n.paper.q10 {\n width: 22.5mm;\n height: 31.25mm;\n}\n.paper.iso_a0 {\n width: 841mm;\n height: 1189mm;\n}\n.paper.iso_a1 {\n width: 594mm;\n height: 841mm;\n}\n.paper.iso_a2 {\n width: 420mm;\n height: 594mm;\n}\n.paper.iso_a3 {\n width: 297mm;\n height: 420mm;\n}\n.paper.iso_a4 {\n width: 210mm;\n height: 297mm;\n}\n.paper.iso_a5 {\n width: 148mm;\n height: 210mm;\n}\n.paper.iso_a6 {\n width: 105mm;\n height: 148mm;\n}\n.paper.iso_a7 {\n width: 74mm;\n height: 105mm;\n}\n.paper.iso_a8 {\n width: 52mm;\n height: 74mm;\n}\n.paper.iso_a9 {\n width: 37mm;\n height: 52mm;\n}\n.paper.iso_a10 {\n width: 26mm;\n height: 37mm;\n}\n\n:root {\n --q: $q;\n}\n\nhtml {\n font-size: 12px;\n}\n@media screen and (min-width: 320px) {\n html {\n font-size: calc(12px + 12 * (100vw - 320px) / 1120);\n }\n}\n@media screen and (min-width: 1440px) {\n html {\n font-size: 24px;\n }\n}"]}
|
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}.paper.ansi_a{height:11in;width:8.5in}.paper.q0{height:1080mm;width:720mm}.paper.q1{height:720mm;width:540mm}.paper.q2{height:540mm;width:360mm}.paper.q3{height:360mm;width:270mm}.paper.q4{height:270mm;width:180mm}.paper.q5{height:180mm;width:135mm}.paper.q6{height:135mm;width:90mm}.paper.q7{height:90mm;width:62.5mm}.paper.q8{height:62.5mm;width:45mm}.paper.q9{height:45mm;width:31.25mm}.paper.q10{height:31.25mm;width:22.5mm}.paper.iso_a0{height:1189mm;width:841mm}.paper.iso_a1{height:841mm;width:594mm}.paper.iso_a2{height:594mm;width:420mm}.paper.iso_a3{height:420mm;width:297mm}.paper.iso_a4{height:297mm;width:210mm}.paper.iso_a5{height:210mm;width:148mm}.paper.iso_a6{height:148mm;width:105mm}.paper.iso_a7{height:105mm;width:74mm}.paper.iso_a8{height:74mm;width:52mm}.paper.iso_a9{height:52mm;width:37mm}.paper.iso_a10{height:37mm;width:26mm}:root{--q:$q}html{font-size:
|
|
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}.paper.ansi_a{height:11in;width:8.5in}.paper.q0{height:1080mm;width:720mm}.paper.q1{height:720mm;width:540mm}.paper.q2{height:540mm;width:360mm}.paper.q3{height:360mm;width:270mm}.paper.q4{height:270mm;width:180mm}.paper.q5{height:180mm;width:135mm}.paper.q6{height:135mm;width:90mm}.paper.q7{height:90mm;width:62.5mm}.paper.q8{height:62.5mm;width:45mm}.paper.q9{height:45mm;width:31.25mm}.paper.q10{height:31.25mm;width:22.5mm}.paper.iso_a0{height:1189mm;width:841mm}.paper.iso_a1{height:841mm;width:594mm}.paper.iso_a2{height:594mm;width:420mm}.paper.iso_a3{height:420mm;width:297mm}.paper.iso_a4{height:297mm;width:210mm}.paper.iso_a5{height:210mm;width:148mm}.paper.iso_a6{height:148mm;width:105mm}.paper.iso_a7{height:105mm;width:74mm}.paper.iso_a8{height:74mm;width:52mm}.paper.iso_a9{height:52mm;width:37mm}.paper.iso_a10{height:37mm;width:26mm}: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}}
|
|
2
2
|
/*# sourceMappingURL=to.css.map */
|
package/css/unit.gl.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["%3Cinput%20css%
|
|
1
|
+
{"version":3,"sources":["%3Cinput%20css%20-Ezccy%3E"],"names":[],"mappings":"AAAA,8pBAA8pB,QAAQ,CAAC,uBAAoB,CAApB,oBAAoB,CAAC,sBAAkB,CAAlB,kBAAkB,CAAC,sBAAqB,CAArB,qBAAqB,CAAC,oBAAmB,CAAnB,mBAAmB,CAAC,SAAS,CAAC,KAAK,qBAAqB,CAAC,6BAA6B,CAA8C,WAAU,CAArC,eAAe,CAAC,aAAU,CAAV,UAAU,CAA5C,iBAAwD,CAAC,KAAgD,YAAY,CAAvC,QAAQ,CAAxB,eAAe,CAAU,iBAAiB,CAAc,WAAW,CAAC,UAAU,WAAW,CAAC,QAAQ,CAAC,iBAAmB,2BAA2B,CAAC,kBAAkB,CAAC,eAAiB,uBAAuB,CAAC,sBAAsB,CAAC,EAAY,QAAO,CAAjB,SAAkB,CAAC,cAA0B,WAAU,CAAtB,WAAuB,CAAC,UAAsB,aAAY,CAAxB,WAAyB,CAAC,UAAsB,YAAW,CAAvB,WAAwB,CAAC,UAAsB,YAAW,CAAvB,WAAwB,CAAC,UAAsB,YAAW,CAAvB,WAAwB,CAAC,UAAsB,YAAW,CAAvB,WAAwB,CAAC,UAAsB,YAAW,CAAvB,WAAwB,CAAC,UAAqB,YAAW,CAAtB,UAAuB,CAAC,UAAuB,WAAU,CAAvB,YAAwB,CAAC,UAAqB,aAAY,CAAvB,UAAwB,CAAC,UAAwB,WAAU,CAAxB,aAAyB,CAAC,WAAwB,cAAa,CAA1B,YAA2B,CAAC,cAA0B,aAAY,CAAxB,WAAyB,CAAC,cAA0B,YAAW,CAAvB,WAAwB,CAAC,cAA0B,YAAW,CAAvB,WAAwB,CAAC,cAA0B,YAAW,CAAvB,WAAwB,CAAC,cAA0B,YAAW,CAAvB,WAAwB,CAAC,cAA0B,YAAW,CAAvB,WAAwB,CAAC,cAA0B,YAAW,CAAvB,WAAwB,CAAC,cAAyB,YAAW,CAAtB,UAAuB,CAAC,cAAyB,WAAU,CAArB,UAAsB,CAAC,cAAyB,WAAU,CAArB,UAAsB,CAAC,eAA0B,WAAU,CAArB,UAAsB,CAAC,MAAM,MAAO,CAAC,KAAK,cAAc,CAAC,oCAAqC,KAAK,qCAA8C,CAAC,CAAC,qCAAsC,KAAK,cAAc,CAAC","file":"to.css","sourcesContent":["*,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;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding:0}html{box-sizing:border-box;-webkit-text-size-adjust:100%;word-break:normal;-moz-tab-size:4;tab-size:4;height:100%}body{min-height:100%;margin:0;position:absolute;height:100vh;width:100vw}html,body{height:100%;margin:0}*,::before,::after{background-repeat:no-repeat;box-sizing:inherit}::before,::after{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}.paper.ansi_a{width:8.5in;height:11in}.paper.q0{width:720mm;height:1080mm}.paper.q1{width:540mm;height:720mm}.paper.q2{width:360mm;height:540mm}.paper.q3{width:270mm;height:360mm}.paper.q4{width:180mm;height:270mm}.paper.q5{width:135mm;height:180mm}.paper.q6{width:90mm;height:135mm}.paper.q7{width:62.5mm;height:90mm}.paper.q8{width:45mm;height:62.5mm}.paper.q9{width:31.25mm;height:45mm}.paper.q10{width:22.5mm;height:31.25mm}.paper.iso_a0{width:841mm;height:1189mm}.paper.iso_a1{width:594mm;height:841mm}.paper.iso_a2{width:420mm;height:594mm}.paper.iso_a3{width:297mm;height:420mm}.paper.iso_a4{width:210mm;height:297mm}.paper.iso_a5{width:148mm;height:210mm}.paper.iso_a6{width:105mm;height:148mm}.paper.iso_a7{width:74mm;height:105mm}.paper.iso_a8{width:52mm;height:74mm}.paper.iso_a9{width:37mm;height:52mm}.paper.iso_a10{width:26mm;height:37mm}:root{--q: $q}html{font-size:12px}@media screen and (min-width: 320px){html{font-size:calc(12px + 12*(100vw - 320px)/1120)}}@media screen and (min-width: 1440px){html{font-size:24px}}"]}
|
package/package.json
CHANGED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
// Copyright 2023 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
|
+
// Base | Body
|
|
17
|
+
// ============================================================================
|
|
18
|
+
|
|
19
|
+
html {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
|
|
22
|
+
word-break: normal;
|
|
23
|
+
-moz-tab-size: 4;
|
|
24
|
+
tab-size: 4;
|
|
25
|
+
height: 100%;
|
|
26
|
+
// height: 100vh;
|
|
27
|
+
// width: 100vw;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
body {
|
|
31
|
+
min-height: 100%;
|
|
32
|
+
margin: 0;
|
|
33
|
+
position: absolute;
|
|
34
|
+
height: 100vh;
|
|
35
|
+
width: 100vw;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
html, body {
|
|
39
|
+
height: 100%;
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
*,
|
|
44
|
+
::before,
|
|
45
|
+
::after {
|
|
46
|
+
background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
|
|
47
|
+
box-sizing: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
::before,
|
|
51
|
+
::after {
|
|
52
|
+
text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
|
|
53
|
+
vertical-align: inherit;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
* {
|
|
57
|
+
padding: 0; /* Reset `padding` and `margin` of all elements */
|
|
58
|
+
margin: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
// body {
|
|
65
|
+
// font-family: 'Urbanist', sans-serif !important;
|
|
66
|
+
// font-weight: 500;
|
|
67
|
+
// font-size: 1rem;
|
|
68
|
+
// min-height: 100%;
|
|
69
|
+
// margin: 0;
|
|
70
|
+
// }
|
|
71
|
+
|
|
72
|
+
// html, body {
|
|
73
|
+
// @include reset_bleed;
|
|
74
|
+
// height: 100vh;
|
|
75
|
+
// width: 100vw;
|
|
76
|
+
// //overflow-x: hidden;
|
|
77
|
+
// // margin: 0;
|
|
78
|
+
// // padding: 0;
|
|
79
|
+
// // -webkit-tap-highlight-color: transparent;
|
|
80
|
+
// // width: 100%;
|
|
81
|
+
// }
|
|
82
|
+
|
|
83
|
+
// html {
|
|
84
|
+
// // scroll-behavior: smooth;
|
|
85
|
+
// // background-color: white;
|
|
86
|
+
// // -webkit-font-smoothing: antialiased;
|
|
87
|
+
// // -moz-osx-font-smoothing: grayscale;
|
|
88
|
+
// // text-rendering: optimizeLegibility;
|
|
89
|
+
// // font-family: sans-serif;
|
|
90
|
+
// }
|
|
91
|
+
|
|
92
|
+
// // html, body {
|
|
93
|
+
// // @include bleed_reset;
|
|
94
|
+
// // @include font_settings;
|
|
95
|
+
// // }
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
// // body {
|
|
99
|
+
// // @include paragraph_normal;
|
|
100
|
+
// // }
|
|
101
|
+
|
|
102
|
+
// body {
|
|
103
|
+
// background-color: $color_01;
|
|
104
|
+
// // line-height: 1;
|
|
105
|
+
// // background: #ffffff;
|
|
106
|
+
// // color: #777777;
|
|
107
|
+
// // font: normal 16px "din_regular", arial, sans-serif;
|
|
108
|
+
// // font-weight: 400;
|
|
109
|
+
// // -webkit-font-smoothing: antialiased;
|
|
110
|
+
// // -webkit-text-size-adjust: 100%;
|
|
111
|
+
// // font-family: var(--ptf-primary-font);
|
|
112
|
+
// // font-size: 1rem;
|
|
113
|
+
// // line-height: 1.625;
|
|
114
|
+
|
|
115
|
+
// // min-width: 20rem;
|
|
116
|
+
// // margin: 0;
|
|
117
|
+
// // padding: 0;
|
|
118
|
+
|
|
119
|
+
// // letter-spacing: -.025em;
|
|
120
|
+
|
|
121
|
+
// // color: var(--ptf-color-2);
|
|
122
|
+
// // background-color: var(--q_white);
|
|
123
|
+
|
|
124
|
+
// // -webkit-font-smoothing: antialiased;
|
|
125
|
+
// // -moz-osx-font-smoothing: grayscale;
|
|
126
|
+
// }
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
package/scss/_scale.scss
CHANGED
package/scss/_unit.scss
CHANGED
|
@@ -28,22 +28,9 @@
|
|
|
28
28
|
// Kyū base size definition (A Kyū is 1/16th of a Rem).
|
|
29
29
|
// 1rem equals the font size of the html element, which for most browsers has
|
|
30
30
|
// a default value of 16px.
|
|
31
|
-
$
|
|
32
|
-
$q_unit: 1.0000rem !default;
|
|
31
|
+
$q: 0.0625rem !default; // 1px, or 0.25mm
|
|
33
32
|
|
|
34
33
|
|
|
35
|
-
// Minimum and maximum Kyū sizes
|
|
36
|
-
$q_min: 0.75px !default;
|
|
37
|
-
$q_max: 1.50px !default;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
// Calculate dynamic Kyū size using clamp function
|
|
44
|
-
// $q_size: scale_dynamic_clamp($media_xs, $media_sl, $q_min, $q_max);
|
|
45
|
-
$q: scale_dynamic_clamp($media_xs, $media_sl, $q_min, $q_max);
|
|
46
|
-
|
|
47
34
|
// Function to calculate multiples of 'q'
|
|
48
35
|
@function q($multiplier) {
|
|
49
36
|
@return calc($q * $multiplier);
|
|
@@ -54,7 +41,51 @@ $q: scale_dynamic_clamp($media_xs, $media_sl, $q_min, $q_max);
|
|
|
54
41
|
#{$property}: q($multiplier);
|
|
55
42
|
}
|
|
56
43
|
|
|
44
|
+
|
|
57
45
|
// Root custom properties for Kyū sizes
|
|
58
46
|
:root {
|
|
59
47
|
--q: $q;
|
|
60
48
|
}
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
// Minimum and maximum Kyū sizes
|
|
57
|
+
$q_min: 0.75px !default;
|
|
58
|
+
$q_max: 1.50px !default;
|
|
59
|
+
|
|
60
|
+
// Minimum and maximum Kyū sizes
|
|
61
|
+
$font_min: calc((1rem / $q) * $q_min) !default;
|
|
62
|
+
$font_max: calc((1rem / $q) * $q_max) !default;
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
@mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) {
|
|
66
|
+
$u1: unit($min-vw);
|
|
67
|
+
$u2: unit($max-vw);
|
|
68
|
+
$u3: unit($min-font-size);
|
|
69
|
+
$u4: unit($max-font-size);
|
|
70
|
+
|
|
71
|
+
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
|
72
|
+
& {
|
|
73
|
+
font-size: $min-font-size;
|
|
74
|
+
@media screen and (min-width: $min-vw) {
|
|
75
|
+
font-size: calc(#{$min-font-size} + #{unit_strip($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{unit_strip($max-vw - $min-vw)}));
|
|
76
|
+
}
|
|
77
|
+
@media screen and (min-width: $max-vw) {
|
|
78
|
+
font-size: $max-font-size;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
html {
|
|
86
|
+
@include fluid-type($media_xs, $media_sl, $font_min, $font_max);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
@@ -102,3 +102,98 @@
|
|
|
102
102
|
$_font_size_max
|
|
103
103
|
);
|
|
104
104
|
}
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
// Fluid Typography Mixin
|
|
111
|
+
// ============================================================================
|
|
112
|
+
/// Mixin: fluid_type
|
|
113
|
+
/// Creates fluid typography rules to scale font sizes responsively between a
|
|
114
|
+
/// minimum and maximum viewport width.
|
|
115
|
+
// /// @param $_viewport_width_min - Minimum viewport width where scaling starts
|
|
116
|
+
// /// @param $_viewport_width_max - Maximum viewport width where scaling stops
|
|
117
|
+
// /// @param $_font_size_min - Minimum font size
|
|
118
|
+
// /// @param $_font_size_max - Maximum font size
|
|
119
|
+
// @mixin fluid_type(
|
|
120
|
+
// $_viewport_width_min,
|
|
121
|
+
// $_viewport_width_max,
|
|
122
|
+
// $_font_size_min,
|
|
123
|
+
// $_font_size_max,
|
|
124
|
+
// ) {
|
|
125
|
+
|
|
126
|
+
// // Ensure the units are consistent
|
|
127
|
+
// $u1: unit($_viewport_width_min);
|
|
128
|
+
// $u2: unit($_viewport_width_max);
|
|
129
|
+
// $u3: unit($_font_size_min);
|
|
130
|
+
// $u4: unit($_font_size_max);
|
|
131
|
+
|
|
132
|
+
// // $u1: $_viewport_width_min;
|
|
133
|
+
// // $u2: $_viewport_width_max;
|
|
134
|
+
// // $u3: $_font_size_min;
|
|
135
|
+
// // $u4: $_font_size_max;
|
|
136
|
+
|
|
137
|
+
// @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
|
138
|
+
// font-size: $_font_size_min * 16;
|
|
139
|
+
// // Apply fluid font-size between the min and max viewport widths
|
|
140
|
+
// @media screen and (min-width: $_viewport_width_min) {
|
|
141
|
+
// font-size: linear_interpolation(
|
|
142
|
+
// $_font_size_min,
|
|
143
|
+
// $_font_size_max,
|
|
144
|
+
// $_viewport_width_min,
|
|
145
|
+
// $_viewport_width_max
|
|
146
|
+
// ) * 16;
|
|
147
|
+
// }
|
|
148
|
+
// // Set to max font-size for viewports wider than the max viewport width
|
|
149
|
+
// @media screen and (min-width: $_viewport_width_max) {
|
|
150
|
+
// font-size: $_font_size_max * 16;
|
|
151
|
+
// }
|
|
152
|
+
// } @else {
|
|
153
|
+
// @warn "Inconsistent units provided for fluid typography.";
|
|
154
|
+
// }
|
|
155
|
+
// }
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
@function scale_dynamic(
|
|
160
|
+
$_viewport_width_min,
|
|
161
|
+
$_viewport_width_max,
|
|
162
|
+
$_font_size_min,
|
|
163
|
+
$_font_size_max,
|
|
164
|
+
$_current_width,
|
|
165
|
+
) {
|
|
166
|
+
// Ensure the units are consistent
|
|
167
|
+
// $u1: unit($_viewport_width_min);
|
|
168
|
+
// $u2: unit($_viewport_width_max);
|
|
169
|
+
// $u3: unit($_font_size_min);
|
|
170
|
+
// $u4: unit($_font_size_max);
|
|
171
|
+
$u1: $_viewport_width_min;
|
|
172
|
+
$u2: $_viewport_width_max;
|
|
173
|
+
$u3: $_font_size_min;
|
|
174
|
+
$u4: $_font_size_max;
|
|
175
|
+
|
|
176
|
+
// Validate unit consistency
|
|
177
|
+
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
|
178
|
+
// Check if the current width is within the specified range
|
|
179
|
+
@if $_current_width >= $_viewport_width_min and $_current_width <= $_viewport_width_max {
|
|
180
|
+
// Calculate and return the interpolated font size
|
|
181
|
+
@return linear_interpolation(
|
|
182
|
+
$_font_size_min,
|
|
183
|
+
$_font_size_max,
|
|
184
|
+
$_viewport_width_min,
|
|
185
|
+
$_viewport_width_max,
|
|
186
|
+
100vw
|
|
187
|
+
);
|
|
188
|
+
} @else if $_current_width < $_viewport_width_min {
|
|
189
|
+
// Return the minimum font size
|
|
190
|
+
@return $_font_size_min;
|
|
191
|
+
} @else {
|
|
192
|
+
// Return the maximum font size
|
|
193
|
+
@return $_font_size_max;
|
|
194
|
+
}
|
|
195
|
+
} @else {
|
|
196
|
+
@warn "Inconsistent units provided for fluid typography.";
|
|
197
|
+
@return null;
|
|
198
|
+
}
|
|
199
|
+
}
|
package/scss/index.scss
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
/**
|
|
19
19
|
* unit.gl
|
|
20
20
|
*
|
|
21
|
-
* @description
|
|
21
|
+
* @description Layout Engine
|
|
22
22
|
* @author Scape Agency (https://www.scape.agency)
|
|
23
23
|
* @version v1.0.0
|
|
24
24
|
* @copyright 2020-2024 Scape Agency (https://www.scape.agency)
|
|
@@ -29,7 +29,10 @@
|
|
|
29
29
|
|
|
30
30
|
@use "sass:math";
|
|
31
31
|
|
|
32
|
+
|
|
33
|
+
|
|
32
34
|
@import "_reset";
|
|
35
|
+
@import "_global";
|
|
33
36
|
@import "_layer";
|
|
34
37
|
|
|
35
38
|
|
|
@@ -42,10 +45,10 @@
|
|
|
42
45
|
@import "_unit";
|
|
43
46
|
|
|
44
47
|
|
|
45
|
-
@import "_scale";
|
|
48
|
+
// @import "_scale";
|
|
46
49
|
|
|
47
|
-
@import "_helper";
|
|
48
|
-
@import "_guide";
|
|
50
|
+
// @import "_helper";
|
|
51
|
+
// @import "_guide";
|
|
49
52
|
|
|
50
53
|
|
|
51
54
|
// @import "base/base";
|