diff --git a/package-lock.json b/package-lock.json index 574d452d..57998e6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,6 @@ "husky": "^9.0.0", "linkedom": "^0.18.0", "lint-staged": "^16.0.0", - "markdownlint-config-fluid": "^0.1.0", "npm-run-all2": "^8.0.0", "rimraf": "^6.0.0", "start-server-and-test": "^3.0.0", @@ -1785,9 +1784,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1804,9 +1800,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1823,9 +1816,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1842,9 +1832,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1861,9 +1848,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1880,9 +1864,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -1899,9 +1880,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1924,9 +1902,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1949,9 +1924,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1974,9 +1946,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1999,9 +1968,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2024,9 +1990,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4854,9 +4817,9 @@ "license": "MIT" }, "node_modules/follow-redirects": { - "version": "1.15.11", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", - "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", + "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==", "funding": [ { "type": "individual", @@ -5181,9 +5144,9 @@ } }, "node_modules/globby": { - "version": "16.1.1", - "resolved": "https://registry.npmjs.org/globby/-/globby-16.1.1.tgz", - "integrity": "sha512-dW7vl+yiAJSp6aCekaVnVJxurRv7DCOLyXqEG3RYMYUg7AuJ2jCqPkZTA8ooqC2vtnkaMcV5WfFBMuEnTu1OQg==", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-16.2.0.tgz", + "integrity": "sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==", "dev": true, "license": "MIT", "dependencies": { @@ -6223,9 +6186,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -6246,9 +6206,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -6269,9 +6226,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -6292,9 +6246,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -6424,9 +6375,9 @@ } }, "node_modules/liquidjs": { - "version": "10.25.5", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz", - "integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==", + "version": "10.25.7", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.7.tgz", + "integrity": "sha512-rPCjJLiD4eDhQjvv964AeXFC+HbeYBbZrd7Z82Q6hqv1lX7G+5w4SJcKLn9CAAAwHI4aS3dTdo083UB79K3pDA==", "license": "MIT", "dependencies": { "commander": "^10.0.0" @@ -6697,13 +6648,13 @@ } }, "node_modules/markdownlint-cli2": { - "version": "0.22.0", - "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.22.0.tgz", - "integrity": "sha512-mOC9BY/XGtdX3M9n3AgERd79F0+S7w18yBBTNIQ453sI87etZfp1z4eajqSMV70CYjbxKe5ktKvT2HCpvcWx9w==", + "version": "0.22.1", + "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.22.1.tgz", + "integrity": "sha512-X14ZbytybDCXAViDmtN4DKLt9ZTrRn+oOrxTYlg3a65jS6QcYYbAkGPh/En2L/GDNbFYJ6lKaQSUNrrbN1bPrw==", "dev": true, "license": "MIT", "dependencies": { - "globby": "16.1.1", + "globby": "16.2.0", "js-yaml": "4.1.1", "jsonc-parser": "3.3.1", "jsonpointer": "5.0.1", @@ -6711,7 +6662,7 @@ "markdownlint": "0.40.0", "markdownlint-cli2-formatter-default": "0.0.6", "micromatch": "4.0.8", - "smol-toml": "1.6.0" + "smol-toml": "1.6.1" }, "bin": { "markdownlint-cli2": "markdownlint-cli2-bin.mjs" @@ -6736,91 +6687,6 @@ "markdownlint-cli2": ">=0.0.4" } }, - "node_modules/markdownlint-config-fluid": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/markdownlint-config-fluid/-/markdownlint-config-fluid-0.1.8.tgz", - "integrity": "sha512-PPkh/5Khy59shn6v2/f9BDW6q6xfhaD/SBu2wLGrU03HAMabKLi3fzVFqmrZ1k9OFVAQA5Neyk2cmiEEnRoO6Q==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "infusion": "4.7.1", - "markdownlint": "0.36.1" - } - }, - "node_modules/markdownlint-config-fluid/node_modules/entities": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", - "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, - "license": "BSD-2-Clause", - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, - "node_modules/markdownlint-config-fluid/node_modules/infusion": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/infusion/-/infusion-4.7.1.tgz", - "integrity": "sha512-a+Pljetuvq6nfdGq73MOaoNd/EkiQFNqMKbE4xkUtv0ru2uDWtO4ZHB+MAuxFaaGFuOCbvK01TtESEOehS3zPg==", - "dev": true, - "license": "(BSD-3-Clause OR ECL-2.0)", - "dependencies": { - "fluid-resolve": "1.3.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/markdownlint-config-fluid/node_modules/markdown-it": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", - "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", - "dev": true, - "license": "MIT", - "dependencies": { - "argparse": "^2.0.1", - "entities": "^4.4.0", - "linkify-it": "^5.0.0", - "mdurl": "^2.0.0", - "punycode.js": "^2.3.1", - "uc.micro": "^2.1.0" - }, - "bin": { - "markdown-it": "bin/markdown-it.mjs" - } - }, - "node_modules/markdownlint-config-fluid/node_modules/markdownlint": { - "version": "0.36.1", - "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.36.1.tgz", - "integrity": "sha512-s73fU2CQN7WCgjhaQUQ8wYESQNzGRNOKDd+3xgVqu8kuTEhmwepd/mxOv1LR2oV046ONrTLBFsM7IoKWNvmy5g==", - "dev": true, - "license": "MIT", - "dependencies": { - "markdown-it": "14.1.0", - "markdownlint-micromark": "0.1.12" - }, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/DavidAnson" - } - }, - "node_modules/markdownlint-micromark": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.12.tgz", - "integrity": "sha512-RlB6EwMGgc0sxcIhOQ2+aq7Zw1V2fBnzbXKGgYK/mVWdT7cz34fteKSwfYeo4rL6+L/q2tyC9QtD/PgZbkdyJQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/DavidAnson" - } - }, "node_modules/markdownlint/node_modules/string-width": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz", @@ -8558,9 +8424,9 @@ } }, "node_modules/postcss": { - "version": "8.5.9", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz", - "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==", + "version": "8.5.10", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz", + "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==", "dev": true, "funding": [ { @@ -9357,9 +9223,9 @@ } }, "node_modules/smol-toml": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.6.0.tgz", - "integrity": "sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.6.1.tgz", + "integrity": "sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==", "dev": true, "license": "BSD-3-Clause", "engines": { diff --git a/package.json b/package.json index 67f99b84..e27e226f 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "husky": "^9.0.0", "linkedom": "^0.18.0", "lint-staged": "^16.0.0", - "markdownlint-config-fluid": "^0.1.0", "npm-run-all2": "^8.0.0", "rimraf": "^6.0.0", "start-server-and-test": "^3.0.0", diff --git a/src/assets/styles/all.css b/src/assets/styles/all.css index 0bee33ed..b67506f0 100644 --- a/src/assets/styles/all.css +++ b/src/assets/styles/all.css @@ -9,22 +9,46 @@ } @font-face { - font-family: Martel; + font-family: Merriweather; + font-stretch: 100%; + font-style: italic; + font-weight: 300; + src: + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-300-italic.woff2") format('woff2'), + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-300-italic.woff") format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: Merriweather; + font-stretch: 100%; + font-style: italic; + font-weight: 800; + src: + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-800-italic.woff2") format('woff2'), + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-800-italic.woff") format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: Merriweather; + font-stretch: 100%; font-style: normal; - font-weight: 400; + font-weight: 300; src: - url("https://fonts.bunny.net/martel/files/martel-latin-400-normal.woff2") format("woff2"), - url("https://fonts.bunny.net/martel/files/martel-latin-400-normal.woff") format("woff"); + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-300-normal.woff2") format('woff2'), + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-300-normal.woff") format('woff'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: Martel; + font-family: Merriweather; + font-stretch: 100%; font-style: normal; - font-weight: 700; + font-weight: 800; src: - url("https://fonts.bunny.net/martel/files/martel-latin-700-normal.woff2") format("woff2"), - url("https://fonts.bunny.net/martel/files/martel-latin-700-normal.woff") format("woff"); + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-800-normal.woff2") format('woff2'), + url("https://fonts.bunny.net/merriweather/files/merriweather-latin-800-normal.woff") format('woff'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @@ -90,7 +114,7 @@ --fi-font-weight-semibold: 600; --fi-font-weight-bold: 700; --fi-font-weight-extrabold: 800; - --fi-font-family-body: martel, serif; + --fi-font-family-body: merriweather, serif; --fi-font-family-display-alt: diphylleia, serif; --fi-font-family-display: mulish, sans-serif; @@ -239,37 +263,91 @@ /* Fluid Spacing @link https://utopia.fyi/space/calculator?c=360,16,1.2,1440,32,1.25,5,2,&s=0.75|0.625,1.5|2|2.5|3|3.75|4.375|6|7|14,xs-2xs|l-6xl|4xl-l|5xl-3xl&g=s,l,xl,12 */ - --fi-space-fluid-2xs: clamp(0.625rem, 0.4167rem + 0.9259vw, 1.25rem); /* Space 2xs: 10px → 20px */ - --fi-space-fluid-xs: clamp(0.75rem, 0.5rem + 1.1111vw, 1.5rem); /* Space xs: 12px → 24px */ - --fi-space-fluid-s: clamp(1rem, 0.6667rem + 1.4815vw, 2rem); /* Space s: 16px → 32px */ - --fi-space-fluid-m: clamp(1.5rem, 1rem + 2.2222vw, 3rem); /* Space m: 24px → 48px */ - --fi-space-fluid-l: clamp(2rem, 1.3333rem + 2.963vw, 4rem); /* Space l: 32px → 64px */ - --fi-space-fluid-xl: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem); /* Space xl: 40px → 80px */ - --fi-space-fluid-2xl: clamp(3rem, 2rem + 4.4444vw, 6rem); /* Space 2xl: 48px → 96px */ - --fi-space-fluid-3xl: clamp(3.75rem, 2.5rem + 5.5556vw, 7.5rem); /* Space 3xl: 60px → 120px */ - --fi-space-fluid-4xl: clamp(4.375rem, 2.9167rem + 6.4815vw, 8.75rem); /* Space 4xl: 70px → 140px */ - --fi-space-fluid-5xl: clamp(6rem, 4rem + 8.8889vw, 12rem); /* Space 5xl: 96px → 192px */ - --fi-space-fluid-6xl: clamp(7rem, 4.6667rem + 10.3704vw, 14rem); /* Space 6xl: 112px → 224px */ - --fi-space-fluid-7xl: clamp(14rem, 9.3333rem + 20.7407vw, 28rem); /* Space 7xl: 224px → 448px */ + --fi-space-fluid-2xs: clamp(0.625rem, 0.4167rem + 0.9259vw, 1.25rem); + + /* Space 2xs: 10px → 20px */ + --fi-space-fluid-xs: clamp(0.75rem, 0.5rem + 1.1111vw, 1.5rem); + + /* Space xs: 12px → 24px */ + --fi-space-fluid-s: clamp(1rem, 0.6667rem + 1.4815vw, 2rem); + + /* Space s: 16px → 32px */ + --fi-space-fluid-m: clamp(1.5rem, 1rem + 2.2222vw, 3rem); + + /* Space m: 24px → 48px */ + --fi-space-fluid-l: clamp(2rem, 1.3333rem + 2.963vw, 4rem); + + /* Space l: 32px → 64px */ + --fi-space-fluid-xl: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem); + + /* Space xl: 40px → 80px */ + --fi-space-fluid-2xl: clamp(3rem, 2rem + 4.4444vw, 6rem); + + /* Space 2xl: 48px → 96px */ + --fi-space-fluid-3xl: clamp(3.75rem, 2.5rem + 5.5556vw, 7.5rem); + + /* Space 3xl: 60px → 120px */ + --fi-space-fluid-4xl: clamp(4.375rem, 2.9167rem + 6.4815vw, 8.75rem); + + /* Space 4xl: 70px → 140px */ + --fi-space-fluid-5xl: clamp(6rem, 4rem + 8.8889vw, 12rem); + + /* Space 5xl: 96px → 192px */ + --fi-space-fluid-6xl: clamp(7rem, 4.6667rem + 10.3704vw, 14rem); + + /* Space 6xl: 112px → 224px */ + --fi-space-fluid-7xl: clamp(14rem, 9.3333rem + 20.7407vw, 28rem); + + /* Space 7xl: 224px → 448px */ /* One-up pairs */ - --fi-space-fluid-2xs-xs: clamp(0.625rem, 0.3333rem + 1.2963vw, 1.5rem); /* Space 2xs-xs: 10px → 24px */ - --fi-space-fluid-xs-s: clamp(0.75rem, 0.3333rem + 1.8519vw, 2rem); /* Space xs-s: 12px → 32px */ - --fi-space-fluid-s-m: clamp(1rem, 0.3333rem + 2.963vw, 3rem); /* Space s-m: 16px → 48px */ - --fi-space-fluid-m-l: clamp(1.5rem, 0.6667rem + 3.7037vw, 4rem); /* Space m-l: 24px → 64px */ - --fi-space-fluid-l-xl: clamp(2rem, 1rem + 4.4444vw, 5rem); /* Space l-xl: 32px → 80px */ - --fi-space-fluid-xl-2xl: clamp(2.5rem, 1.3333rem + 5.1852vw, 6rem); /* Space xl-2xl: 40px → 96px */ - --fi-space-fluid-2xl-3xl: clamp(3rem, 1.5rem + 6.6667vw, 7.5rem); /* Space 2xl-3xl: 48px → 120px */ - --fi-space-fluid-3xl-4xl: clamp(3.75rem, 2.0833rem + 7.4074vw, 8.75rem); /* Space 3xl-4xl: 60px → 140px */ - --fi-space-fluid-4xl-5xl: clamp(4.375rem, 1.8333rem + 11.2963vw, 12rem); /* Space 4xl-5xl: 70px → 192px */ - --fi-space-fluid-5xl-6xl: clamp(6rem, 3.3333rem + 11.8519vw, 14rem); /* Space 5xl-6xl: 96px → 224px */ - --fi-space-fluid-6xl-7xl: clamp(7rem, 0rem + 31.1111vw, 28rem); /* Space 6xl-7xl: 112px → 448px */ + --fi-space-fluid-2xs-xs: clamp(0.625rem, 0.3333rem + 1.2963vw, 1.5rem); + + /* Space 2xs-xs: 10px → 24px */ + --fi-space-fluid-xs-s: clamp(0.75rem, 0.3333rem + 1.8519vw, 2rem); + + /* Space xs-s: 12px → 32px */ + --fi-space-fluid-s-m: clamp(1rem, 0.3333rem + 2.963vw, 3rem); + + /* Space s-m: 16px → 48px */ + --fi-space-fluid-m-l: clamp(1.5rem, 0.6667rem + 3.7037vw, 4rem); + + /* Space m-l: 24px → 64px */ + --fi-space-fluid-l-xl: clamp(2rem, 1rem + 4.4444vw, 5rem); + + /* Space l-xl: 32px → 80px */ + --fi-space-fluid-xl-2xl: clamp(2.5rem, 1.3333rem + 5.1852vw, 6rem); + + /* Space xl-2xl: 40px → 96px */ + --fi-space-fluid-2xl-3xl: clamp(3rem, 1.5rem + 6.6667vw, 7.5rem); + + /* Space 2xl-3xl: 48px → 120px */ + --fi-space-fluid-3xl-4xl: clamp(3.75rem, 2.0833rem + 7.4074vw, 8.75rem); + + /* Space 3xl-4xl: 60px → 140px */ + --fi-space-fluid-4xl-5xl: clamp(4.375rem, 1.8333rem + 11.2963vw, 12rem); + + /* Space 4xl-5xl: 70px → 192px */ + --fi-space-fluid-5xl-6xl: clamp(6rem, 3.3333rem + 11.8519vw, 14rem); + + /* Space 5xl-6xl: 96px → 224px */ + --fi-space-fluid-6xl-7xl: clamp(7rem, 0rem + 31.1111vw, 28rem); + + /* Space 6xl-7xl: 112px → 448px */ /* Custom pairs */ - --fi-space-fluid-xs-2xs: clamp(0.75rem, 0.5833rem + 0.7407vw, 1.25rem); /* Space xs-2xs: 12px → 20px */ - --fi-space-fluid-l-6xl: clamp(2rem, -2rem + 17.7778vw, 14rem); /* Space l-6xl: 32px → 224px */ - --fi-space-fluid-4xl-l: clamp(4rem, 4.5rem + -0.5556vw, 4.375rem); /* Space 4xl-l: 70px → 64px */ - --fi-space-fluid-5xl-3xl: clamp(6rem, 5.5rem + 2.2222vw, 7.5rem); /* Space 5xl-3xl: 96px → 120px */ + --fi-space-fluid-xs-2xs: clamp(0.75rem, 0.5833rem + 0.7407vw, 1.25rem); + + /* Space xs-2xs: 12px → 20px */ + --fi-space-fluid-l-6xl: clamp(2rem, -2rem + 17.7778vw, 14rem); + + /* Space l-6xl: 32px → 224px */ + --fi-space-fluid-4xl-l: clamp(4rem, 4.5rem + -0.5556vw, 4.375rem); + + /* Space 4xl-l: 70px → 64px */ + --fi-space-fluid-5xl-3xl: clamp(6rem, 5.5rem + 2.2222vw, 7.5rem); + + /* Space 5xl-3xl: 96px → 120px */ /* Margin Padding */ --fi-margin-padding: var(--fi-space-fluid-l-6xl); @@ -314,9 +392,6 @@ ol[role="list"] { list-style: none; } -h1, -h2, -h3, button, input, label { @@ -350,7 +425,7 @@ h4, h5, .h5 { font-family: var(--fi-font-family-display); - line-height: 1; + line-height: var(--fl-lineSpace-factor, 1.2); } h1 em, @@ -364,7 +439,6 @@ h1, h2, h3 { font-weight: var(--fi-font-weight-extrabold); - line-height: 1.2; text-wrap: balance; } @@ -379,7 +453,7 @@ a:visited { } /* Utils */ -.flow > * + * { +.flow>*+* { margin-top: var(--flow-space, 1em); } @@ -404,24 +478,24 @@ a:visited { margin-top: 0; } -.frameworks + .frameworks { +.frameworks+.frameworks { margin-top: var(--step-2); } -.frameworks > :first-child { +.frameworks> :first-child { display: flex; flex-grow: 1; width: 60px; } -.frameworks > :last-child { +.frameworks> :last-child { flex-basis: 0; flex-grow: 999; margin-top: 0; min-width: 50%; } -.frameworks > div > * + * { +.frameworks>div>*+* { margin-top: 1em; } @@ -444,7 +518,7 @@ a:visited { justify-content: space-between; } -.two-column > * { +.two-column>* { width: 50%; } @@ -461,7 +535,7 @@ a:visited { --flow-space: 0.25rem; } -.two-column + * { +.two-column+* { margin-top: 2rem; } @@ -629,7 +703,7 @@ a:visited { .diagram { color: var(--fl-fgColor, var(--fi-color-neutral-800)); font-family: var(--fi-font-family-display); - font-size: var(--step--1); + font-size: var(--step--2); font-weight: var(--fi-font-weight-semibold); line-height: 1.2; } @@ -692,7 +766,7 @@ a:visited { --color: var(--fi-quadrant-high-content, var(--fi-color-neutral-800)); } -.card + .card { +.card+.card { margin-top: 1rem; } @@ -722,7 +796,7 @@ a:visited { margin-bottom: 2em; } -.deep-dive-list > *:first-child { +.deep-dive-list>*:first-child { width: 75%; } @@ -761,12 +835,12 @@ a:visited { width: 34px; } -.hierarchy-list > :last-child { +.hierarchy-list> :last-child { text-align: right; } -.hierarchy-list li + li, -.deep-dive-list li + li { +.hierarchy-list li+li, +.deep-dive-list li+li { margin-top: var(--fi-space-xl); } @@ -775,30 +849,30 @@ a:visited { margin-left: 1.25em; } -.instructions ol > li + li { +.instructions ol>li+li { margin-top: var(--fi-spacing-500); } -.instructions ol > li > p:not(:first-child) { +.instructions ol>li>p:not(:first-child) { margin-left: -1.25em; } -.instructions ol > li:has(img.wheel), -.instructions ol > li:has(svg.wheel) { +.instructions ol>li:has(img.wheel), +.instructions ol>li:has(svg.wheel) { margin-left: calc(200px + 2rem); min-height: 200px; position: relative; } -.instructions ol > li img.wheel, -.instructions ol > li svg.wheel { +.instructions ol>li img.wheel, +.instructions ol>li svg.wheel { left: calc(-1 * (200px + 4rem)); position: absolute; top: 0; } -.instructions ol > li:has(img.wheel) > div p:not(:first-child), -.instructions ol > li:has(svg.wheel) > div p:not(:first-child) { +.instructions ol>li:has(img.wheel)>div p:not(:first-child), +.instructions ol>li:has(svg.wheel)>div p:not(:first-child) { margin-left: -1.25em; } @@ -824,13 +898,13 @@ a:visited { margin-left: 0; } -p + p, -p + ul, -p + ol { +p+p, +p+ul, +p+ol { margin-top: var(--flow-space, 1em); } -.two-column > * + * { +.two-column>*+* { margin-top: 0; } @@ -869,7 +943,7 @@ p + ol { width: 36px; } -.yes-maybe-no li + li { +.yes-maybe-no li+li { margin-top: var(--fi-space-fluid-2xs); } @@ -913,15 +987,15 @@ p + ol { list-style: none; } -.gap-legend li + li { +.gap-legend li+li { margin-top: calc(14 / 16 * 1rem); } -.gap-legend > :first-child { +.gap-legend> :first-child { width: 65px; } -.gap-legend > :last-child { +.gap-legend> :last-child { width: 100%; } diff --git a/src/assets/styles/print.css b/src/assets/styles/print.css index 1bea7fb9..f696046e 100644 --- a/src/assets/styles/print.css +++ b/src/assets/styles/print.css @@ -1,5 +1,6 @@ :root { /* Type Scale */ + --step--2: 10pt; --step--1: 10pt; --step-0: 12pt; --step-1: 14pt; diff --git a/src/assets/styles/web.css b/src/assets/styles/web.css index c1a42edd..a7aae91c 100644 --- a/src/assets/styles/web.css +++ b/src/assets/styles/web.css @@ -1,7 +1,10 @@ body { /* Type Scale */ - /* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1440,22,1.25,5,1,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ + /* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1440,22,1.25,5,2,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ + + /* Step -2: 11.1111px → 14.08px */ + --step--2: clamp(0.6944rem, 0.6326rem + 0.2749vw, 0.88rem); /* Step -1: 13.3333px → 17.6px */ --step--1: clamp(0.8333rem, 0.7444rem + 0.3951vw, 1.1rem); @@ -968,6 +971,7 @@ address, .small { font-size: var(--step--1); font-style: normal; + line-height: var(--fl-lineSpace-factor, 1.4); } .funders