int-components 0.0.25 → 0.0.28
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/dist/index.css
CHANGED
|
@@ -1248,6 +1248,9 @@
|
|
|
1248
1248
|
font-family: var(--font-secondary, "ABCGravity", sans-serif);
|
|
1249
1249
|
font-weight: 900;
|
|
1250
1250
|
font-size: 32em;
|
|
1251
|
+
word-wrap: break-word;
|
|
1252
|
+
overflow-wrap: break-word;
|
|
1253
|
+
word-break: break-word;
|
|
1251
1254
|
}
|
|
1252
1255
|
|
|
1253
1256
|
@media (min-width: 500px) {
|
|
@@ -1271,6 +1274,9 @@
|
|
|
1271
1274
|
line-height: 1;
|
|
1272
1275
|
text-align: center;
|
|
1273
1276
|
font-size: 14em;
|
|
1277
|
+
word-wrap: break-word;
|
|
1278
|
+
overflow-wrap: break-word;
|
|
1279
|
+
word-break: break-word;
|
|
1274
1280
|
}
|
|
1275
1281
|
|
|
1276
1282
|
@media (min-width: 500px) {
|
|
@@ -1248,6 +1248,9 @@
|
|
|
1248
1248
|
font-family: var(--font-secondary, "ABCGravity", sans-serif);
|
|
1249
1249
|
font-weight: 900;
|
|
1250
1250
|
font-size: 32em;
|
|
1251
|
+
word-wrap: break-word;
|
|
1252
|
+
overflow-wrap: break-word;
|
|
1253
|
+
word-break: break-word;
|
|
1251
1254
|
}
|
|
1252
1255
|
|
|
1253
1256
|
@media (min-width: 500px) {
|
|
@@ -1271,6 +1274,9 @@
|
|
|
1271
1274
|
line-height: 1;
|
|
1272
1275
|
text-align: center;
|
|
1273
1276
|
font-size: 14em;
|
|
1277
|
+
word-wrap: break-word;
|
|
1278
|
+
overflow-wrap: break-word;
|
|
1279
|
+
word-break: break-word;
|
|
1274
1280
|
}
|
|
1275
1281
|
|
|
1276
1282
|
@media (min-width: 500px) {
|
|
@@ -202,6 +202,9 @@
|
|
|
202
202
|
font-family: var(--font-secondary, "ABCGravity", sans-serif);
|
|
203
203
|
font-weight: 900;
|
|
204
204
|
font-size: 32em;
|
|
205
|
+
word-wrap: break-word;
|
|
206
|
+
overflow-wrap: break-word;
|
|
207
|
+
word-break: break-word;
|
|
205
208
|
}
|
|
206
209
|
|
|
207
210
|
@media (min-width: 500px) {
|
|
@@ -225,6 +228,9 @@
|
|
|
225
228
|
line-height: 1;
|
|
226
229
|
text-align: center;
|
|
227
230
|
font-size: 14em;
|
|
231
|
+
word-wrap: break-word;
|
|
232
|
+
overflow-wrap: break-word;
|
|
233
|
+
word-break: break-word;
|
|
228
234
|
}
|
|
229
235
|
|
|
230
236
|
@media (min-width: 500px) {
|
package/dist/themes/layout.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export declare const staticLayoutCss = "";
|
|
2
|
-
export declare const fluidLayoutCss = "\n @media (min-width: 0px) {\n :root {\n --min-vw: 375;\n --max-vw: 500;\n --bp-vw: 375;\n --bp-font-size: 1;\n }\n }\n\n @media (min-width: 500px) {\n :root {\n --min-vw: 500;\n --max-vw: 1152;\n --bp-vw: 768;\n --bp-font-size: 1;\n }\n }\n\n @media (min-width: 1152px) {\n :root {\n --min-vw: 1152;\n --max-vw: 1600;\n --bp-vw: 1600;\n --bp-font-size: 1;\n }\n }\n\n :root {\n --diff-min-vw: calc(var(--min-vw) / var(--bp-vw));\n --min-font-size: calc(var(--bp-font-size) * var(--diff-min-vw));\n --diff-max-vw: calc(var(--max-vw) / var(--bp-vw));\n --max-font-size: calc(var(--bp-font-size) * var(--diff-max-vw));\n --diff-font-size: calc(var(--max-font-size) - var(--min-font-size));\n --diff-vw: calc(var(--max-vw) - var(--min-vw));\n --slope: calc(var(--diff-font-size) / var(--diff-vw));\n --max-font-size-px: calc(var(--max-font-size) * 1px);\n --min-font-size-px: calc(var(--min-font-size) * 1px);\n --min-vw-px: calc(var(--min-vw) * 1px);\n --
|
|
2
|
+
export declare const fluidLayoutCss = "\n @media (min-width: 0px) {\n :root {\n --min-vw: 375;\n --max-vw: 500;\n --bp-vw: 375;\n --bp-font-size: 1;\n }\n }\n\n @media (min-width: 500px) {\n :root {\n --min-vw: 500;\n --max-vw: 1152;\n --bp-vw: 768;\n --bp-font-size: 1;\n }\n }\n\n @media (min-width: 1152px) {\n :root {\n --min-vw: 1152;\n --max-vw: 1600;\n --bp-vw: 1600;\n --bp-font-size: 1;\n }\n }\n\n :root {\n --diff-min-vw: calc(var(--min-vw) / var(--bp-vw));\n --min-font-size: calc(var(--bp-font-size) * var(--diff-min-vw));\n --diff-max-vw: calc(var(--max-vw) / var(--bp-vw));\n --max-font-size: calc(var(--bp-font-size) * var(--diff-max-vw));\n --diff-font-size: calc(var(--max-font-size) - var(--min-font-size));\n --diff-vw: calc(var(--max-vw) - var(--min-vw));\n --slope: calc(var(--diff-font-size) / var(--diff-vw));\n --max-font-size-px: calc(var(--max-font-size) * 1px);\n --min-font-size-px: calc(var(--min-font-size) * 1px);\n --min-vw-px: calc(var(--min-vw) * 1px);\n --fluid-font-size-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-font-size-px));\n --result-fs: clamp(var(--min-font-size-px), var(--fluid-font-size-px), var(--max-font-size-px));\n }\n\n html {\n font-size: var(--result-fs);\n }\n\n body {\n font-size: initial;\n }\n";
|
|
3
3
|
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/themes/layout.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/themes/layout.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,cAAc,42CAkD1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as n from"react/jsx-runtime";var t={178:(t,o,a)=>{var
|
|
1
|
+
import*as n from"react/jsx-runtime";var t={178:(t,o,a)=>{var i,f;t.exports=(i={Fragment:()=>n.Fragment,jsx:()=>n.jsx,jsxs:()=>n.jsxs},f={},a.d(f,i),f)},992:(n,t,o)=>{o.d(t,{b:()=>a}),globalThis.__fluidModeState||(globalThis.__fluidModeState={state:!1});const a=globalThis.__fluidModeState}},o={};function a(n){var i=o[n];if(void 0!==i)return i.exports;var f=o[n]={exports:{}};return t[n](f,f.exports,a),f.exports}a.d=(n,t)=>{for(var o in t)a.o(t,o)&&!a.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},a.o=(n,t)=>Object.prototype.hasOwnProperty.call(n,t);var i=a(178);var f=a(992);const e=({children:n,fluidMode:t=!1})=>{f.b.state=t;const o=`\n @font-face {\n font-family: 'Aeonik';\n src: url('https://of.worldota.net/fonts/aeonik/Aeonik-Bold.woff2') format('woff2');\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Aeonik';\n src: url('https://of.worldota.net/fonts/aeonik/Aeonik-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'ABCGravity';\n src: url('https://of.worldota.net/fonts/ABCGravity/ABCGravity.woff2') format('woff2');\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n }\n \n ${t?"\n @media (min-width: 0px) {\n :root {\n --min-vw: 375;\n --max-vw: 500;\n --bp-vw: 375;\n --bp-font-size: 1;\n }\n }\n\n @media (min-width: 500px) {\n :root {\n --min-vw: 500;\n --max-vw: 1152;\n --bp-vw: 768;\n --bp-font-size: 1;\n }\n }\n\n @media (min-width: 1152px) {\n :root {\n --min-vw: 1152;\n --max-vw: 1600;\n --bp-vw: 1600;\n --bp-font-size: 1;\n }\n }\n\n :root {\n --diff-min-vw: calc(var(--min-vw) / var(--bp-vw));\n --min-font-size: calc(var(--bp-font-size) * var(--diff-min-vw));\n --diff-max-vw: calc(var(--max-vw) / var(--bp-vw));\n --max-font-size: calc(var(--bp-font-size) * var(--diff-max-vw));\n --diff-font-size: calc(var(--max-font-size) - var(--min-font-size));\n --diff-vw: calc(var(--max-vw) - var(--min-vw));\n --slope: calc(var(--diff-font-size) / var(--diff-vw));\n --max-font-size-px: calc(var(--max-font-size) * 1px);\n --min-font-size-px: calc(var(--min-font-size) * 1px);\n --min-vw-px: calc(var(--min-vw) * 1px);\n --fluid-font-size-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-font-size-px));\n --result-fs: clamp(var(--min-font-size-px), var(--fluid-font-size-px), var(--max-font-size-px));\n }\n\n html {\n font-size: var(--result-fs);\n }\n\n body {\n font-size: initial;\n }\n":""};\n `;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("style",{dangerouslySetInnerHTML:{__html:o}}),n]})},r=n=>("boolean"==typeof n?n:f.b.state)?"layout-module__fluidLayout--BNE04":"layout-module__staticLayout--x_6dR";export{e as ThemeProvider,r as useContainerFluidCssClass};
|