unit.gl 0.0.21 → 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/display/_device.scss +106 -0
- package/scss/display/_display_orientation.scss +93 -0
- package/scss/index.scss +7 -4
- package/scss/math/_math_arithmetic.scss +64 -0
- package/scss/math/_math_ratio.scss +172 -0
- package/scss/math/_math_scale.scss +58 -0
- package/scss/math/_math_sequence.scss +278 -0
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
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
// Copyright 2020 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.00 (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.00
|
|
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
|
+
|
|
18
|
+
|
|
19
|
+
// Device Attribute Map
|
|
20
|
+
$devices: (
|
|
21
|
+
// iPhones
|
|
22
|
+
// ------------------------------------------------------------------------
|
|
23
|
+
"iphone-5": ("min-width": 320px, "max-width": 568px, "pixel-ratio": 2),
|
|
24
|
+
"iphone-6-7-8": ("min-width": 375px, "max-width": 667px, "pixel-ratio": 2),
|
|
25
|
+
"iphone-x": ("min-width": 375px, "max-width": 812px, "pixel-ratio": 3),
|
|
26
|
+
"iphone-11": ("min-width": 414px, "max-width": 896px, "pixel-ratio": 2),
|
|
27
|
+
"iphone-12": ("min-width": 390px, "max-width": 844px, "pixel-ratio": 3),
|
|
28
|
+
"iphone-13": ("min-width": 428px, "max-width": 926px, "pixel-ratio": 3),
|
|
29
|
+
|
|
30
|
+
// iPads
|
|
31
|
+
// ------------------------------------------------------------------------
|
|
32
|
+
"ipad": ("min-width": 768px, "max-width": 1024px, "pixel-ratio": 2),
|
|
33
|
+
"ipad-pro": ("min-width": 1024px, "max-width": 1366px, "pixel-ratio": 2),
|
|
34
|
+
"ipad-mini": ("min-width": 768px, "max-width": 1024px, "pixel-ratio": 2),
|
|
35
|
+
"ipad-air": ("min-width": 820px, "max-width": 1180px, "pixel-ratio": 2),
|
|
36
|
+
|
|
37
|
+
// Samsung Galaxy
|
|
38
|
+
// ------------------------------------------------------------------------
|
|
39
|
+
"samsung-s10": ("min-width": 360px, "max-width": 760px, "pixel-ratio": 3),
|
|
40
|
+
"samsung-s20": ("min-width": 320px, "max-width": 720px, "pixel-ratio": 4),
|
|
41
|
+
"samsung-s21": ("min-width": 320px, "max-width": 780px, "pixel-ratio": 3),
|
|
42
|
+
|
|
43
|
+
// Google Pixel
|
|
44
|
+
// ------------------------------------------------------------------------
|
|
45
|
+
"google-pixel": ("min-width": 411px, "max-width": 731px, "pixel-ratio": 2.6),
|
|
46
|
+
"google-pixel-5": ("min-width": 393px, "max-width": 851px, "pixel-ratio": 3),
|
|
47
|
+
|
|
48
|
+
// Microsoft Surface
|
|
49
|
+
// ------------------------------------------------------------------------
|
|
50
|
+
"surface-duo": ("min-width": 540px, "max-width": 720px, "pixel-ratio": 2.5),
|
|
51
|
+
"surface-pro": ("min-width": 768px, "max-width": 1366px, "pixel-ratio": 2),
|
|
52
|
+
|
|
53
|
+
// Samsung Galaxy Fold
|
|
54
|
+
// ------------------------------------------------------------------------
|
|
55
|
+
"galaxy-fold": ("min-width": 280px, "max-width": 653px, "pixel-ratio": 3),
|
|
56
|
+
|
|
57
|
+
// Other Tablets and Laptops
|
|
58
|
+
// ------------------------------------------------------------------------
|
|
59
|
+
"amazon-fire-hd": ("min-width": 800px, "max-width": 1280px, "pixel-ratio": 1.5),
|
|
60
|
+
"microsoft-laptop": ("min-width": 1504px, "max-width": 2256px, "pixel-ratio": 1.5),
|
|
61
|
+
|
|
62
|
+
// Desktops
|
|
63
|
+
// ------------------------------------------------------------------------
|
|
64
|
+
"macbook-air": ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2),
|
|
65
|
+
"macbook-pro": ("min-width": 1680px, "max-width": 3072px, "pixel-ratio": 2),
|
|
66
|
+
"imac": ("min-width": 1920px, "max-width": 5120px, "pixel-ratio": 2)
|
|
67
|
+
|
|
68
|
+
// Additional Devices
|
|
69
|
+
// ------------------------------------------------------------------------
|
|
70
|
+
"lg-g6": ("min-width": 360px, "max-width": 720px, "pixel-ratio": 4),
|
|
71
|
+
"oneplus-7t": ("min-width": 412px, "max-width": 732px, "pixel-ratio": 2.5),
|
|
72
|
+
"sony-xperia-1": ("min-width": 384px, "max-width": 643px, "pixel-ratio": 3),
|
|
73
|
+
"huawei-p30": ("min-width": 360px, "max-width": 780px, "pixel-ratio": 3),
|
|
74
|
+
"xiaomi-mi9": ("min-width": 393px, "max-width": 851px, "pixel-ratio": 3),
|
|
75
|
+
"surface-book": ("min-width": 1500px, "max-width": 2000px, "pixel-ratio": 2),
|
|
76
|
+
"dell-xps": ("min-width": 1920px, "max-width": 3840px, "pixel-ratio": 2),
|
|
77
|
+
"lenovo-thinkpad": ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2)
|
|
78
|
+
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
/// Generalized Media Query Mixin
|
|
83
|
+
/// Creates a media query based on device attributes defined in $devices map.
|
|
84
|
+
/// @param $device - The key name of the device in the $devices map.
|
|
85
|
+
/// Usage Example:
|
|
86
|
+
/// @include device-media-query('iphone-6-7-8') {// Styles specific to iPhone 6, 7, 8}
|
|
87
|
+
@mixin device-media-query($device) {
|
|
88
|
+
// Retrieve the device attributes from the map
|
|
89
|
+
$attributes: map-get($devices, $device);
|
|
90
|
+
|
|
91
|
+
// Extract individual attributes with default fallbacks
|
|
92
|
+
$min-width: if(map-has-key($attributes, "min-width"), map-get($attributes, "min-width"), null);
|
|
93
|
+
$max-width: if(map-has-key($attributes, "max-width"), map-get($attributes, "max-width"), null);
|
|
94
|
+
$pixel-ratio: if(map-has-key($attributes, "pixel-ratio"), map-get($attributes, "pixel-ratio"), 1); // Default to 1
|
|
95
|
+
|
|
96
|
+
// Construct the media query string
|
|
97
|
+
$media-query: "only screen";
|
|
98
|
+
$media-query: if($min-width != null, $media-query + " and (min-device-width: #{$min-width})", $media-query);
|
|
99
|
+
$media-query: if($max-width != null, $media-query + " and (max-device-width: #{$max-width})", $media-query);
|
|
100
|
+
$media-query: if($pixel-ratio != 1, $media-query + " and (-webkit-device-pixel-ratio: #{$pixel-ratio})", $media-query);
|
|
101
|
+
|
|
102
|
+
// Apply the media query
|
|
103
|
+
@media #{$media-query} {
|
|
104
|
+
@content;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
// Copyright 2020 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.00 (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.00
|
|
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
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
// Mixins for Media Queries Based on Device Orientation
|
|
23
|
+
// ============================================================================
|
|
24
|
+
// These mixins provide a convenient way to apply styles based on the orientation of the device.
|
|
25
|
+
// Useful for responsive designs that need to adapt to landscape or portrait modes, especially on tablets and smartphones.
|
|
26
|
+
|
|
27
|
+
/// Mixin for landscape orientation with optional breakpoint
|
|
28
|
+
/// Use this mixin to apply styles when the device is in landscape mode.
|
|
29
|
+
/// @param $min-width (optional) - The minimum width at which the styles should apply
|
|
30
|
+
/// Example usage:
|
|
31
|
+
/// @include orientation-landscape(1024px) { /* styles */ }
|
|
32
|
+
@mixin orientation-landscape($min-width: null) {
|
|
33
|
+
@if $min-width {
|
|
34
|
+
@media (orientation: landscape) and (min-width: $min-width) {
|
|
35
|
+
@content;
|
|
36
|
+
}
|
|
37
|
+
} @else {
|
|
38
|
+
@media (orientation: landscape) {
|
|
39
|
+
@content; // The styles inside this mixin are applied in landscape mode
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/// Mixin for portrait orientation with optional breakpoint
|
|
45
|
+
/// Use this mixin to apply styles when the device is in portrait mode.
|
|
46
|
+
/// @param $min-width (optional) - The minimum width at which the styles should apply
|
|
47
|
+
/// Example usage:
|
|
48
|
+
/// @include orientation-portrait { /* styles */ }
|
|
49
|
+
@mixin orientation-portrait($min-width: null) {
|
|
50
|
+
@if $min-width {
|
|
51
|
+
@media (orientation: portrait) and (min-width: $min-width) {
|
|
52
|
+
@content;
|
|
53
|
+
}
|
|
54
|
+
} @else {
|
|
55
|
+
@media (orientation: portrait) {
|
|
56
|
+
@content;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
/// Mixin for targeting specific aspect ratios
|
|
64
|
+
/// @param $width - Width of the aspect ratio
|
|
65
|
+
/// @param $height - Height of the aspect ratio
|
|
66
|
+
@mixin aspect-ratio($width, $height) {
|
|
67
|
+
@media (aspect-ratio: #{$width}/#{$height}) {
|
|
68
|
+
@content;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
// Mixin for High-Density (Retina) Displays
|
|
79
|
+
// ============================================================================
|
|
80
|
+
/// This mixin targets high-density displays like Retina screens.
|
|
81
|
+
/// It covers various methods to detect high pixel density to ensure broad compatibility.
|
|
82
|
+
/// Usage:
|
|
83
|
+
/// @include retina { /* styles for retina displays */ }
|
|
84
|
+
@mixin retina {
|
|
85
|
+
// Webkit-based browsers
|
|
86
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
|
87
|
+
// Standard way to target high-resolution displays
|
|
88
|
+
only screen and (min-resolution: 192dpi),
|
|
89
|
+
// For devices with a high-resolution in dots per inch
|
|
90
|
+
only screen and (min-resolution: 2dppx) {
|
|
91
|
+
@content; // Styles for high-density displays
|
|
92
|
+
}
|
|
93
|
+
}
|
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";
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// Copyright 2020 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
|
+
// Unitless Arithmetic Functions
|
|
17
|
+
// ============================================================================
|
|
18
|
+
// Functions to perform arithmetic operations while ensuring correct handling of units.
|
|
19
|
+
|
|
20
|
+
/// Adds two values, handling units.
|
|
21
|
+
/// @param $value1 - First value
|
|
22
|
+
/// @param $value2 - Second value
|
|
23
|
+
/// @return - Sum of the two values
|
|
24
|
+
@function add($value1, $value2) {
|
|
25
|
+
@if unitless($value1) and unitless($value2) {
|
|
26
|
+
// Both values are unitless, return simple addition
|
|
27
|
+
@return $value1 + $value2;
|
|
28
|
+
} @else if unitless($value1) {
|
|
29
|
+
// First value is unitless, convert it to the unit of the second value
|
|
30
|
+
@return $value1 + unit-strip($value2);
|
|
31
|
+
} @else if unitless($value2) {
|
|
32
|
+
// Second value is unitless, convert it to the unit of the first value
|
|
33
|
+
@return unit-strip($value1) + $value2;
|
|
34
|
+
} @else if unit($value1) == unit($value2) {
|
|
35
|
+
// Both values have the same unit
|
|
36
|
+
@return $value1 + $value2;
|
|
37
|
+
}
|
|
38
|
+
// Mismatched units, return a warning
|
|
39
|
+
@warn "Cannot add values with different units: #{$value1} and #{$value2}";
|
|
40
|
+
@return null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/// Subtracts one value from another, handling units.
|
|
44
|
+
/// @param $value1 - First value
|
|
45
|
+
/// @param $value2 - Second value
|
|
46
|
+
/// @return - Difference of the two values
|
|
47
|
+
@function subtract($value1, $value2) {
|
|
48
|
+
@if unitless($value1) and unitless($value2) {
|
|
49
|
+
// Both values are unitless, return simple subtraction
|
|
50
|
+
@return $value1 - $value2;
|
|
51
|
+
} @else if unitless($value1) {
|
|
52
|
+
// First value is unitless, convert it to the unit of the second value
|
|
53
|
+
@return $value1 - unit-strip($value2);
|
|
54
|
+
} @else if unitless($value2) {
|
|
55
|
+
// Second value is unitless, convert it to the unit of the first value
|
|
56
|
+
@return unit-strip($value1) - $value2;
|
|
57
|
+
} @else if unit($value1) == unit($value2) {
|
|
58
|
+
// Both values have the same unit
|
|
59
|
+
@return $value1 - $value2;
|
|
60
|
+
}
|
|
61
|
+
// Mismatched units, return a warning
|
|
62
|
+
@warn "Cannot subtract values with different units: #{$value1} and #{$value2}";
|
|
63
|
+
@return null;
|
|
64
|
+
}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
// Copyright 2020 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
|
+
// Math | Ratio's
|
|
18
|
+
// ============================================================================
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
// Modular Scale Ratios Map
|
|
24
|
+
// This map contains common ratios used in modular scale calculations.
|
|
25
|
+
$ratio: (
|
|
26
|
+
|
|
27
|
+
// Musical Minor Interval
|
|
28
|
+
// ------------------------------------------------------------------------
|
|
29
|
+
"minor_second": 1.067, // Minor second interval
|
|
30
|
+
"minor_third": 1.2, // Minor third interval
|
|
31
|
+
"minor_fourth": 1.334, // Minor fourth interval (also known as diminished fifth)
|
|
32
|
+
"minor_fifth": 1.5, // Minor fifth interval
|
|
33
|
+
"minor_sixth": 1.6, // Minor sixth interval
|
|
34
|
+
"minor_seventh": 1.778, // Minor seventh interval
|
|
35
|
+
"minor_octave": 2, // Minor octave interval
|
|
36
|
+
|
|
37
|
+
// Musical Major Interval
|
|
38
|
+
// ------------------------------------------------------------------------
|
|
39
|
+
"major_second": 1.125, // Major second interval
|
|
40
|
+
"major_third": 1.25, // Major third interval
|
|
41
|
+
"major_fourth": 1.333, // Major fourth interval (perfect fourth)
|
|
42
|
+
"major_fifth": 1.5, // Major fifth interval (perfect fifth)
|
|
43
|
+
"major_sixth": 1.667, // Major sixth interval
|
|
44
|
+
"major_seventh": 1.875, // Major seventh interval
|
|
45
|
+
"major_octave": 2, // Major octave interval (perfect octave)
|
|
46
|
+
|
|
47
|
+
// Musical Perfect Interval
|
|
48
|
+
// ------------------------------------------------------------------------
|
|
49
|
+
"perfect_unison": 1, // Perfect unison, the same note
|
|
50
|
+
"perfect_second": 1.125, // Perfect second interval
|
|
51
|
+
"perfect_third": 1.25, // Perfect third interval
|
|
52
|
+
"perfect_fourth": 1.333, // Perfect fourth interval
|
|
53
|
+
"perfect_fifth": 1.5, // Perfect fifth interval
|
|
54
|
+
"perfect_sixth": 1.667, // Perfect sixth interval
|
|
55
|
+
"perfect_seventh": 1.875, // Perfect seventh interval
|
|
56
|
+
"perfect_octave": 2, // Perfect octave, double the frequency
|
|
57
|
+
"perfect_ninth": 2.25, // Perfect ninth interval
|
|
58
|
+
"perfect_tenth": 2.5, // Perfect tenth interval
|
|
59
|
+
"perfect_eleventh": 2.667, // Perfect eleventh interval
|
|
60
|
+
"perfect_twelfth": 3, // Perfect twelfth interval
|
|
61
|
+
"perfect_thirteenth": 3.333, // Perfect thirteenth interval
|
|
62
|
+
"perfect_fourteenth": 3.667, // Perfect fourteenth interval
|
|
63
|
+
"perfect_fifteenth": 4, // Perfect fifteenth interval, double octave
|
|
64
|
+
"double_octave": 4, // Twice the frequency of the perfect octave
|
|
65
|
+
"triple_octave": 8, // Three times the frequency of the perfect octave
|
|
66
|
+
|
|
67
|
+
// Musical Augmented Interval
|
|
68
|
+
// ------------------------------------------------------------------------
|
|
69
|
+
"augmented_unison": 1.059, // Slightly higher than perfect unison
|
|
70
|
+
"augmented_second": 1.122, // Slightly higher than major second
|
|
71
|
+
"augmented_third": 1.189, // Slightly higher than major third
|
|
72
|
+
"augmented_fourth": 1.414, // Augmented fourth, also known as tritone
|
|
73
|
+
"augmented_fifth": 1.587, // Slightly higher than perfect fifth
|
|
74
|
+
"augmented_sixth": 1.682, // Slightly higher than major sixth
|
|
75
|
+
"augmented_seventh": 1.782, // Slightly higher than major seventh
|
|
76
|
+
"augmented_octave": 2.059, // Slightly higher than perfect octave
|
|
77
|
+
|
|
78
|
+
// Musical Diminished Interval
|
|
79
|
+
// ------------------------------------------------------------------------
|
|
80
|
+
"diminished_unison": 0.943, // A diminished unison, slightly less than a perfect unison
|
|
81
|
+
"diminished_second": 1.053, // Diminished second interval, slightly less than a minor second
|
|
82
|
+
"diminished_third": 1.122, // Diminished third interval, slightly less than a minor third
|
|
83
|
+
"diminished_fourth": 1.260, // Diminished fourth, slightly less than a perfect fourth
|
|
84
|
+
"diminished_fifth": 1.414, // Tritone, halfway between a perfect fourth and perfect fifth
|
|
85
|
+
"diminished_sixth": 1.587, // Diminished sixth interval, slightly less than a major sixth
|
|
86
|
+
"diminished_seventh": 1.782, // Diminished seventh interval, slightly less than a major seventh
|
|
87
|
+
"diminished_octave": 1.961, // A diminished octave, slightly less than a perfect octave
|
|
88
|
+
|
|
89
|
+
// Root
|
|
90
|
+
// ------------------------------------------------------------------------
|
|
91
|
+
"root_two": 1.414, // Square root of 2
|
|
92
|
+
"root_three": 1.732, // Square root of 3
|
|
93
|
+
"root_four": 2, // Square root of 4
|
|
94
|
+
"root_five": 2.236, // Square root of 5
|
|
95
|
+
|
|
96
|
+
// Special
|
|
97
|
+
// ------------------------------------------------------------------------
|
|
98
|
+
"golden_ratio": 1.618,
|
|
99
|
+
"silver_ratio": 2.414, // Analogous to the golden ratio
|
|
100
|
+
"bronze_ratio": 1.927, // Analogous to silver and golden ratios
|
|
101
|
+
"pythagorean": 1.732, // Pythagorean constant, square root of 3
|
|
102
|
+
"phi": 1.618, // Another name for the golden ratio
|
|
103
|
+
"pi": 3.142, // Mathematical Pi value
|
|
104
|
+
"euler": 2.718, // Euler's number
|
|
105
|
+
"square": 1.414, // Square root of 2
|
|
106
|
+
"fibonacci": 1.618, // Fibonacci sequence ratio
|
|
107
|
+
"plastic_number": 1.324, // Plastic constant, another unique irrational number
|
|
108
|
+
"feigenbaum": 4.669, // Feigenbaum constant in chaos theory
|
|
109
|
+
"apollonian": 1.306, // Apollonian gasket, related to circle packing
|
|
110
|
+
"cosmic_ratio": 1.273, // Based on cosmic geometry
|
|
111
|
+
"parthenon_ratio": 1.618, // Ratio used in the Parthenon's architecture
|
|
112
|
+
"le_corbusier": 1.618, // Le Corbusier's modulor ratio
|
|
113
|
+
"vesica_piscis": 1.732, // Ratio from the vesica piscis shape
|
|
114
|
+
"egyptian_fraction": 1.571, // Ancient Egyptian architecture ratio
|
|
115
|
+
"harmonic_mean": 1.455, // Harmonic mean, a type of average
|
|
116
|
+
"gauss_constant": 0.834, // Gauss's constant related to the arithmetic-geometric mean
|
|
117
|
+
"super_golden": 2.058, // Super golden ratio, a higher order of the golden ratio
|
|
118
|
+
|
|
119
|
+
) !default;
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
/// Golden Ratio Function
|
|
123
|
+
/// A simple function to calculate sizes using the golden ratio, which can be
|
|
124
|
+
/// used for spacing, sizing elements, etc.
|
|
125
|
+
@function golden-ratio($size, $increment: 1) {
|
|
126
|
+
$golden-ratio: 1.618;
|
|
127
|
+
@return $size * pow($golden-ratio, $increment);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
// Modular Scale Function
|
|
134
|
+
/// Calculates sizes (like font-size, spacing) based on a modular scale.
|
|
135
|
+
/// This is useful for maintaining harmonious proportions in typography and layout.
|
|
136
|
+
/// @param $increment - The step on the scale, can be positive or negative.
|
|
137
|
+
/// @param $base - The base value to scale from, defaults to 1em (typographic base size).
|
|
138
|
+
/// @param $ratio - The ratio to use for scaling, defaults to the Golden Ratio.
|
|
139
|
+
/// @return - The calculated value based on the modular scale.
|
|
140
|
+
@function modular-scale($increment: 1, $base: 1em, $ratio: 1.618) {
|
|
141
|
+
// Validate inputs
|
|
142
|
+
@if type-of($increment) != 'number' {
|
|
143
|
+
@error "Step must be a number.";
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@if type-of($base) != 'number' and not unitless($base) {
|
|
147
|
+
@error "Base must be a number with or without units.";
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@if type-of($ratio) != 'number' or $ratio <= 0 {
|
|
151
|
+
@error "Ratio must be a positive number.";
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// Calculate the modular scale value
|
|
155
|
+
@return $base * pow($ratio, $increment);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
$ratio: map-get($ratio, $ratio-name);
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
// body {
|
|
162
|
+
// font-size: modular-scale(0); // Equal to the base size, 1em
|
|
163
|
+
// }
|
|
164
|
+
|
|
165
|
+
// h1 {
|
|
166
|
+
// font-size: modular-scale(2); // Larger than the base size
|
|
167
|
+
// }
|
|
168
|
+
|
|
169
|
+
// .small-text {
|
|
170
|
+
// font-size: modular-scale(-1); // Smaller than the base size
|
|
171
|
+
// }
|
|
172
|
+
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
// Copyright 2020 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
|
+
// Math | Scales
|
|
18
|
+
// ============================================================================
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
$scale_musical: (
|
|
22
|
+
"monotonic": 1,
|
|
23
|
+
"ditonic": 2,
|
|
24
|
+
"tritonic": 3,
|
|
25
|
+
"tetratonic": 4,
|
|
26
|
+
"pentatonic": 5,
|
|
27
|
+
"hexatonic": 6,
|
|
28
|
+
"peptatonic": 7,
|
|
29
|
+
"octatonic": 8,
|
|
30
|
+
"nonatonic": 9,
|
|
31
|
+
"dodecatonic": 12,
|
|
32
|
+
) !default;
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
/// Classic Typographic Scale
|
|
36
|
+
/// Design software, such as Adobe InDesig, usually has such a scale.
|
|
37
|
+
/// This scale has historical significance — used by typographers of the early
|
|
38
|
+
/// Renaissance; it has remained unchanged for 400 years.
|
|
39
|
+
$typographic_scale_classic: (
|
|
40
|
+
1: q( 6),
|
|
41
|
+
2: q( 7), // +1
|
|
42
|
+
3: q( 8), // +1
|
|
43
|
+
4: q( 9), // +1
|
|
44
|
+
5: q(10), // +1
|
|
45
|
+
6: q(11), // +1
|
|
46
|
+
7: q(12), // +1
|
|
47
|
+
8: q(14), // +2
|
|
48
|
+
9: q(16), // +2
|
|
49
|
+
10: q(18), // +2
|
|
50
|
+
11: q(21), // +3
|
|
51
|
+
12: q(24), // +3
|
|
52
|
+
13: q(36), // +12
|
|
53
|
+
14: q(48), // +12
|
|
54
|
+
15: q(60), // +12
|
|
55
|
+
16: q(72), // +12
|
|
56
|
+
17: q(84), // +12
|
|
57
|
+
18: q(96), // +12
|
|
58
|
+
) !default;
|
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
// Copyright 2020 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
|
+
// Math | Number Sequences
|
|
18
|
+
// ============================================================================
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
// Fibonacci Number Sequence
|
|
22
|
+
// ----------------------------------------------------------------------------
|
|
23
|
+
|
|
24
|
+
/// Calculates the nth Fibonacci number using a recursive approach.
|
|
25
|
+
/// In mathematics, the Fibonacci numbers form a sequence such that each number
|
|
26
|
+
/// is the sum of the two preceding ones, usually starting with 0 and 1.
|
|
27
|
+
/// @param {Number} $n - The position in the Fibonacci sequence to calculate.
|
|
28
|
+
/// @return {Number} - The nth Fibonacci number.
|
|
29
|
+
@function sequence_fibonacci($n) {
|
|
30
|
+
|
|
31
|
+
// Return null for negative index to avoid unnecessary recursion
|
|
32
|
+
@if $n < 0 {
|
|
33
|
+
@warn "Index #{$n} is not valid for Fibonacci sequence.";
|
|
34
|
+
@return null;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Base cases
|
|
38
|
+
@if $n == 0 {
|
|
39
|
+
@return 0;
|
|
40
|
+
} @else if $n == 1 {
|
|
41
|
+
@return 1;
|
|
42
|
+
} @else {
|
|
43
|
+
// Recursive case
|
|
44
|
+
@return sequence_fibonacci($n - 1) + sequence_fibonacci($n - 2);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
// Lucas Number Sequence
|
|
51
|
+
// ----------------------------------------------------------------------------
|
|
52
|
+
|
|
53
|
+
/// Calculates the nth Lucas number using a recursive approach.
|
|
54
|
+
/// In mathematics, the Lucas numbers are an integer sequence named after the
|
|
55
|
+
/// mathematician François Édouard Anatole Lucas (1842–1891), who studied both
|
|
56
|
+
/// that sequence and the closely related Fibonacci numbers. Lucas numbers and
|
|
57
|
+
/// Fibonacci numbers form complementary instances of Lucas sequences
|
|
58
|
+
/// @param {Number} $n - The position in the Lucas sequence to calculate.
|
|
59
|
+
/// @return {Number} - The nth Lucas number.
|
|
60
|
+
@function sequence_lucas($n) {
|
|
61
|
+
|
|
62
|
+
// Return null for negative index to avoid unnecessary recursion
|
|
63
|
+
@if $n < 0 {
|
|
64
|
+
@warn "Index #{$n} is not valid for Lucas sequence.";
|
|
65
|
+
@return null;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Base cases
|
|
69
|
+
@if $n == 0 {
|
|
70
|
+
@return 2;
|
|
71
|
+
} @else if $n == 1 {
|
|
72
|
+
@return 1;
|
|
73
|
+
} @else {
|
|
74
|
+
// Recursive case
|
|
75
|
+
@return sequence_lucas($n - 1) + sequence_lucas($n - 2);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
// Prime Number Sequence
|
|
82
|
+
// ----------------------------------------------------------------------------
|
|
83
|
+
|
|
84
|
+
/// Checks if a number is a prime number.
|
|
85
|
+
/// Prime numbers are natural numbers greater than 1 that are not a product
|
|
86
|
+
/// of two smaller natural numbers.
|
|
87
|
+
/// This function returns true if the number is prime, otherwise false.
|
|
88
|
+
/// @param {Number} $n - The number to check.
|
|
89
|
+
/// @return {Boolean} - `true` if the number is prime, `false` otherwise.
|
|
90
|
+
@function is_prime($n) {
|
|
91
|
+
@if $n <= 1 {
|
|
92
|
+
@return false;
|
|
93
|
+
}
|
|
94
|
+
@for $i from 2 through math.sqrt($n) {
|
|
95
|
+
@if $n % $i == 0 {
|
|
96
|
+
@return false;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
@return true;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
// Catalan Number Sequence
|
|
104
|
+
// ----------------------------------------------------------------------------
|
|
105
|
+
|
|
106
|
+
/// Calculates the factorial of a number.
|
|
107
|
+
/// @param {Number} $n - The number to calculate factorial for.
|
|
108
|
+
/// @return {Number} - The factorial of $n.
|
|
109
|
+
@function factorial($n) {
|
|
110
|
+
$result: 1;
|
|
111
|
+
@for $i from 1 through $n {
|
|
112
|
+
$result: $result * $i;
|
|
113
|
+
}
|
|
114
|
+
@return $result;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/// Calculates the nth Catalan number.
|
|
118
|
+
/// Catalan numbers are a sequence of natural numbers that have found
|
|
119
|
+
/// applications in various combinatorial problems. The nth Catalan number
|
|
120
|
+
/// is calculated using the formula C(n) = (2n)! / (n+1)!n!.
|
|
121
|
+
/// @param {Number} $n - The position in the Catalan series to calculate.
|
|
122
|
+
/// @return {Number} - The nth Catalan number.
|
|
123
|
+
@function sequence_catalan($n) {
|
|
124
|
+
@return factorial(2 * $n) / (factorial($n + 1) * factorial($n));
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
// Harmonic Sequence
|
|
129
|
+
// ----------------------------------------------------------------------------
|
|
130
|
+
|
|
131
|
+
/// Calculates the nth term of the harmonic series.
|
|
132
|
+
/// The harmonic series is the sum of reciprocals of the positive integers.
|
|
133
|
+
/// For simplicity, we calculate the nth term as 1/n.
|
|
134
|
+
/// @param {Number} $n - The position in the harmonic series to calculate.
|
|
135
|
+
/// @return {Number} - The nth term of the harmonic series.
|
|
136
|
+
@function sequence_harmonic($n) {
|
|
137
|
+
@if $n <= 0 {
|
|
138
|
+
@warn "Index #{$n} is not valid for harmonic series.";
|
|
139
|
+
@return null;
|
|
140
|
+
}
|
|
141
|
+
@return 1 / $n;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
// Geometric Sequence
|
|
146
|
+
// ----------------------------------------------------------------------------
|
|
147
|
+
|
|
148
|
+
/// Calculates the nth term of a geometric series with a ratio of 2.
|
|
149
|
+
/// The geometric series is a series with a constant ratio between successive
|
|
150
|
+
/// terms. Here we calculate the nth term for a series with a ratio of 2
|
|
151
|
+
/// (doubling each term).
|
|
152
|
+
/// @param {Number} $n - The position in the geometric series to calculate.
|
|
153
|
+
/// @return {Number} - The nth term of the geometric series.
|
|
154
|
+
@function sequence_geometric($n) {
|
|
155
|
+
@if $n < 0 {
|
|
156
|
+
@warn "Negative index #{$n} is not valid for geometric series.";
|
|
157
|
+
@return null;
|
|
158
|
+
}
|
|
159
|
+
@return pow(2, $n - 1);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
// Superfactorial Sequence
|
|
164
|
+
// ----------------------------------------------------------------------------
|
|
165
|
+
|
|
166
|
+
/// Calculates the superfactorial of a number.
|
|
167
|
+
/// The superfactorial of a number n is the product of the first n factorials.
|
|
168
|
+
/// @param {Number} $n - The number to calculate superfactorial for.
|
|
169
|
+
/// @return {Number} - The superfactorial of $n.
|
|
170
|
+
@function sequence_superfactorial($n) {
|
|
171
|
+
$result: 1;
|
|
172
|
+
@for $i from 1 through $n {
|
|
173
|
+
$factorial: 1;
|
|
174
|
+
@for $j from 1 through $i {
|
|
175
|
+
$factorial: $factorial * $j;
|
|
176
|
+
}
|
|
177
|
+
$result: $result * $factorial;
|
|
178
|
+
}
|
|
179
|
+
@return $result;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
// Triangular Number Sequence
|
|
184
|
+
// ----------------------------------------------------------------------------
|
|
185
|
+
|
|
186
|
+
/// Calculates the nth triangular number.
|
|
187
|
+
/// In mathematics, a triangular number or triangle number counts objects arranged
|
|
188
|
+
/// in an equilateral triangle. The nth triangular number is the number of dots
|
|
189
|
+
/// Triangular numbers are the sum of the first n natural numbers. The nth
|
|
190
|
+
/// triangular number is n(n + 1)/2.
|
|
191
|
+
/// composing a triangle with n dots on a side.
|
|
192
|
+
/// @param {Number} $n - The position in the triangular series to calculate.
|
|
193
|
+
/// @return {Number} - The nth triangular number.
|
|
194
|
+
@function sequence_triangular($n) {
|
|
195
|
+
|
|
196
|
+
// Return null for non-positive index to avoid invalid numbers
|
|
197
|
+
@if $n <= 0 {
|
|
198
|
+
@warn "Index #{$n} is not valid for triangular series.";
|
|
199
|
+
@return null;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// Calculate the nth triangular number
|
|
203
|
+
@return $n * ($n + 1) / 2;
|
|
204
|
+
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
// Square Number Sequence
|
|
209
|
+
// ----------------------------------------------------------------------------
|
|
210
|
+
|
|
211
|
+
/// Calculates the nth square number.
|
|
212
|
+
/// Square numbers are numbers that can be expressed as the product of an
|
|
213
|
+
/// integer with itself. The nth square number is n².
|
|
214
|
+
/// @param {Number} $n - The position in the square series to calculate.
|
|
215
|
+
/// @return {Number} - The nth square number.
|
|
216
|
+
@function sequence_square($n) {
|
|
217
|
+
@if $n < 0 {
|
|
218
|
+
@warn "Negative index #{$n} is not valid for square series.";
|
|
219
|
+
@return null;
|
|
220
|
+
}
|
|
221
|
+
@return $n * $n;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
// Pentagonal Number Sequence
|
|
226
|
+
// ----------------------------------------------------------------------------
|
|
227
|
+
|
|
228
|
+
/// Calculates the nth pentagonal number.
|
|
229
|
+
/// In mathematics, a pentagonal number is a figurate number that extends the
|
|
230
|
+
/// concept of triangular and square numbers to the pentagon.
|
|
231
|
+
/// @param {Number} $n - The position in the pentagonal series to calculate.
|
|
232
|
+
/// @return {Number} - The nth pentagonal number.
|
|
233
|
+
@function sequence_pentagonal($n) {
|
|
234
|
+
|
|
235
|
+
// Return null for non-positive index to avoid invalid numbers
|
|
236
|
+
@if $n <= 0 {
|
|
237
|
+
@warn "Index #{$n} is not valid for pentagonal series.";
|
|
238
|
+
@return null;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// Calculate the nth pentagonal number
|
|
242
|
+
@return (3 * $n * $n - $n) / 2;
|
|
243
|
+
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
// Hexagonal Number Sequence
|
|
248
|
+
// ----------------------------------------------------------------------------
|
|
249
|
+
|
|
250
|
+
/// Calculates the nth hexagonal number.
|
|
251
|
+
/// Hexagonal numbers are figurate numbers that represent a hexagon. The nth
|
|
252
|
+
/// hexagonal number is given by 2n² - n.
|
|
253
|
+
/// @param {Number} $n - The position in the hexagonal series to calculate.
|
|
254
|
+
/// @return {Number} - The nth hexagonal number.
|
|
255
|
+
@function sequence_hexagonal($n) {
|
|
256
|
+
@if $n <= 0 {
|
|
257
|
+
@warn "Index #{$n} is not valid for hexagonal series.";
|
|
258
|
+
@return null;
|
|
259
|
+
}
|
|
260
|
+
@return 2 * $n * $n - $n;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
// Cube Number Sequence
|
|
265
|
+
// ----------------------------------------------------------------------------
|
|
266
|
+
|
|
267
|
+
/// Calculates the nth cube number.
|
|
268
|
+
/// Cube numbers are the numbers raised to the power of three.
|
|
269
|
+
/// The nth cube number is n³.
|
|
270
|
+
/// @param {Number} $n - The position in the cube series to calculate.
|
|
271
|
+
/// @return {Number} - The nth cube number.
|
|
272
|
+
@function sequence_cube($n) {
|
|
273
|
+
@if $n < 0 {
|
|
274
|
+
@warn "Negative index #{$n} is not valid for cube series.";
|
|
275
|
+
@return null;
|
|
276
|
+
}
|
|
277
|
+
@return $n * $n * $n;
|
|
278
|
+
}
|