[
{
"path": ".editorconfig",
"content": "# editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\nindent_size = 2\nindent_style = space\ntrim_trailing_whitespace = true\n\n[*.md]\ntrim_trailing_whitespace = false\n\n[*.{js,json,d.ts,ts}]\nindent_size = 4\n\n[Makefile]\nindent_style = tab\n"
},
{
"path": ".eslintrc.json",
"content": "{\n \"root\": true,\n \"parserOptions\": {\n \"sourceType\": \"module\"\n },\n \"env\": {\n \"browser\": true,\n \"es2020\": true,\n \"node\": true\n },\n \"extends\": [\n \"eslint:recommended\"\n ],\n \"overrides\": [\n {\n \"files\": [\n \"*.ts\"\n ],\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\n \"@typescript-eslint\"\n ],\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/recommended\"\n ]\n }\n ]\n}\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\nHello 👋\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\nThank you 👊\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
},
{
"path": ".gitignore",
"content": "node_modules\n.DS_Store\nThumbs.db\n\n# Turborepo\n.turbo\n\n# Ignore nested folders: https://stackoverflow.com/questions/3203228/git-ignore-exception/72380673#72380673\n/tmp/*\n!/tmp/cjs\n/tmp/cjs/*\n!/tmp/dts\n/tmp/dts/*\n!/tmp/esm\n/tmp/esm/*\n!tmp/**/package.json\n!tmp/**/tsconfig.json\n\n# generated types\n.astro\n.docusaurus\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# environment variables\n.env\n.env.production\n\n# macOS-specific files\n.DS_Store\n\n# jetbrains setting folder\n.idea\n\n# packages build output\n!/www/demo\n/www/demo/*\n!/www/docs\n/www/docs/*\n"
},
{
"path": ".nvmrc",
"content": "v20.14\n"
},
{
"path": ".prettierrc.json",
"content": "{\n \"printWidth\": 80,\n \"tabWidth\": 4,\n \"trailingComma\": \"es5\",\n \"semi\": true,\n \"singleQuote\": true\n}\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2026 Locomotive Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# Locomotive Scroll\n\n[](https://www.npmjs.com/package/locomotive-scroll)\n[](https://www.npmjs.com/package/locomotive-scroll)\n[](https://bundlephobia.com/package/locomotive-scroll)\n\nA **lightweight** & **modern** scroll library for detection, animation, and smooth scrolling. Built on top of [Lenis](https://github.com/darkroomengineering/lenis).\n\n## Documentation\n\nFull documentation available at [scroll.locomotive.ca/docs](https://scroll.locomotive.ca/docs).\n\n## Quick Start\n\n```bash\nnpm install locomotive-scroll\n```\n\n```js\nimport LocomotiveScroll from 'locomotive-scroll';\n\nconst scroll = new LocomotiveScroll();\n```\n\n```css\n@import 'locomotive-scroll/dist/locomotive-scroll.css';\n```\n\n```html\n
I move at half speed
\n```\n\n## Features\n\n- **Lightweight** — Only 9.4kB gzipped\n- **TypeScript First** — Fully typed\n- **Built on Lenis** — Latest stable release with improved performance\n- **Dual Intersection Observers** — Optimized detection for triggers vs. animations\n- **Smart Touch Detection** — Parallax auto-disabled on mobile\n- **Accessible** — Native scrollbar, keyboard navigation, proper ARIA support\n\n## Demo\n\nCheck out the [examples and playground](https://scroll.locomotive.ca/docs/examples)\n\n## Support\n\n[GitHub Issues](https://github.com/locomotivemtl/locomotive-scroll/issues)\n"
},
{
"path": "context7.json",
"content": "{\n \"url\": \"https://context7.com/locomotivemtl/locomotive-scroll\",\n \"public_key\": \"pk_fFYCHZCsmlAjABaNmHyFM\",\n \"foldersInclude\": [\"packages/lib\"],\n \"foldersExclude\": [\"packages/docs\", \"packages/demo\", \"packages/landing\", \"node_modules\"],\n \"customRules\": [\n \"locomotive-scroll v5 wraps Lenis for smooth scrolling - use lenisOptions for scroll physics (lerp, duration, easing)\",\n \"Elements with data-scroll-speed, data-scroll-css-progress, or data-scroll-offset trigger RAF updates every frame - minimize these for performance\",\n \"data-scroll-speed is relative to container size, not absolute pixels - speed: 0.5 means 50% of container height displacement\",\n \"Parallax is auto-disabled on touch devices - add data-scroll-enable-touch-speed to force it on mobile\",\n \"scrollPosition defines WHERE in viewport to trigger (start/middle/end), scrollOffset defines WHEN with a px/% offset - they are different\",\n \"Elements visible at page load (in fold) have different progress mapping (0→1 vs -1→1) - use data-scroll-ignore-fold to disable\",\n \"Dynamically added elements need locomotiveScroll.addScrollElements($container) - just adding HTML to DOM won't register them\",\n \"Custom scroll containers need fixed height + overflow hidden/auto on wrapper, with content as direct child\",\n \"Use data-scroll-repeat for elements that should re-trigger on each scroll in/out - default is fire once\",\n \"Access Lenis instance via locomotiveScroll.lenisInstance for programmatic scrollTo, stop(), start()\"\n ]\n}"
},
{
"path": "package.json",
"content": "{\n \"private\": true,\n \"name\": \"locomotive-scroll\",\n \"description\": \"Monorepo for Locomotive Scroll\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/locomotivemtl/locomotive-scroll\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/locomotivemtl/locomotive-scroll.git\"\n },\n \"author\": {\n \"name\": \"Locomotive\",\n \"email\": \"info@locomotive.ca\",\n \"homepage\": \"https://locomotive.ca\"\n },\n \"devDependencies\": {\n \"turbo\": \"^2.7.4\",\n \"typescript\": \"^4.8.3\"\n },\n \"scripts\": {\n \"build\": \"turbo run build\",\n \"build:vercel\": \"turbo run build --filter=./packages/lib --filter=./packages/demo --filter=./packages/docs\",\n \"build:landing\": \"npm run build --workspace=packages/landing\",\n \"dev\": \"npm run dev --workspace=packages/demo --if-present\",\n \"publish\": \"npm run publish --workspace=packages/lib --if-present\",\n \"publish:next\": \"npm run publish:next --workspace=packages/lib --if-present\"\n },\n \"workspaces\": [\n \"packages/lib\",\n \"packages/demo\",\n \"packages/landing\",\n \"packages/docs\"\n ],\n \"version\": \"5.0.0-rc.1\",\n \"packageManager\": \"npm@10.9.4\"\n}\n"
},
{
"path": "packages/demo/.editorconfig",
"content": "# editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 4\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.{md,markdown}]\ntrim_trailing_whitespace = false\n"
},
{
"path": "packages/demo/.gitignore",
"content": "# build output\ndist/\n\n# SVG sprite\npublic/assets/images/sprite.svg\n"
},
{
"path": "packages/demo/.nvmrc",
"content": "v20.14"
},
{
"path": "packages/demo/.prettierignore",
"content": "node_modules/**"
},
{
"path": "packages/demo/.prettierrc",
"content": "{\n \"useTabs\": false,\n \"tabWidth\": 4,\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"semi\": true,\n \"printWidth\": 100,\n \"plugins\": [\"prettier-plugin-astro\", \"prettier-plugin-tailwindcss\"]\n}\n"
},
{
"path": "packages/demo/.vscode/extensions.json",
"content": "{\n \"recommendations\": [\"astro-build.astro-vscode\"],\n \"unwantedRecommendations\": []\n}\n"
},
{
"path": "packages/demo/.vscode/launch.json",
"content": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"command\": \"./node_modules/.bin/astro dev\",\n \"name\": \"Development server\",\n \"request\": \"launch\",\n \"type\": \"node-terminal\"\n }\n ]\n}\n"
},
{
"path": "packages/demo/.vscode/settings.json",
"content": "{\n \"css.customData\": [\".vscode/tailwind.json\"],\n \"scss.lint.unknownAtRules\": \"ignore\",\n}"
},
{
"path": "packages/demo/.vscode/tailwind.json",
"content": "{\n \"version\": 1.1,\n \"atDirectives\": [\n {\n \"name\": \"@tailwind\",\n \"description\": \"Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#tailwind\"\n }\n ]\n },\n {\n \"name\": \"@apply\",\n \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#apply\"\n }\n ]\n },\n {\n \"name\": \"@responsive\",\n \"description\": \"You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\\n```css\\n@responsive {\\n .alert {\\n background-color: #E53E3E;\\n }\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#responsive\"\n }\n ]\n },\n {\n \"name\": \"@screen\",\n \"description\": \"The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\\n```css\\n@screen sm {\\n /* ... */\\n}\\n```\\n…gets transformed into this:\\n```css\\n@media (min-width: 640px) {\\n /* ... */\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#screen\"\n }\n ]\n },\n {\n \"name\": \"@variants\",\n \"description\": \"Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\\n```css\\n@variants hover, focus {\\n .btn-brand {\\n background-color: #3182CE;\\n }\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#variants\"\n }\n ]\n }\n ]\n }"
},
{
"path": "packages/demo/LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) Locomotive, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."
},
{
"path": "packages/demo/README.md",
"content": "
\n\n"
},
{
"path": "packages/demo/src/pages/index.astro",
"content": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport ScrollToggler from '@components/ScrollToggler/ScrollToggler.astro';\n---\n\n\n\t
\n
\n \n\n \n \n\n
\n
Locomotive Scroll
\n
\n
V
\n
.
\n
5
\n
\n
\n\n
\n
\n
data-scroll-speed
\n
\n
\n
\n
\n
-.1
\n
\n
\n
0
\n
\n
\n
.5
\n
\n
\n
-.2
\n
\n
\n\n\n
\n
\n
data-scroll-class
\n
\n
\n
\n
\n
c-scroll-opacity
\n
\n
\n
c-scroll-rotate
\n
\n
\n\n\n
\n
\n
data-scroll-repeat
\n
\n
\n
\n
\n
c-scroll-opacity
\n
REPEAT
\n
\n
\n\n\n
\n
\n
data-scroll-css-progress
\n
\n
\n
\n
\n
css progress variable
\n
\n
\n\n\n \n\n\n
\n
\n
data-scroll-event-progress: Custom Event
\n
\n
\n
\n
\n \n
\n
\n\n\n
\n
\n
data-scroll-position
\n
\n
\n
\n
\n
Position Enter: start
\n
Position Leave: end
\n \n
\n
\n
Position Enter: middle
\n
Position Leave: middle
\n \n
\n
\n
Position Enter: end
\n
Position Leave: start
\n \n
\n
\n\n
\n
\n
data-scroll-call: Custom Event
\n
\n
\n
\n
\n \n
\n
\n\n
\n
\n
Lenis scroll calback: direction
\n
\n
\n
\n
\n \n
\n
\n\n \n
\n
\n\n"
},
{
"path": "packages/demo/src/scripts/app.ts",
"content": "import { Scroll } from '@scripts/classes/Scroll';\nimport { $screenDebounce } from \"../stores/screen\";\nimport { setViewportSize } from './utils/setViewportSize';\n\n// Initialize the Scroll class\nScroll.init();\n\n$screenDebounce.subscribe(() => {\n setViewportSize();\n});\n\n// Progress event\nconst $progressEventLabel = document.querySelector('[data-custom-event=\"progress\"]') as HTMLElement\nconst onProgressEventCall = (e: CustomEvent) => {\n const { progress } = e.detail;\n $progressEventLabel.textContent = `${Math.round(\n (progress + Number.EPSILON) * 100\n )}%`;\n}\nwindow.addEventListener('progressEvent', onProgressEventCall as EventListener);\n\n// Progress position\nconst $positionProgresses = Array.from(document.querySelectorAll('[data-position-progress]'))\nconst onProgressPositionCall = (e: CustomEvent) => {\n const { target, progress } = e.detail;\n const $positionProgress = $positionProgresses.find(($el) => $el.parentElement === target) as HTMLElement;\n $positionProgress.textContent = `${Math.round(\n (progress + Number.EPSILON) * 100\n )}%`;\n}\nwindow.addEventListener('progressPositionEvent', onProgressPositionCall as EventListener);\n\n// Custom event\nconst $customEventLabel = document.querySelector('[data-custom-event=\"event\"]') as HTMLElement\nconst onCustomEventCall = (e: CustomEvent) => {\n const { way } = e.detail;\n $customEventLabel.textContent = `scrollEvent ${way}`;\n}\nwindow.addEventListener('scrollEvent', onCustomEventCall as EventListener);\n"
},
{
"path": "packages/demo/src/scripts/classes/Scroll.ts",
"content": "import { isScrollStopped } from '@root/src/stores/scroll';\nimport LocomotiveScroll from '../../../../lib/index';\n\nimport type {\n ILenisScrollToOptions,\n lenisTargetScrollTo\n} from '../../../../lib/types';\n\nexport class Scroll {\n static locomotiveScroll: LocomotiveScroll;\n static lastProgress: number;\n static scrollOrientation: number;\n\n // =============================================================================\n // Lifecycle\n // =============================================================================\n static init() {\n const scrollOrientation = document.documentElement.dataset.scrollOrientationSettings as 'vertical' | 'horizontal';\n\n this.locomotiveScroll = new LocomotiveScroll({\n lenisOptions: {\n orientation: scrollOrientation,\n },\n scrollCallback: ({ progress }) => {\n if (progress > this.lastProgress) {\n if (this.scrollOrientation != 1) {\n this.scrollOrientation = 1;\n document.documentElement.style.setProperty(\n '--scroll-direction',\n this.scrollOrientation.toString()\n );\n }\n } else if (this.scrollOrientation != -1) {\n this.scrollOrientation = -1;\n document.documentElement.style.setProperty(\n '--scroll-direction',\n this.scrollOrientation.toString()\n );\n }\n\n this.lastProgress = progress as number;\n }\n });\n\n isScrollStopped.listen((value) => {\n if (value) {\n this.stop();\n } else {\n this.start();\n }\n });\n }\n\n static destroy() {\n this.locomotiveScroll?.destroy();\n }\n\n // =============================================================================\n // Methods\n // =============================================================================\n static start() {\n this.locomotiveScroll?.start();\n }\n\n static stop() {\n this.locomotiveScroll?.stop();\n }\n\n static addScrollElements(container: HTMLElement) {\n this.locomotiveScroll?.addScrollElements(container);\n }\n\n static removeScrollElements(container: HTMLElement) {\n this.locomotiveScroll?.removeScrollElements(container);\n }\n\n static scrollTo(target: lenisTargetScrollTo, options?: ILenisScrollToOptions) {\n this.locomotiveScroll?.scrollTo(target, options);\n }\n}\n"
},
{
"path": "packages/demo/src/scripts/utils/maths.ts",
"content": "const mapRange = (min: number, max: number, nmin: number, nmax: number, value: number) => {\n return ((value - min) / (max - min)) * (nmax - nmin) + nmin;\n};\n\nconst clamp = (min: number, max: number, value: number) => {\n return Math.max(min, Math.min(value, max));\n};\n\nconst normalize = (min: number, max: number, value: number) => {\n return clamp(0, 1, (value - min) / (max - min));\n};\n\nconst roundToDecimals = (value: number, decimals: number): number => {\n const factor = Math.pow(10, decimals);\n return Math.round((value + Number.EPSILON) * factor) / factor;\n};\n\nexport { mapRange, clamp, normalize, roundToDecimals };\n"
},
{
"path": "packages/demo/src/scripts/utils/setViewportSize.ts",
"content": "const SUPPORTS_VH: boolean =\n 'CSS' in window &&\n 'supports' in window.CSS &&\n window.CSS.supports('height: 100svh') &&\n window.CSS.supports('height: 100dvh') &&\n window.CSS.supports('height: 100lvh');\n\nexport const setViewportSize = () => {\n // Document styles\n const documentStyles = document.documentElement.style;\n\n // Viewport width\n const vw: number = document.body.clientWidth * 0.01;\n documentStyles.setProperty('--vw', `${vw}px`);\n\n // Return if browser supports vh, svh, dvh, & lvh\n // if (SUPPORTS_VH) {\n // return;\n // }\n\n // Viewport height\n const svh: number = document.documentElement.clientHeight * 0.01;\n documentStyles.setProperty('--svh', `${svh}px`);\n\n const dvh: number = window.innerHeight * 0.01;\n documentStyles.setProperty('--dvh', `${dvh}px`);\n\n if (document.body) {\n const fixed = document.createElement('div');\n fixed.style.width = '1px';\n fixed.style.height = '100vh';\n fixed.style.position = 'fixed';\n fixed.style.left = '0';\n fixed.style.top = '0';\n fixed.style.bottom = '0';\n fixed.style.visibility = 'hidden';\n\n document.body.appendChild(fixed);\n\n const fixedHeight: number = fixed.clientHeight;\n\n fixed.remove();\n\n const lvh: number = fixedHeight * 0.01;\n\n documentStyles.setProperty('--lvh', `${lvh}px`);\n }\n};\n"
},
{
"path": "packages/demo/src/scripts/utils/string.ts",
"content": "const toDash = (str: string) =>\n str\n .split(/(?=[A-Z])/)\n .join('-')\n .toLowerCase();\n\nexport { toDash };\n"
},
{
"path": "packages/demo/src/stores/screen.ts",
"content": "import { map } from 'nanostores';\nimport { debounce } from 'ts-debounce';\n\nexport interface IScreenValues {\n width: number;\n height: number;\n}\n\nexport interface IScreenDebounceValues {\n width: number;\n height: number;\n}\n\nexport const $screen = map({\n width: window.innerWidth,\n height: window.innerHeight\n});\n\nexport const $screenDebounce = map({\n width: window.innerWidth,\n height: window.innerHeight\n});\n\nwindow.addEventListener('resize', () => {\n $screen.setKey('width', window.innerWidth);\n $screen.setKey('height', window.innerHeight);\n});\n\nconst debouncedFunction: any = () => {\n $screenDebounce.setKey('width', window.innerWidth);\n $screenDebounce.setKey('height', window.innerHeight);\n};\nwindow.addEventListener('resize', debounce(debouncedFunction, 200));\n"
},
{
"path": "packages/demo/src/stores/scroll.ts",
"content": "import { atom } from \"nanostores\";\n\nexport const isScrollStopped = atom(false);\n"
},
{
"path": "packages/demo/src/styles/main.scss",
"content": "// ==========================================================================\n// Tailwind CSS\n// ==========================================================================\n/**\n* This injects Tailwind's base styles and any base styles registered by\n* plugins.\n*/\n@tailwind base;\n\n/**\n* This injects Tailwind's component classes and any component classes\n* registered by plugins.\n*/\n@tailwind components;\n\n/**\n* This injects Tailwind's utility classes and any utility classes registered\n* by plugins.\n*/\n@tailwind utilities;\n\n// ==========================================================================\n// Fonts imports\n// ==========================================================================\n@layer base {\n // @font-face {\n // font-family: 'IBM Plex Mono';\n // src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');\n // font-weight: normal;\n // font-style: normal;\n // font-display: swap;\n // }\n}\n\n// ==========================================================================\n// Vendors\n// ==========================================================================\n@import '../../../lib/bundled/locomotive-scroll.css';\n\n// ==========================================================================\n// Local files imports\n// ==========================================================================\n@import 'tools/maths';\n@import 'tools/functions';\n\n// ==========================================================================\n// Global styles\n// ==========================================================================\n:root {\n --color-primary: color('black');\n --color-secondary: color('white');\n}\n\nhtml {\n font-family: theme('fontFamily.sans');\n}\n\nbody {\n background: var(--color-secondary);\n color: var(--color-primary);\n}\n\n::selection {\n background-color: var(--color-primary);\n color: var(--color-secondary);\n text-shadow: none;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n/* Define a transition duration during page visits */\nhtml.is-changing .transition-fade {\n transition: opacity 0.25s;\n opacity: 1;\n}\n/* Define the styles for the unloaded pages */\nhtml.is-animating .transition-fade {\n opacity: 0;\n}\n\nhtml[data-scroll-orientation='horizontal'] {\n body {\n width: fit-content;\n }\n main {\n display: flex;\n }\n}\n\n:root {\n --color-1: #f4f4ed;\n --color-2: #6decaf;\n --color-3: #357ded;\n --color-4: #5e239d;\n --color-5: #f61067;\n}\n\n.c-scroll {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n.c-scroll_offset {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n z-index: 1;\n\n html[data-scroll-orientation='vertical'] & {\n width: 100%;\n height: 1px;\n }\n html[data-scroll-orientation='horizontal'] & {\n width: 1px;\n height: 100%;\n }\n }\n\n &:before {\n background-color: rgb(217, 66, 66);\n html[data-scroll-orientation='vertical'] & {\n bottom: var(--offset-start);\n }\n html[data-scroll-orientation='horizontal'] & {\n right: var(--offset-start);\n }\n }\n\n &:after {\n background-color: rgb(74, 166, 215);\n html[data-scroll-orientation='vertical'] & {\n top: var(--offset-end);\n }\n html[data-scroll-orientation='horizontal'] & {\n left: var(--offset-end);\n }\n }\n}\n\n.c-scroll_section {\n width: 100%;\n background-color: var(--color-1);\n\n &.-full {\n height: calc(100 * var(--svh));\n\n html[data-scroll-orientation='horizontal'] & {\n width: 100vw;\n flex-shrink: 0;\n }\n }\n\n &.-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.-row {\n flex-direction: row;\n\n html[data-scroll-orientation='horizontal'] & {\n flex-direction: column;\n }\n }\n}\n\n.c-scroll_box {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 20vw;\n height: 20vw;\n max-width: 300px;\n max-height: 300px;\n overflow: hidden;\n\n html[data-scroll-orientation='horizontal'] & {\n width: 24vh;\n height: 24vh;\n }\n\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.c-scroll-opacity {\n opacity: 1 !important;\n transition: opacity 0.75s ease();\n}\n\n.c-scroll-rotate {\n transform: rotate(2turn) !important;\n transition: transform 0.75s ease();\n}\n\n.c-scroll-direction {\n html[data-scroll-orientation='vertical'] & {\n transform: scaleY(var(--scroll-direction));\n }\n html[data-scroll-orientation='horizontal'] & {\n transform: scaleX(var(--scroll-direction)) rotate(-90deg);\n }\n}\n\n.c-scroll-toggler {\n position: fixed;\n top: 0;\n left: 0;\n display: inline-block;\n background-color: grey;\n padding: 0.5em;\n}\n"
},
{
"path": "packages/demo/src/styles/tools/functions.scss",
"content": "// ==========================================================================\n// Tools / Functions\n// ==========================================================================\n\n// Returns calculation of a percentage of the viewport small height.\n//\n// ```scss\n// .c-box {\n// height: svh(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in svh\n@function svh($number) {\n @return calc(#{$number} * var(--svh, 1svh));\n}\n\n// Returns calculation of a percentage of the viewport large height.\n//\n// ```scss\n// .c-box {\n// height: lvh(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in lvh\n@function lvh($number) {\n @return calc(#{$number} * var(--lvh, 1lvh));\n}\n\n// Returns calculation of a percentage of the viewport dynamic height.\n//\n// ```scss\n// .c-box {\n// height: dvh(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in dvh\n@function dvh($number) {\n @return calc(#{$number} * var(--dvh, 1dvh));\n}\n\n// Returns calculation of a percentage of the viewport width.\n//\n// ```scss\n// .c-box {\n// width: vw(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in vw\n\n@function vw($number) {\n @return calc(#{$number} * var(--vw, 1vw));\n}\n"
},
{
"path": "packages/demo/src/styles/tools/maths.scss",
"content": "// ==========================================================================\n// Tools / Maths\n// ==========================================================================\n\n// Remove the unit of a length\n//\n// @param {Number} $number Number to remove unit from\n// @return {function}\n@function strip-unit($value) {\n @if type-of($value) != 'number' {\n @error \"Invalid `#{type-of($value)}` type. Choose a number type instead.\";\n } @else if type-of($value) == 'number' and not is-unitless($value) {\n @return math.div($value, $value * 0 + 1);\n }\n\n @return $value;\n}\n\n// Returns the square root of the given number.\n//\n// @param {number} $number The number to calculate.\n// @return {number}\n\n@function sqrt($number) {\n $x: 1;\n $value: $x;\n\n @for $i from 1 through 10 {\n $value: $x - math.div(($x * $x - abs($number)), (2 * $x));\n $x: $value;\n }\n\n @return $value;\n}\n\n// Returns a number raised to the power of an exponent.\n//\n// @param {number} $number The base number.\n// @param {number} $exp The exponent.\n// @return {number}\n\n@function pow($number, $exp) {\n $value: 1;\n\n @if $exp >0 {\n @for $i from 1 through $exp {\n $value: $value * $number;\n }\n } @else if $exp < 0 {\n @for $i from 1 through -$exp {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n// Returns the factorial of the given number.\n//\n// @param {number} $number The number to calculate.\n// @return {number}\n\n@function fact($number) {\n $value: 1;\n\n @if $number >0 {\n @for $i from 1 through $number {\n $value: $value * $i;\n }\n }\n\n @return $value;\n}\n\n// Returns an approximation of pi, with 11 decimals.\n//\n// @return {number}\n\n@function pi() {\n @return 3.14159265359;\n}\n\n// Converts the number in degrees to the radian equivalent .\n//\n// @param {number} $angle The angular value to calculate.\n// @return {number} If $angle has the `deg` unit,\n// the radian equivalent is returned.\n// Otherwise, the unitless value of $angle is returned.\n\n@function rad($angle) {\n $unit: unit($angle);\n $angle: strip-units($angle);\n\n // If the angle has `deg` as unit, convert to radians.\n @if ($unit ==deg) {\n @return math.div($angle, 180) * pi();\n }\n\n @return $angle;\n}\n\n// Returns the sine of the given number.\n//\n// @param {number} $angle The angle to calculate.\n// @return {number}\n\n@function sin($angle) {\n $sin: 0;\n $angle: rad($angle);\n\n @for $i from 0 through 10 {\n $sin: $sin + pow(-1, $i) * math.div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));\n }\n\n @return $sin;\n}\n\n// Returns the cosine of the given number.\n//\n// @param {string} $angle The angle to calculate.\n// @return {number}\n\n@function cos($angle) {\n $cos: 0;\n $angle: rad($angle);\n\n @for $i from 0 through 10 {\n $cos: $cos + pow(-1, $i) * math.div(pow($angle, 2 * $i), fact(2 * $i));\n }\n\n @return $cos;\n}\n\n// Returns the tangent of the given number.\n//\n// @param {string} $angle The angle to calculate.\n// @return {number}\n\n@function tan($angle) {\n @return math.div(sin($angle), cos($angle));\n}\n"
},
{
"path": "packages/demo/tailwind.config.ts",
"content": "import defaultTheme from 'tailwindcss/defaultTheme';\n\nimport type { Config } from 'tailwindcss';\n\nexport default {\n content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],\n prefix: 'u-',\n corePlugins: {\n container: false,\n },\n theme: {\n extend: {\n fontFamily: {\n serif: [\n 'Times New Roman',\n ...defaultTheme.fontFamily.serif\n ],\n sans: [\n 'Arial',\n ...defaultTheme.fontFamily.sans\n ],\n },\n colors: {\n black: '#000000',\n white: '#ffffff',\n primary: '#312dfb',\n },\n screens: {\n 'to-2xs': { 'max': '339px' },\n '2xs': '340px',\n 'to-xs': { 'max': '499px' },\n 'xs': '500px',\n 'to-sm': { 'max': '699px' },\n 'sm': '700px',\n 'to-md': { 'max': '999px' },\n 'md': '1000px',\n 'to-lg': { 'max': '1199px' },\n 'lg': '1200px',\n 'to-xl': { 'max': '1399px' },\n 'xl': '1400px',\n 'to-2xl': { 'max': '1599px' },\n '2xl': '1600px',\n 'to-3xl': { 'max': '1799px' },\n '3xl': '1800px',\n 'to-4xl': { 'max': '1999px' },\n '4xl': '2000px',\n 'to-5xl': { 'max': '2399px' },\n '5xl': '2400px',\n },\n gap: {\n gutter: '20px',\n gutterMobile: '10px'\n },\n transitionDuration: {\n fast: '0.2s',\n default: '0.4s',\n slow: '0.6s',\n slower: '0.8s',\n slowest: '1s',\n },\n transitionTimingFunction: {\n // Smooth\n default: 'cubic-bezier(0.380, 0.005, 0.215, 1)',\n\n // // Common easings\n // power1: {\n // in: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n // out: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n // inOut: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n // },\n // power2: {\n // in: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n // out: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n // inOut: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n // },\n // power3: {\n // in: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n // out: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n // inOut: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n // },\n // power4: {\n // in: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n // out: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n // inOut: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n // },\n // expo: {\n // in: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n // out: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n // inOut: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n // },\n // back: {\n // in: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n // out: 'cubic-bezier(0.175, 00.885, 0.320, 1.275)',\n // inOut: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n // },\n // sine: {\n // in: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n // out: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n // inOut: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n // },\n // circ: {\n // in: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n // out: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n // inOut: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n // },\n // slow: {\n // out: 'cubic-bezier(.04,1.15,0.4,.99)',\n // },\n // bounce: 'cubic-bezier(0.17, 0.67, 0.3, 1.33)',\n // smooth: 'cubic-bezier(0.380, 0.005, 0.215, 1)',\n },\n zIndex: {\n modal: '200',\n header: '100',\n above: '1',\n default: '0',\n below: '-1',\n },\n },\n },\n plugins: [],\n} satisfies Config;\n"
},
{
"path": "packages/demo/tsconfig.json",
"content": "{\n \"extends\": \"astro/tsconfigs/strict\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"moduleResolution\": \"Bundler\",\n \"paths\": {\n \"@root/*\": [\n \"./*\"\n ],\n \"@src/*\": [\n \"./src/*\"\n ],\n \"@components/*\": [\n \"./src/components/*\"\n ],\n \"@layouts/*\": [\n \"./src/layouts/*\"\n ],\n \"@scripts/*\": [\n \"./src/scripts/*\"\n ],\n \"@styles/*\": [\n \"./src/styles/*\"\n ],\n \"@types/*\": [\n \"types/*\"\n ],\n \"@data/*\": [\n \"./src/data/*\"\n ]\n }\n }\n}\n"
},
{
"path": "packages/demo/types/global.d.ts",
"content": "type Seo = {\n title?: string;\n description?: string;\n social?: {\n facebook?: {\n title?: string;\n image?: {\n url?: string;\n };\n description?: string;\n };\n twitter?: {\n creator?: string;\n title?: string;\n image?: {\n url?: string;\n };\n description?: string;\n };\n },\n advanced?: {\n robots?: string[];\n canonical?: string;\n };\n};"
},
{
"path": "packages/demo/types/swup.d.ts",
"content": "type VisitType = {\n fragmentVisit: any;\n to: {\n html: string;\n };\n};\n"
},
{
"path": "packages/docs/.gitignore",
"content": "# Dependencies\n/node_modules\n\n# Production\n/build\n\n# Generated files\n.docusaurus\n.cache-loader\n\n# Misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": "packages/docs/README.md",
"content": "# Website\n\nThis website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.\n\n### Installation\n\n```\n$ yarn\n```\n\n### Local Development\n\n```\n$ yarn start\n```\n\nThis command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.\n\n### Build\n\n```\n$ yarn build\n```\n\nThis command generates static content into the `build` directory and can be served using any static contents hosting service.\n\n### Deployment\n\nUsing SSH:\n\n```\n$ USE_SSH=true yarn deploy\n```\n\nNot using SSH:\n\n```\n$ GIT_USER= yarn deploy\n```\n\nIf you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.\n"
},
{
"path": "packages/docs/babel.config.js",
"content": "module.exports = {\n presets: [require.resolve('@docusaurus/core/lib/babel/preset')],\n};\n"
},
{
"path": "packages/docs/docs/documentation/attributes.md",
"content": "---\nsidebar_position: 3\n---\n\n# Attributes\n\n## data-scroll\n\nEnable viewport detection on an element.\n\n## data-scroll-position\n\n- **Type:** `string`\n- **Default:** `start,end`\n\n\n\nThis attribute specifies the trigger position of the element within the scroll container when using Locomotive Scroll. It accepts two values: one for the position when the element enters the viewport, and a second for the position when the element leaves the viewport.\n\nThe position is calculated relative to the **Lenis scroll container** (which defaults to `window`, but can be customized via `lenisOptions.wrapper`).\n\nAccepted values are: `'start'`, `'middle'`, `'end'`.\n\n### Examples\n\n\n\n\nHere's an example of using Locomotive Scroll's data-scroll-position attribute on an HTML element:\n\n```html\n\n```\n\n## data-scroll-offset\n\n- **Type:** `string`\n- **Default:** `0,0`\n\n\n\nSpecifies the trigger offset of the element within the viewport when using the Locomotive Scroll library. It takes two values: one for the offset when the element enters the viewport, and a second for the offset when the element leaves the viewport.\n\nThe offset can be defined in two ways:\n\n- If specified in percentages, it is relative to the viewport height.\n- If specified in pixels, it is an absolute value.\n\nFor example:\n\n- `'100,50%'` represents an offset of `100` pixels for the enter position and `50%` of the viewport height for the leave position.\n- `'25%, 15%'` represents an offset of `25%` of the viewport height for the enter position and `15%` of the viewport height for the leave position.\n\n### Example\n\n\n\nHere's an example of using Locomotive Scroll's data-scroll-offset attribute on an HTML element:\n\n```html\n\n```\n\n## data-scroll-class\n\n- **Type:** `string`\n- **Default:** `is-inview`\n\nSpecifies a custom class to be applied to the element when its offset intersects with the viewport. The default class used is `is-inview`.\n\nYou can provide your own class name as a string value to customize the styling or behavior of the element when it becomes visible within the viewport.\n\n## data-scroll-repeat\n\nSpecifies whether the element's in-view detection should repeat if it is declared.\n\nBy default, the in-view detection of elements is not repeated. **Simply declaring this attribute will enable the repeat behavior for in-view detection of the element.**\n\n## data-scroll-speed\n\n- **Type:** `number`\n\nSpecifies the parallax speed for the element. The speed is relative to the scroll container size (not pixels), making it predictable across different viewport sizes.\n\n### How it works\n\nThe parallax displacement is calculated using:\n```\ndisplacement = progress × containerSize × speed × -1\n```\n\nWhere:\n- `containerSize` = Height (or width for horizontal) of the Lenis scroll container\n- `progress` = Element's progress through the viewport (`-1` to `1` for normal elements, `0` to `1` for in-fold elements)\n- `speed` = Your specified value\n\n### Examples\n\n**With `data-scroll-speed=\"1\"`:**\n- Normal element: Moves from `+containerHeight` to `-containerHeight` (total = 2× container height)\n- In-fold element: Moves from `0` to `-containerHeight` (total = 1× container height)\n\n**With `data-scroll-speed=\"0.5\"`:**\n- Normal element: Total displacement = 1× container height\n- In-fold element: Total displacement = 0.5× container height\n\n**With `data-scroll-speed=\"-0.3\"` (negative = reversed):**\n- Element moves in opposite direction\n- Total displacement = 0.6× container height\n\n### Touch devices\n\nParallax is **automatically disabled on touch devices** by default for better native scrolling performance. To enable it on mobile/tablets, add the [`data-scroll-enable-touch-speed`](#data-scroll-enable-touch-speed) attribute.\n\n:::tip\nStart with small values like `0.1` to `0.5` for subtle effects. The value is now relative to container size, so effects scale naturally with viewport changes.\n:::\n\n## data-scroll-call\n\n- **Type:** `string`\n\nThe `data-scroll-call` attribute enables you to trigger a custom event when an element becomes visible within the viewport. This attribute requires a string value that specifies the name of the custom event that you want to trigger.\n\nBy utilizing the `data-scroll-call` attribute, you can define and trigger your own events to perform specific actions or handle certain behaviors when elements scroll into view. These events can be listened to and handled in your JavaScript code using event listeners or any event handling mechanism provided by your framework or library.\n\nHere's an example of how to use the `data-scroll-call` attribute:\n\n```html\n
Trigger
\n```\n\n```js\nwindow.addEventListener('scrollEvent', (e) => {\n const { target, way, from } = e.detail;\n console.log(`target: ${target}`, `way: ${way}`, `from: ${from}`);\n});\n```\n\n## data-scroll-css-progress\n\nIf you declare this attribute, it will add a CSS variable `--progress` to the element. This variable represents the current progress of the element and ranges between `0` and `1`.\n\nBy adding `--progress` as a CSS variable, you can utilize it in your CSS styles to create dynamic effects or animations based on the scrolling progress of the element.\n\n## data-scroll-event-progress\n\n- **Type:** `string`\n\nWhen you declare this attribute, it will trigger the custom event that you specify. This event allows you to retrieve the current progress of the element, which ranges between `0` and `1`.\n\nBy utilizing the custom event, you can implement event handlers in your JavaScript code to perform actions or retrieve information based on the scrolling progress of the element.\n\n```html\n
\n///\n/// We can also manipulate entire layout systems by adding a series of modifiers\n/// to the `.o-layout` block. For example:\n///\n/// @example\n///
\n///\n/// This will reverse the displayed order of the system so that it runs in the\n/// opposite order to our source, effectively flipping the system over.\n///\n/// @example\n///
\n///\n/// This will cause the system to fill up from either the centre or the right\n/// hand side. Default behaviour is to fill up the layout system from the left.\n///\n/// @requires tools/layout\n/// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss\n////\n\n.o-layout {\n @include o-layout;\n\n // Gutter modifiers\n &.-gutter {\n margin-left: rem(-$unit);\n }\n\n &.-gutter-small {\n margin-left: rem(-$unit-small);\n }\n\n // Horizontal aligment modifiers\n &.-center {\n text-align: center;\n }\n\n &.-right {\n text-align: right;\n }\n\n &.-reverse {\n direction: rtl;\n\n &.-flex {\n flex-direction: row-reverse;\n }\n }\n\n &.-flex {\n display: flex;\n\n &.-top {\n align-items: flex-start;\n }\n &.-middle {\n align-items: center;\n }\n &.-bottom {\n align-items: flex-end;\n }\n }\n &.-stretch {\n align-items: stretch;\n }\n}\n\n.o-layout_item {\n @include o-layout_item;\n\n // Gutter modifiers\n .o-layout.-gutter > & {\n padding-left: rem($unit);\n }\n\n .o-layout.-gutter-small > & {\n padding-left: rem($unit-small);\n }\n\n // Vertical alignment modifiers\n .o-layout.-middle > & {\n vertical-align: middle;\n }\n\n .o-layout.-bottom > & {\n vertical-align: bottom;\n }\n\n // Horizontal aligment modifiers\n .o-layout.-center > &,\n .o-layout.-right > &,\n .o-layout.-reverse > & {\n text-align: left;\n }\n\n .o-layout.-reverse > & {\n direction: ltr;\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/objects/_ratio.scss",
"content": "// ==========================================================================\n// Objects / Ratio\n// ==========================================================================\n\n// Create ratio-bound content blocks, to keep media (e.g. images, videos) in\n// their correct aspect ratios.\n//\n// http://alistapart.com/article/creating-intrinsic-ratios-for-video\n//\n// 1. Default cropping is a 1:1 ratio (i.e. a perfect square).\n\n.o-ratio {\n position: relative;\n display: block;\n overflow: hidden;\n\n &:before {\n display: block;\n padding-bottom: 100%; // [1]\n width: 100%;\n content: \"\";\n }\n}\n\n.o-ratio_content,\n .o-ratio > img,\n .o-ratio > iframe,\n .o-ratio > embed,\n .o-ratio > object {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n // height: 100%;\n}\n"
},
{
"path": "packages/landing/assets/styles/objects/_table.scss",
"content": "// ==========================================================================\n// Objects / Tables\n// ==========================================================================\n\n.o-table {\n width: 100%;\n\n // Force all cells within a table to occupy the same width as each other.\n //\n // @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values\n\n &.-fixed {\n table-layout: fixed;\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.breakpoints.scss",
"content": "// ==========================================================================\n// Settings / Config / Breakpoints\n// ==========================================================================\n@use \"sass:map\";\n\n// Breakpoints\n// ==========================================================================\n\n$breakpoints: (\n \"tiny\": 500px,\n \"small\": 700px,\n \"medium\": 1000px,\n \"large\": 1200px,\n \"big\": 1400px,\n \"figma\": 1440px,\n \"huge\": 1600px,\n \"enormous\": 1800px,\n \"gigantic\": 2000px,\n \"colossal\": 2400px\n);\n\n// Functions\n// ==========================================================================\n\n// Creates a min-width or max-width media query expression.\n//\n// @param {string} $breakpoint The breakpoint.\n// @param {string} $type Either \"min\" or \"max\".\n// @return {string}\n\n@function mq($breakpoint, $type: \"min\") {\n @if not map.has-key($breakpoints, $breakpoint) {\n @warn \"Unknown media query breakpoint: `#{$breakpoint}`\";\n }\n\n $value: map.get($breakpoints, $breakpoint);\n\n @if ($type == \"min\") {\n @return \"(min-width: #{$value})\";\n }\n @if ($type == \"max\") {\n @return \"(max-width: #{$value - 1px})\";\n }\n\n @error \"Unknown media query type: #{$type}\";\n}\n\n// Creates a min-width media query expression.\n//\n// @param {string} $breakpoint The breakpoint.\n// @return {string}\n\n@function mq-min($breakpoint) {\n @return mq($breakpoint, \"min\");\n}\n\n// Creates a max-width media query expression.\n//\n// @param {string} $breakpoint The breakpoint.\n// @return {string}\n\n@function mq-max($breakpoint) {\n @return mq($breakpoint, \"max\");\n}\n\n// Creates a min-width and max-width media query expression.\n//\n// @param {string} $from The min-width breakpoint.\n// @param {string} $until The max-width breakpoint.\n// @return {string}\n\n@function mq-between($breakpointMin, $breakpointMax) {\n @return \"#{mq-min($breakpointMin)} and #{mq-max($breakpointMax)}\";\n}\n\n\n// Legacy\n// ==========================================================================\n\n$from-tiny: map.get($breakpoints, \"tiny\") !default;\n$to-tiny: map.get($breakpoints, \"tiny\") - 1 !default;\n$from-small: map.get($breakpoints, \"small\") !default;\n$to-small: map.get($breakpoints, \"small\") - 1 !default;\n$from-medium: map.get($breakpoints, \"medium\") !default;\n$to-medium: map.get($breakpoints, \"medium\") - 1 !default;\n$from-large: map.get($breakpoints, \"large\") !default;\n$to-large: map.get($breakpoints, \"large\") - 1 !default;\n$from-big: map.get($breakpoints, \"big\") !default;\n$to-big: map.get($breakpoints, \"big\") - 1 !default;\n$from-figma: map.get($breakpoints, \"figma\") !default;\n$to-figma: map.get($breakpoints, \"figma\") - 1 !default;\n$from-huge: map.get($breakpoints, \"huge\") !default;\n$to-huge: map.get($breakpoints, \"huge\") - 1 !default;\n$from-enormous: map.get($breakpoints, \"enormous\") !default;\n$to-enormous: map.get($breakpoints, \"enormous\") - 1 !default;\n$from-gigantic: map.get($breakpoints, \"gigantic\") !default;\n$to-gigantic: map.get($breakpoints, \"gigantic\") - 1 !default;\n$from-colossal: map.get($breakpoints, \"colossal\") !default;\n$to-colossal: map.get($breakpoints, \"colossal\") - 1 !default;\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.colors.scss",
"content": "// ==========================================================================\n// Settings / Config / Colors\n// ==========================================================================\n@use \"sass:map\";\n@use \"sass:color\";\n\n// Palette\n// ==========================================================================\n\n$colors: (\n 'blue': #202ded,\n 'white': #FFFFFF,\n 'black': #000000,\n 'red': #F4574D,\n);\n\n// Function\n// ==========================================================================\n\n// Returns color code.\n//\n// ```scss\n// .c-box {\n// color: color(blue);\n// }\n// ```\n//\n// @param {string} $key - The color key in $colors.\n// @param {number} $alpha - The alpha for the color value.\n// @return {color}\n\n@function color($key, $alpha: 1) {\n $key: #{$key}; // Force string conversion\n @if not map.has-key($colors, $key) {\n @error \"Unknown '#{$key}' in $colors.\";\n }\n\n @if($alpha < 0 or $alpha > 1) {\n @error \"Alpha '#{$alpha}' must be in range [0, 1].\";\n }\n\n $color: map.get($colors, $key);\n\n @return rgba($color, $alpha);\n}\n\n// Specifics\n// ==========================================================================\n\n// Link\n$color-link: color(blue);\n$color-link-focus: color(blue);\n$color-link-hover: color.adjust(color(blue), $lightness: -10%);\n\n// Selection\n$color-selection-text: color(black);\n$color-selection-background: color(white);\n\n// Socials\n$color-facebook: #3B5998;\n$color-instagram: #E1306C;\n$color-youtube: #CD201F;\n$color-twitter: #1DA1F2;\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.eases.scss",
"content": "// ==========================================================================\n// Settings / Config / Eases\n// ==========================================================================\n@use \"sass:map\";\n\n// Eases\n// ==========================================================================\n\n$eases: (\n // Power 1\n \"power1.in\": cubic-bezier(0.550, 0.085, 0.680, 0.530),\n \"power1.out\": cubic-bezier(0.250, 0.460, 0.450, 0.940),\n \"power1.inOut\": cubic-bezier(0.455, 0.030, 0.515, 0.955),\n\n // Power 2\n \"power2.in\": cubic-bezier(0.550, 0.055, 0.675, 0.190),\n \"power2.out\": cubic-bezier(0.215, 0.610, 0.355, 1.000),\n \"power2.inOut\": cubic-bezier(0.645, 0.045, 0.355, 1.000),\n\n // Power 3\n \"power3.in\": cubic-bezier(0.895, 0.030, 0.685, 0.220),\n \"power3.out\": cubic-bezier(0.165, 0.840, 0.440, 1.000),\n \"power3.inOut\": cubic-bezier(0.770, 0.000, 0.175, 1.000),\n\n // Power 4\n \"power4.in\": cubic-bezier(0.755, 0.050, 0.855, 0.060),\n \"power4.out\": cubic-bezier(0.230, 1.000, 0.320, 1.000),\n \"power4.inOut\": cubic-bezier(0.860, 0.000, 0.070, 1.000),\n\n // Expo\n \"expo.in\": cubic-bezier(0.950, 0.050, 0.795, 0.035),\n \"expo.out\": cubic-bezier(0.190, 1.000, 0.220, 1.000),\n \"expo.inOut\": cubic-bezier(1.000, 0.000, 0.000, 1.000),\n\n // Back\n \"back.in\": cubic-bezier(0.600, -0.280, 0.735, 0.045),\n \"back.out\": cubic-bezier(0.175, 00.885, 0.320, 1.275),\n \"back.inOut\": cubic-bezier(0.680, -0.550, 0.265, 1.550),\n\n // Sine\n \"sine.in\": cubic-bezier(0.470, 0.000, 0.745, 0.715),\n \"sine.out\": cubic-bezier(0.390, 0.575, 0.565, 1.000),\n \"sine.inOut\": cubic-bezier(0.445, 0.050, 0.550, 0.950),\n\n // Circ\n \"circ.in\": cubic-bezier(0.600, 0.040, 0.980, 0.335),\n \"circ.out\": cubic-bezier(0.075, 0.820, 0.165, 1.000),\n \"circ.inOut\": cubic-bezier(0.785, 0.135, 0.150, 0.860),\n\n // Misc\n \"bounce\": cubic-bezier(0.17, 0.67, 0.3, 1.33),\n \"slow.out\": cubic-bezier(.04,1.15,0.4,.99),\n \"smooth\": cubic-bezier(0.380, 0.005, 0.215, 1),\n);\n\n// Default value for ease()\n$ease-default: \"power2.out\" !default;\n\n// Function\n// ==========================================================================\n\n// Returns ease curve.\n//\n// ```scss\n// .c-box {\n// transition-timing-function: ease(\"power2.out\");\n// }\n// ```\n//\n// @param {string} $key - The ease key in $eases.\n// @return {easing-function}\n\n@function ease($key: $ease-default) {\n @if not map.has-key($eases, $key) {\n @error \"Unknown '#{$key}' in $eases.\";\n }\n\n @return map.get($eases, $key);\n}\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.fonts.scss",
"content": "// ==========================================================================\n// Settings / Config / Breakpoints\n// ==========================================================================\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)\n// ==========================================================================\n\n$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;\n$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n\n// Typefaces\n// ==========================================================================\n\n// List of custom font faces as tuples.\n//\n// ```\n// \n// ```\n$font-faces: (\n (\"Helvetica Now Display\", \"HelveticaNowDisplay-Medium\", 500, normal),\n (\"Helvetica Now Display\", \"HelveticaNowDisplay-Regular\", 400, normal),\n (\"PP Locomotive New\", \"PPLocomotiveNew-Light\", 300, normal)\n);\n\n// Map of font families.\n//\n// ```\n// : (, )\n// ```\n$font-families: (\n display: list.join(\"Helvetica Now Display\", $font-fallback-sans, $separator: comma),\n serif: list.join(\"PP Locomotive New\", $font-fallback-sans, $separator: comma),\n);\n\n// Font directory\n$font-dir: \"../fonts/\";\n\n// Functions\n// ==========================================================================\n\n// Imports the custom font.\n//\n// The mixin expects font files to be woff and woff2.\n//\n// @param {List} $webfont - A custom font to import, as a tuple:\n// ``.\n// @param {String} $dir - The webfont directory path.\n// @output The `@font-face` at-rule specifying the custom font.\n\n@mixin font-face($webfont, $dir) {\n @font-face {\n font-display: swap;\n font-family: list.nth($webfont, 1);\n src: url(\"#{$dir}#{list.nth($webfont, 2)}.woff2\") format(\"woff2\"),\n url(\"#{$dir}#{list.nth($webfont, 2)}.woff\") format(\"woff\");\n font-weight: #{list.nth($webfont, 3)};\n font-style: #{list.nth($webfont, 4)};\n }\n}\n\n// Imports the list of custom fonts.\n//\n// @require {mixin} font-face\n//\n// @param {List} $webfonts - List of custom fonts to import.\n// See `font-face` mixin for details.\n// @param {String} $dir - The webfont directory path.\n// @output The `@font-face` at-rules specifying the custom fonts.\n\n@mixin font-faces($webfonts, $dir) {\n @if (list.length($webfonts) > 0) {\n @if (meta.type-of(list.nth($webfonts, 1)) == \"list\") {\n @each $webfont in $webfonts {\n @include font-face($webfont, $dir);\n }\n } @else {\n @include font-face($webfonts, $dir);\n }\n }\n}\n\n// Retrieves the font family stack for the given font ID.\n//\n// @require {variable} $font-families - See settings directory.\n//\n// @param {String} $font-family - The custom font ID.\n// @throws Error if the $font-family does not exist.\n// @return {List} The font stack.\n\n@function ff($font-family) {\n @if not map.has-key($font-families, $font-family) {\n @error \"No font-family found in $font-families map for `#{$font-family}`.\";\n }\n\n $value: map.get($font-families, $font-family);\n @return $value;\n}\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.scss",
"content": "// ==========================================================================\n// Settings / Config\n// ==========================================================================\n@use \"sass:math\";\n@use \"config.colors\" as *;\n@use \"config.timings\" as *;\n@use \"config.eases\" as *;\n\n// Context\n// =============================================================================\n\n// The current stylesheet context. Available values: frontend, editor.\n$context: frontend !default;\n\n// Path is relative to the stylesheets directory.\n$assets-path: \"../\" !default;\n\n// Typography\n// =============================================================================\n\n// Base\n$font-size: 16px;\n$line-height: math.div(24px, $font-size);\n$font-color: color(black);\n\n// Weights\n$font-weight-light: 300;\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n\n// Transition defaults\n// =============================================================================\n$speed: t(normal);\n$easing: ease(\"power3.out\");\n\n// Spacing Units\n// =============================================================================\n$unit: 60px;\n$unit-small: 20px;\n\n// Container\n// ==========================================================================\n$padding: $unit;\n\n// Grid\n// ==========================================================================\n$base-column-nb: 4;\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.spacers.scss",
"content": "// ==========================================================================\n// Settings / Config / Spacers\n// ==========================================================================\n@use \"sass:map\";\n@use \"../tools/functions\" as *;\n\n:root {\n --spacing-2xs-mobile: 6;\n --spacing-2xs-desktop: 10;\n\n --spacing-xs-mobile: 14;\n --spacing-xs-desktop: 16;\n\n --spacing-sm-mobile: 28;\n --spacing-sm-desktop: 32;\n\n --spacing-md-mobile: 42;\n --spacing-md-desktop: 56;\n\n --spacing-lg-mobile: 72;\n --spacing-lg-desktop: 96;\n\n --spacing-xl-mobile: 90;\n --spacing-xl-desktop: 120;\n\n --spacing-2xl-mobile: 96;\n --spacing-2xl-desktop: 160;\n\n --spacing-3xl-mobile: 112;\n --spacing-3xl-desktop: 224;\n}\n\n// Spacers\n// ==========================================================================\n\n$spacers: (\n 'gutter': var(--grid-gutter),\n '2xs': #{spacingClamp('2xs')},\n 'xs': #{spacingClamp('xs')},\n 'sm': #{spacingClamp('sm')},\n 'md': #{spacingClamp('md')},\n 'lg': #{spacingClamp('lg')},\n 'xl': #{spacingClamp('xl')},\n '2xl': #{spacingClamp('2xl')},\n '3xl': #{spacingClamp('3xl')},\n);\n\n// Function\n// ==========================================================================\n\n// Returns spacer.\n//\n// ```scss\n// .c-box {\n// margin-top: spacer(gutter);\n// }\n// ```\n//\n// @param {string} $key - The spacer key in $spacers.\n// @param {number} $multiplier - The multiplier of the spacer value.\n// @return {size}\n\n@function spacer($spacer: $spacer-default, $multiplier: 1) {\n @if not map.has-key($spacers, $spacer) {\n @error \"Unknown master spacer: #{$spacer}\";\n }\n\n $index: map.get($spacers, $spacer);\n\n @return calc(#{$index} * #{$multiplier});\n}\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.timings.scss",
"content": "// ==========================================================================\n// Settings / Config / Timings\n// ==========================================================================\n@use \"sass:map\";\n\n// Timings\n// ==========================================================================\n\n$timings: (\n fastest: 0.1s,\n faster: 0.15s,\n fast: 0.25s,\n normal: 0.5s,\n medium: 0.6s,\n slow: 0.75s,\n slower: 1s,\n slowest: 2s,\n);\n\n// Default timing for t()\n$timing-default: \"normal\" !default;\n\n// Function\n// ==========================================================================\n\n// Returns timing.\n//\n// ```scss\n// .c-box {\n// transition-duration: t(slow);\n// }\n// ```\n//\n// @param {string} $key - The timing key in $timings.\n// @return {duration}\n\n@function t($key: $timing-default) {\n @if not map.has-key($timings, $key) {\n @error \"Unknown '#{$key}' in $timings.\";\n }\n\n @return map.get($timings, $key);\n}\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.variables.scss",
"content": "// ==========================================================================\n// Settings / Config / CSS VARS\n// ==========================================================================\n@use '../tools/functions' as *;\n@use 'config.breakpoints' as *;\n:root {\n // Grid\n --grid-columns: 4;\n --grid-gutter: #{rem(10px)};\n --grid-margin: #{rem(10px)};\n\n // Container\n --container-width: calc(100% - 2 * var(--grid-margin));\n\n @media (max-width: $to-small) {\n --header-height: #{rem(34px)};\n }\n\n @media (min-width: $from-small) {\n --grid-gutter: #{rem(16px)};\n --grid-margin: #{rem(20px)};\n --header-height: #{rem(60px)};\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/settings/_config.zindexes.scss",
"content": "// ==========================================================================\n// Settings / Config / Z-indexes\n// ==========================================================================\n@use \"sass:map\";\n\n// Timings\n// ==========================================================================\n\n$z-indexes: (\n \"header\": 200,\n \"above\": 1,\n \"default\": 0,\n \"below\": -1\n);\n\n// Default z-index for z()\n$z-index-default: \"above\" !default;\n\n// Function\n// ==========================================================================\n\n// Retrieves the z-index from the {@see $layers master list}.\n//\n// @link on http://css-tricks.com/handling-z-index/\n//\n// @param {string} $layer The name of the z-index.\n// @param {number} $modifier A positive or negative modifier to apply\n// to the returned z-index value.\n// @throw Error if the $layer does not exist.\n// @throw Warning if the $modifier might overlap another master z-index.\n// @return {number} The computed z-index of $layer and $modifier.\n\n@function z($layer: $z-index-default, $modifier: 0) {\n @if not map.has-key($z-indexes, $layer) {\n @error \"Unknown master z-index layer: #{$layer}\";\n }\n\n @if ($modifier >= 50 or $modifier <= -50) {\n @warn \"Modifier may overlap the another master z-index layer: #{$modifier}\";\n }\n\n $index: map.get($z-indexes, $layer);\n\n @return $index + $modifier;\n}\n"
},
{
"path": "packages/landing/assets/styles/tools/_family.scss",
"content": "// ==========================================================================\n// Tools / Family\n// ==========================================================================\n@use \"sass:math\";\n\n// DOCS : https://lukyvj.github.io/family.scss/\n//\n// Select all children from the first to `$num`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin first($num) {\n @if $num == 1 {\n &:first-child {\n @content;\n }\n } @else {\n &:nth-child(-n + #{$num}) {\n @content;\n }\n }\n}\n\n// Select all children from the last to `$num`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin last($num) {\n &:nth-last-child(-n + #{$num}) {\n @content;\n }\n}\n\n// Select all children after the first to `$num`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin after-first($num) {\n &:nth-child(n + #{$num + 1}) {\n @content;\n }\n}\n\n// Select all children before `$num` from the last.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin from-end($num) {\n &:nth-last-child(#{$num}) {\n @content;\n }\n}\n\n// Select all children between `$first` and `$last`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin between($first, $last) {\n &:nth-child(n + #{$first}):nth-child(-n + #{$last}) {\n @content;\n }\n}\n\n// Select all even children between `$first` and `$last`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin even-between($first, $last) {\n &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {\n @content;\n }\n}\n\n// Select all odd children between `$first` and `$last`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin odd-between($first, $last) {\n &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {\n @content;\n }\n}\n\n// Select all `$num` children between `$first` and `$last`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin n-between($num, $first, $last) {\n &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {\n @content;\n }\n}\n\n// Select all children but `$num`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin all-but($num) {\n &:not(:nth-child(#{$num})) {\n @content;\n }\n}\n\n// Select children each `$num`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n// @alias every\n\n@mixin each($num) {\n &:nth-child(#{$num}n) {\n @content;\n }\n}\n\n// Select children each `$num`.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin every($num) {\n &:nth-child(#{$num}n) {\n @content;\n }\n}\n\n// Select the `$num` child from the start and the `$num` child from the last.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin from-first-last($num) {\n &:nth-child(#{$num}),\n &:nth-last-child(#{$num}) {\n @content;\n }\n}\n\n// Select the item in the middle of `$num` child. Only works with odd number\n// chain.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin middle($num) {\n &:nth-child(#{round(math.div($num, 2))}) {\n @content;\n }\n}\n\n// Select all children between the `$num` first and the `$num` last.\n// @group with-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - id of the child\n\n@mixin all-but-first-last($num) {\n &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {\n @content;\n }\n}\n\n// This quantity-query mixin will only select the first of `$limit` items. It will not\n// work if there is not as much as item as you set in `$limit`.\n// @group Quantity queries\n// @param {number} $limit\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin first-of($limit) {\n &:nth-last-child(#{$limit}):first-child {\n @content;\n }\n}\n\n// This quantity-query mixin will only select the last of `$limit` items. It will not\n// if there is not as much as item as you set in `$limit`.\n// @group Quantity queries\n// @param {number} $limit\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin last-of($limit) {\n &:nth-of-type(#{$limit}):nth-last-of-type(1) {\n @content;\n }\n}\n\n// This quantity-query mixin will select every items if there is at least `$num` items. It will not\n// if there is not as much as item as you set in `$num`.\n// @group Quantity queries\n// @param {number} $limit\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin at-least($num) {\n $selector: &;\n $child: nth(nth($selector, -1), -1);\n\n &:nth-last-child(n + #{$num}),\n &:nth-last-child(n + #{$num}) ~ #{$child} {\n @content;\n }\n}\n\n// This quantity-query mixin will select every items if there is at most `$num` items. It will not\n// if there is not as much as item as you set in `$num`.\n// @group Quantity queries\n// @param {number} $limit\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin at-most($num) {\n $selector: &;\n $child: nth(nth($selector, -1), -1);\n\n &:nth-last-child(-n + #{$num}):first-child,\n &:nth-last-child(-n + #{$num}):first-child ~ #{$child} {\n @content;\n }\n}\n\n// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.\n// @group Quantity queries\n// @param {number} $limit\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin in-between($min, $max) {\n $selector: &;\n $child: nth(nth($selector, -1), -1);\n\n &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child,\n &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child} {\n @content;\n }\n}\n\n// Select the first exact child\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin first-child() {\n &:first-of-type {\n @content\n }\n}\n\n// Select the last exact child\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin last-child() {\n &:last-of-type {\n @content\n }\n}\n\n// Select all even children.\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin even() {\n &:nth-child(even) {\n @content;\n }\n}\n\n// Select all odd children.\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin odd() {\n &:nth-child(odd) {\n @content;\n }\n}\n\n// Select only the first and last child.\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin first-last() {\n &:first-child,\n &:last-child {\n @content;\n }\n}\n\n// Will only select the child if it’s unique.\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @alias only\n\n@mixin unique() {\n &:only-child {\n @content;\n }\n}\n\n// Will only select the child if it’s unique.\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin only() {\n &:only-child {\n @content;\n }\n}\n\n// Will only select children if they are not unique. Meaning if there is at\n// least 2 children, the style is applied.\n// @group no-arguments\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n\n@mixin not-unique() {\n &:not(:only-child) {\n @content;\n }\n}\n\n// This mixin is used to automatically sort z-index in numerical order. But it\n// can also sort them in anti-numerical order, depending the parameters you use.\n// @group using functions\n// @content [Write the style you want to apply to the children, and it will be added within the @content directive]\n// @param {number} $num - Number of children\n// @param {string} $direction [forward] - Direction of the sort\n// @param {number} $index [0] - Index of the sorting\n\n@mixin child-index($num, $direction: 'forward', $index: 0) {\n @for $i from 1 through $num {\n @if ($direction == 'forward') {\n &:nth-child(#{$i}) {\n z-index: order-index($i, $index);\n @content;\n }\n } @else if ($direction == 'backward') {\n &:nth-last-child(#{$i}) {\n z-index: order-index($i, $index);\n @content;\n }\n }\n }\n}\n\n// Used by the child-index mixin. It will returned the proper sorted numbers\n// depending on the `$index` value.\n// @access private\n// @param {number} $num - Number of children\n// @param {number} $index - Index of the sorting\n\n@function order-index($i, $index) {\n @return ($index + $i);\n}\n"
},
{
"path": "packages/landing/assets/styles/tools/_functions.scss",
"content": "// ==========================================================================\n// Tools / Functions\n// ==========================================================================\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"sass:list\";\n@use \"maths\" as *;\n\n// Default font size for em() and rem() functions\n$font-size: 16px !default;\n\n// Check if the given value is a number in pixel\n//\n// @param {Number} $number - The value to check\n// @return {Boolean}\n\n@function is-pixel-number($number) {\n @return meta.type-of($number) == number and math.unit($number) == \"px\";\n}\n\n// Converts the given pixel value to its EM quivalent.\n//\n// @param {Number} $size - The pixel value to convert.\n// @param {Number} $base [$font-size] - The assumed base font size.\n// @return {Number} Scalable pixel value in EMs.\n\n@function em($size, $base: $font-size) {\n @if not is-pixel-number($size) {\n @error \"`#{$size}` needs to be a number in pixel.\";\n }\n\n @if not is-pixel-number($base) {\n @error \"`#{$base}` needs to be a number in pixel.\";\n }\n\n @return math.div($size, $base) * 1em;\n}\n\n// Converts the given pixel value to its REM quivalent.\n//\n// @param {Number} $size - The pixel value to convert.\n// @param {Number} $base [$font-size] - The assumed base font size.\n// @return {Number} Scalable pixel value in REMs.\n\n@function rem($size, $base: $font-size) {\n\n @if not is-pixel-number($size) {\n @error \"`#{$size}` needs to be a number in pixel.\";\n }\n\n @if not is-pixel-number($base) {\n @error \"`#{$base}` needs to be a number in pixel.\";\n }\n\n @return math.div($size, $base) * 1rem;\n}\n\n// Converts a number to a percentage.\n//\n// @alias percentage()\n// @link http://sassdoc.com/annotations/#alias\n// @param {Number} $number - The value to convert.\n// @return {Number} A percentage.\n\n@function span($number) {\n @return percentage($number);\n}\n\n// Checks if a list contains a value(s).\n//\n// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss\n// @param {List} $list - The list to check against.\n// @param {List} $values - A single value or list of values to check for.\n// @return {Boolean}\n// @access private\n\n@function list-contains(\n $list,\n $values...\n) {\n @each $value in $values {\n @if meta.type-of(list.index($list, $value)) != \"number\" {\n @return false;\n }\n }\n\n @return true;\n}\n\n// Resolve whether a rule is important or not.\n//\n// @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE).\n// @return {String|Null} Returns `!important` or NULL.\n\n@function important($flag: false) {\n @if ($flag == true) {\n @return !important;\n } @else if ($flag == false) {\n @return null;\n } @else {\n @error \"`#{$flag}` needs to be `true` or `false`.\";\n }\n}\n\n// Determine if the current context is for a WYSIWYG editor.\n//\n// @requires {String} $context - The global context of the stylesheet.\n// @return {Boolean} If the $context is set to \"editor\".\n\n@function is-editor() {\n @return ('editor' == $context);\n}\n\n// Determine if the current context is for the front-end.\n//\n// @requires {String} $context - The global context of the stylesheet.\n// @return {Boolean} If the $context is set to \"frontend\".\n\n@function is-frontend() {\n @return ('frontend' == $context);\n}\n\n$context: 'frontend' !default;\n\n// Returns calculation of a percentage of the grid cell width\n// with optional inset of grid gutter.\n//\n// ```scss\n// .c-box {\n// width: grid-space(6/12);\n// margin-left: grid-space(1/12, 1);\n// }\n// ```\n//\n// @param {number} $number - The percentage spacer\n// @param {number} $inset - The grid gutter inset\n// @return {function}\n@function grid-space($percentage, $inset: 0) {\n @return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));\n}\n\n// Returns calculation of a percentage of the viewport height.\n//\n// ```scss\n// .c-box {\n// height: vh(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in vh\n@function vh($number) {\n @return calc(#{$number} * var(--vh, 1vh));\n}\n\n// Returns calculation of a percentage of the viewport width.\n//\n// ```scss\n// .c-box {\n// width: vw(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in vw\n\n@function vw($number) {\n @return calc(#{$number} * var(--vw, 1vw));\n}\n\n// Returns calculation of a percentage of the viewport width.\n//\n// ```scss\n// .c-box {\n// width: vw(100);\n// }\n// ```\n//\n// @param {number} $number - The percentage number\n// @return {function} in vw\n\n$vw-viewport: 1440;\n@function vw($number) {\n @return calc(#{$number} * var(--vw, 1vw));\n}\n\n\n@function clampWithMax($min, $size, $max) {\n $vw-context: $vw-viewport * 0.01;\n @return clamp(#{$min}, calc(#{$size} / #{$vw-context} * 1vw), #{$max});\n}\n\n@function spacingClamp($size) {\n @return clampWithMax(\n calc(#{rem(1px)} * var(--spacing-#{$size}-mobile)),\n var(--spacing-#{$size}-desktop),\n calc(#{rem(1px)} * var(--spacing-#{$size}-desktop))\n );\n}\n\n// Returns clamp of calculated preferred responsive font size\n// within a font size and breakpoint range.\n//\n// ```scss\n// .c-heading.-h1 {\n// font-size: responsive-value(30px, 60px, 1800);\n// }\n//\n// .c-heading.-h2 {\n// font-size: responsive-value(20px, 40px, $from-big);\n// }\n// ```\n//\n// @param {number} $min-size - Minimum font size in pixels.\n// @param {number} $max-size - Maximum font size in pixels.\n// @param {number} $breakpoint - Maximum breakpoint.\n// @return {function, number>}\n@function responsive-value($min-size, $max-size, $breakpoint) {\n $delta: math.div($max-size, $breakpoint);\n @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);\n}\n"
},
{
"path": "packages/landing/assets/styles/tools/_layout.scss",
"content": "// ==========================================================================\n// Tools / Layout\n// ==========================================================================\n@use \"sass:meta\";\n\n// Grid-like layout system.\n//\n// The layout tools provide a column-style layout system. This file contains\n// the mixins to generate basic structural elements.\n//\n// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss\n//\n//\n// Generate the layout container.\n//\n// 1. Use the negative margin trick for multi-row grids:\n// http://csswizardry.com/2011/08/building-better-grid-systems/\n//\n// @requires {function} u-list-reset\n// @output `font-size`, `margin`, `padding`, `list-style`\n\n@mixin o-layout($gutter: 0, $fix-whitespace: true) {\n margin: 0;\n padding: 0;\n list-style: none;\n\n @if ($fix-whitespace) {\n font-size: 0;\n }\n\n @if (meta.type-of($gutter) == number) {\n margin-left: -$gutter; // [1]\n }\n}\n\n// Generate the layout item.\n//\n// 1. Required in order to combine fluid widths with fixed gutters.\n// 2. Allows us to manipulate grids vertically, with text-level properties,\n// etc.\n// 3. Default item alignment is with the tops of each other, like most\n// traditional grid/layout systems.\n// 4. By default, all layout items are full-width (mobile first).\n// 5. Gutters provided by left padding:\n// http://csswizardry.com/2011/08/building-better-grid-systems/\n\n@mixin o-layout_item($gutter: 0, $fix-whitespace: true) {\n display: inline-block; // [2]\n width: 100%; // [4]\n vertical-align: top; // [3]\n\n @if ($fix-whitespace) {\n font-size: 1rem;\n }\n\n @if (meta.type-of($gutter) == number) {\n padding-left: $gutter; // [5]\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/tools/_maths.scss",
"content": "// ==========================================================================\n// Tools / Maths\n// ==========================================================================\n@use \"sass:meta\";\n@use \"sass:math\";\n\n// Remove the unit of a length\n//\n// @param {Number} $number Number to remove unit from\n// @return {function}\n@function strip-unit($value) {\n @if meta.type-of($value) != \"number\" {\n @error \"Invalid `#{meta.type-of($value)}` type. Choose a number type instead.\";\n } @else if meta.type-of($value) == \"number\" and not math.is-unitless($value) {\n @return math.div($value, $value * 0 + 1);\n }\n\n @return $value;\n}\n\n// Returns the square root of the given number.\n//\n// @param {number} $number The number to calculate.\n// @return {number}\n\n@function sqrt($number) {\n $x: 1;\n $value: $x;\n\n @for $i from 1 through 10 {\n $value: $x - math.div(($x * $x - abs($number)), (2 * $x));\n $x: $value;\n }\n\n @return $value;\n}\n\n// Returns a number raised to the power of an exponent.\n//\n// @param {number} $number The base number.\n// @param {number} $exp The exponent.\n// @return {number}\n\n@function pow($number, $exp) {\n $value: 1;\n\n @if $exp > 0 {\n @for $i from 1 through $exp {\n $value: $value * $number;\n }\n } @else if $exp < 0 {\n @for $i from 1 through -$exp {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n// Returns the factorial of the given number.\n//\n// @param {number} $number The number to calculate.\n// @return {number}\n\n@function fact($number) {\n $value: 1;\n\n @if $number > 0 {\n @for $i from 1 through $number {\n $value: $value * $i;\n }\n }\n\n @return $value;\n}\n\n// Returns an approximation of pi, with 11 decimals.\n//\n// @return {number}\n\n@function pi() {\n @return 3.14159265359;\n}\n\n// Converts the number in degrees to the radian equivalent .\n//\n// @param {number} $angle The angular value to calculate.\n// @return {number} If $angle has the `deg` unit,\n// the radian equivalent is returned.\n// Otherwise, the unitless value of $angle is returned.\n\n@function rad($angle) {\n $unit: math.unit($angle);\n $angle: strip-units($angle);\n\n // If the angle has `deg` as unit, convert to radians.\n @if ($unit == deg) {\n @return math.div($angle, 180) * pi();\n }\n\n @return $angle;\n}\n\n// Returns the sine of the given number.\n//\n// @param {number} $angle The angle to calculate.\n// @return {number}\n\n@function sin($angle) {\n $sin: 0;\n $angle: rad($angle);\n\n @for $i from 0 through 10 {\n $sin: $sin + pow(-1, $i) * math.div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));\n }\n\n @return $sin;\n}\n\n// Returns the cosine of the given number.\n//\n// @param {string} $angle The angle to calculate.\n// @return {number}\n\n@function cos($angle) {\n $cos: 0;\n $angle: rad($angle);\n\n @for $i from 0 through 10 {\n $cos: $cos + pow(-1, $i) * math.div(pow($angle, 2 * $i), fact(2 * $i));\n }\n\n @return $cos;\n}\n\n// Returns the tangent of the given number.\n//\n// @param {string} $angle The angle to calculate.\n// @return {number}\n\n@function tan($angle) {\n @return math.div(sin($angle), cos($angle));\n}\n\n@function mapRangePx($css-var, $min0, $max0, $min1, $max1) {\n @return calc((#{$min1} + (( #{$css-var} - #{$min0}) / (#{$max0} - #{$min0})) * (#{$max1} - #{$min1})) * 1px);\n}\n\n@function mapRange($css-var, $min0, $max0, $min1, $max1) {\n @return calc(#{$min1} + (( #{$css-var} - #{$min0}) / (#{$max0} - #{$min0})) * (#{$max1} - #{$min1}));\n}\n\n@function mapRangeClampPx($css-var, $min0, $max0, $min1, $max1, $clampMin, $clampMax) {\n @return calc(clamp( (#{$clampMin}) * 1px, (#{$min1} + (( #{$css-var} - #{$min0}) / (#{$max0} - #{$min0})) * (#{$max1} - #{$min1})) * 1px, (#{$clampMax}) * 1px));\n}\n\n@function mapRangeClamp($css-var, $min0, $max0, $min1, $max1, $clampMin, $clampMax) {\n @return calc(clamp( #{$clampMin}, #{$min1} + (( #{$css-var} - #{$min0}) / (#{$max0} - #{$min0})) * (#{$max1} - #{$min1}), #{$clampMax}));\n}"
},
{
"path": "packages/landing/assets/styles/tools/_mixins.scss",
"content": "// ==========================================================================\n// Tools / Mixins\n// ==========================================================================\n@use \"sass:meta\";\n@use \"sass:math\";\n@use \"functions\" as *;\n\n// Set the color of the highlight that appears over a link while it's being tapped.\n//\n// By default, the highlight is suppressed.\n//\n// @param {Color} $value [rgba(0, 0, 0, 0)] - The value of the highlight.\n// @output `-webkit-tap-highlight-color`\n\n@mixin tap-highlight-color($value: rgba(0, 0, 0, 0)) {\n -webkit-tap-highlight-color: $value;\n}\n\n// Set whether or not touch devices use momentum-based scrolling for the given element.\n//\n// By default, applies momentum-based scrolling for the current element.\n//\n// @param {String} $value [rgba(0, 0, 0, 0)] - The type of scrolling.\n// @output `-webkit-overflow-scrolling`\n\n@mixin overflow-scrolling($value: touch) {\n -webkit-overflow-scrolling: $value;\n}\n\n// Micro clearfix rules for containing floats.\n//\n// @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/\n// @param {List} $supports The type of clearfix to generate.\n// @output Injects `:::after` pseudo-element.\n\n@mixin u-clearfix($supports...) {\n &::after {\n display: meta.if(list-contains($supports, table), table, block);\n clear: both;\n content: meta.if(list-contains($supports, opera), \" \", \"\");\n }\n}\n\n// Generate a font-size and baseline-compatible line-height.\n//\n// @link https://github.com/inuitcss/inuitcss/c14029c/tools/_tools.font-size.scss\n// @param {Number} $font-size - The size of the font.\n// @param {Number} $line-height [auto] - The line box height.\n// @param {Boolean} $important [false] - Whether the font-size is important.\n// @output `font-size`, `line-height`\n\n@mixin font-size($font-size, $line-height: auto, $important: false) {\n $important: important($important);\n font-size: rem($font-size) $important;\n\n @if ($line-height == \"auto\") {\n line-height: ceil(math.div($font-size, $line-height)) * math.div($line-height, $font-size) $important;\n }\n @else {\n @if (meta.type-of($line-height) == number or $line-height == \"inherit\" or $line-height == \"normal\") {\n line-height: $line-height $important;\n }\n @else if ($line-height != \"none\" and $line-height != false) {\n @error \"D’oh! `#{$line-height}` is not a valid value for `$line-height`.\";\n }\n }\n}\n\n// Vertically-center the direct descendants of the current element.\n//\n// Centering is achieved by displaying children as inline-blocks. Any whitespace\n// between elements is nullified by redefining the font size of the container\n// and its children.\n//\n// @output `font-size`, `display`, `vertical-align`\n\n@mixin o-vertical-center {\n font-size: 0;\n\n &::before {\n display: inline-block;\n height: 100%;\n content: \"\";\n vertical-align: middle;\n }\n\n > * {\n display: inline-block;\n vertical-align: middle;\n font-size: 1rem;\n }\n}\n\n// Generate `:hover` and `:focus` styles in one go.\n//\n// @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss\n// @content Wrapped in `:focus` and `:hover` pseudo-classes.\n// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.\n\n@mixin u-hocus {\n &:focus,\n &:hover {\n @content;\n }\n}\n\n// Generate `:active` and `:focus` styles in one go.\n//\n// @see {Mixin} u-hocus\n// @content Wrapped in `:focus` and `:active` pseudo-classes.\n// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.\n\n@mixin u-actus {\n &:focus,\n &:active {\n @content;\n }\n}\n\n// Prevent text from wrapping onto multiple lines for the current element.\n//\n// An ellipsis is appended to the end of the line.\n//\n// 1. Ensure that the node has a maximum width after which truncation can occur.\n// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor nodes.\n//\n// @param {Number} $width [100%] - The maximum width of element.\n// @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`\n\n@mixin u-truncate($width: 100%) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: normal; // [2]\n @if $width {\n max-width: $width; // [1]\n }\n}\n\n// Applies accessible hiding to the current element.\n//\n// @param {Boolean} $important [true] - Whether the visibility is important.\n// @output Properties for removing the element from the document flow.\n\n@mixin u-accessibly-hidden($important: true) {\n $important: important($important);\n position: absolute $important;\n overflow: hidden;\n clip: rect(0 0 0 0);\n margin: 0;\n padding: 0;\n width: 1px;\n height: 1px;\n border: 0;\n}\n\n// Allows an accessibly hidden element to be focusable via keyboard navigation.\n//\n// @content For styling the now visible element.\n// @output Injects `:focus`, `:active` pseudo-classes.\n\n@mixin u-accessibly-focusable {\n @include u-actus {\n clip: auto;\n width: auto;\n height: auto;\n\n @content;\n }\n}\n\n// Hide the current element from all.\n//\n// The element will be hidden from screen readers and removed from the document flow.\n//\n// @link http://juicystudio.com/article/screen-readers-display-none.php\n// @param {Boolean} $important [true] - Whether the visibility is important.\n// @output `display`, `visibility`\n\n@mixin u-hidden($important: true) {\n $important: important($important);\n display: none $important;\n visibility: hidden $important;\n}\n\n// Show the current element for all.\n//\n// The element will be accessible from screen readers and visible in the document flow.\n//\n// @param {String} $display [block] - The rendering box used for the element.\n// @param {Boolean} $important [true] - Whether the visibility is important.\n// @output `display`, `visibility`\n\n@mixin u-shown($display: block, $important: true) {\n $important: important($important);\n display: $display $important;\n visibility: visible $important;\n}\n\n// Aspect-ratio polyfill\n//\n// @param {Number} $ratio [19/6] - The ratio of the element.\n// @param {Number} $width [100%] - The fallback width of element.\n// @param {Boolean} $children [false] - Whether the element contains children for the fallback properties.\n// @output Properties for maintaining aspect-ratio\n\n@mixin aspect-ratio($ratio: math.div(16, 9), $width: 100%, $children: false) {\n\n @supports (aspect-ratio: 1) {\n aspect-ratio: $ratio;\n }\n\n @supports not (aspect-ratio: 1) {\n height: 0;\n padding-top: calc(#{$width} * #{math.div(1, $ratio)});\n\n @if ($children == true) {\n position: relative;\n\n > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n }\n}\n\n// Add focus state to focused element\n@mixin u-focus-visible (\n $color: currentColor,\n $style: solid,\n $width: 2px,\n $offset: 2px,\n ) {\n outline-color: $color;\n outline-style: $style;\n outline-width: $width;\n outline-offset: $offset;\n}\n"
},
{
"path": "packages/landing/assets/styles/tools/_widths.scss",
"content": "// ==========================================================================\n// Tools / Widths\n// ==========================================================================\n@use \"sass:math\";\n@use \"functions\" as *;\n\n// Optionally, the boilerplate can generate classes to offset items by a\n// certain width. Would you like to generate these types of class as well? E.g.:\n//\n// @example css\n// .u-push-1/3\n// .u-pull-2/4\n// .u-pull-1/5\n// .u-push-2/3\n\n$widths-offsets: false !default;\n\n// By default, the boilerplate uses fractions-like classes like `
`.\n// You can change the `/` to whatever you fancy with this variable.\n\n$fractions-delimiter: \\/ !default;\n\n// When using Sass-MQ, this defines the separator for the breakpoints suffix\n// in the class name. By default, we are generating the responsive suffixes\n// for the classes with a `@` symbol so you get classes like:\n//
\n\n$breakpoint-delimiter: \\@ !default;\n\n// Generate a series of width helper classes\n//\n// @example scss\n// @include widths(12);\n//\n// @example html\n//
\n//\n// @link https://github.com/inuitcss/inuitcss/commit/6eb574f/utilities/_utilities.widths.scss\n// @requires {Function} important\n// @requires {Function} $widths-offsets\n// @requires {Function} $fractions-delimiter\n// @requires {Function} $breakpoint-delimiter\n// @param {List} $colums - The columns we want the widths to have.\n// @param {String} $breakpoint - Optional suffix for responsive widths.\n// @output `width`, `position`, `right`, `left`\n\n@mixin widths($columns, $breakpoint: null, $important: true) {\n $important: important($important);\n\n // Loop through the number of columns for each denominator of our fractions.\n @each $denominator in $columns {\n // Begin creating a numerator for our fraction up until we hit the\n // denominator.\n @for $numerator from 1 through $denominator {\n // Build a class in the format `.u-3/4[@]`.\n .u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {\n width: math.div($numerator, $denominator) * 100% $important;\n }\n\n @if ($widths-offsets == true) {\n // Build a class in the format `.u-push-1/2[@]`.\n .u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {\n position: relative $important;\n right: auto $important;\n left: math.div($numerator, $denominator) * 100% $important;\n }\n\n // Build a class in the format `.u-pull-5/6[@]`.\n .u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {\n position: relative $important;\n right: math.div($numerator, $denominator) * 100% $important;\n left: auto $important;\n }\n }\n }\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/utilities/_align.scss",
"content": "// ==========================================================================\n// Utilities / Alignment\n// ==========================================================================\n\n// Floats\n// ==========================================================================\n\n.u-float-left {\n float: left !important;\n}\n\n.u-float-right {\n float: right !important;\n}\n\n// Horizontal Text\n// ==========================================================================\n\n.u-text-center {\n text-align: center !important;\n}\n\n.u-text-left {\n text-align: left !important;\n}\n\n.u-text-right {\n text-align: right !important;\n}\n\n// Vertical Text\n// ==========================================================================\n\n.u-align-baseline {\n vertical-align: baseline !important;\n}\n\n.u-align-bottom {\n vertical-align: bottom !important;\n}\n\n.u-align-middle {\n vertical-align: middle !important;\n}\n\n.u-align-top {\n vertical-align: top !important;\n}\n\n.u-vertical-center {\n @include o-vertical-center;\n}\n"
},
{
"path": "packages/landing/assets/styles/utilities/_grid-column.scss",
"content": "// ==========================================================================\n// Tools / Grid Columns\n// ==========================================================================\n\n\n@use \"../core\" as *;\n//\n// Grid layout system.\n//\n// This tool generates columns for all needed media queries.\n// Unused classes will be purge by the css post-processor.\n//\n\n$colsMax: $base-column-nb + 1;\n\n@each $breakpoint, $mediaquery in $breakpoints {\n @for $fromIndex from 1 through $colsMax {\n @for $toIndex from 1 through $colsMax {\n\n // Columns without media query\n @if $breakpoint == \"tiny\" {\n .u-gc-#{$fromIndex}\\/#{$toIndex} {\n --gc-start: #{$fromIndex};\n --gc-end: #{$toIndex};\n }\n }\n\n // Columns min-width breakpoints `@from-*`\n .u-gc-#{$fromIndex}\\/#{$toIndex}\\@from-#{$breakpoint} {\n @media #{mq-min($breakpoint)} {\n --gc-start: #{$fromIndex};\n --gc-end: #{$toIndex};\n }\n }\n\n // Columns max-width breakpoints @to-*`\n .u-gc-#{$fromIndex}\\/#{$toIndex}\\@to-#{$breakpoint} {\n @media #{mq-max($breakpoint)} {\n --gc-start: #{$fromIndex};\n --gc-end: #{$toIndex};\n }\n }\n }\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/utilities/_helpers.scss",
"content": "// ==========================================================================\n// Utilities / Helpers\n// ==========================================================================\n\n// Layout\n// ==========================================================================\n\n@use '../core' as *;\n.u-relative {\n position: relative;\n}\n\n.u-clipped {\n clip-path: polygon(0% 0, 100% 00%, 100% 100%, 0 100%);\n}\n\n.u-max {\n &-w300 {\n max-width: rem(300px);\n }\n &-w440 {\n max-width: rem(440px);\n }\n}\n\n.u-glyph {\n font-family: ff('serif');\n font-feature-settings: 'dlig' on, 'ss01' on, 'salt' on;\n font-weight: $font-weight-regular;\n}\n\n.u-hover-underline {\n position: relative;\n\n @media (hover: hover) {\n &::before {\n content: '';\n position: absolute;\n bottom: -0.1em;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: currentColor;\n transform: scale3d(0, 1, 1);\n transition: transform t(fast) ease('power3.out');\n transform-origin: top right;\n }\n\n &:hover,\n .u-hover:hover & {\n &::before {\n transform: scale3d(1, 1, 1);\n transform-origin: top left;\n }\n }\n }\n}\n\n// Completely remove from the flow but leave available to screen readers.\n.u-screen-reader-text {\n @include u-accessibly-hidden;\n}\n\n@media not print {\n .u-screen-reader-text\\@screen {\n @include u-accessibly-hidden;\n }\n}\n\n// Extends the `.screen-reader-text` class to allow the element\n// to be focusable when navigated to via the keyboard.\n//\n// @link https://www.drupal.org/node/897638\n// @todo Define styles when focused.\n\n.u-screen-reader-text.-focusable {\n @include u-accessibly-focusable;\n}\n\n.u-external-icon {\n font-size: 0.85em;\n}\n\n.u-text-balance {\n text-wrap: balance;\n}\n\n.u-hidden-md {\n @media (max-width: $to-medium) {\n display: none;\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/utilities/_print.scss",
"content": "// ==========================================================================\n// Utilities / Print Mode\n// ==========================================================================\n\n////\n/// Very crude, reset-like styles taken from the HTML5 Boilerplate:\n/// - https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles\n/// - https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282\n///\n/// @link https://github.com/inuitcss/inuitcss/blob/c27993f/utilities/_utilities.print.scss\n////\n\n@media print {\n\n // 1. Black prints faster: http://www.sanbeiji.com/archives/953\n\n *,\n *:before,\n *:after,\n *:first-letter,\n *:first-line {\n background: transparent !important;\n box-shadow: none !important;\n color: #000000 !important; // [1]\n text-shadow: none !important;\n }\n\n a,\n a:visited {\n text-decoration: underline;\n }\n\n a[href]:after {\n content: \" (\" attr(href) \")\";\n }\n\n abbr[title]:after {\n content: \" (\" attr(title) \")\";\n }\n\n // Don't show links that are fragment identifiers, or use the `javascript:`\n // pseudo protocol.\n\n a[href^=\"#\"]:after,\n a[href^=\"javascript:\"]:after {\n content: \"\";\n }\n\n pre,\n blockquote {\n border: 1px solid #999999;\n page-break-inside: avoid;\n }\n\n // Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables\n\n thead {\n display: table-header-group;\n }\n\n tr,\n img {\n page-break-inside: avoid;\n }\n\n\n img {\n max-width: 100% !important;\n }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n h2,\n h3 {\n page-break-after: avoid;\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/utilities/_ratio.scss",
"content": "// ==========================================================================\n// Utilities / Ratio\n// ==========================================================================\n@use \"sass:meta\";\n\n// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss\n\n// A list of aspect ratios that get generated as modifier classes.\n$aspect-ratios: (\n (2:1),\n (4:3),\n (16:9),\n) !default;\n\n/* stylelint-disable */\n\n// Generate a series of ratio classes to be used like so:\n//\n// @example\n//
\n\n@each $ratio in $aspect-ratios {\n @each $antecedent, $consequent in $ratio {\n @if (meta.type-of($antecedent) != number) {\n @error \"`#{$antecedent}` needs to be a number.\"\n }\n\n @if (meta.type-of($consequent) != number) {\n @error \"`#{$consequent}` needs to be a number.\"\n }\n\n .u-#{$antecedent}\\:#{$consequent}::before {\n padding-bottom: math.div($consequent, $antecedent) * 100%;\n }\n }\n}\n\n/* stylelint-enable */\n"
},
{
"path": "packages/landing/assets/styles/utilities/_spacing.scss",
"content": "// ==========================================================================\n// Utilities / Spacing\n// ==========================================================================\n\n@use \"../core\" as *;\n@use \"sass:list\";\n\n////\n/// Utility classes to put specific spacing values onto elements. The below loop\n/// will generate us a suite of classes like:\n///\n/// @example\n/// .u-margin-top {}\n/// .u-padding-left-large {}\n/// .u-margin-right-small {}\n/// .u-padding {}\n/// .u-padding-right-none {}\n/// .u-padding-horizontal {}\n/// .u-padding-vertical-small {}\n///\n/// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss\n////\n\n/* stylelint-disable string-quotes */\n\n$spacing-directions: (\n null: null,\n '-top': '-top',\n '-right': '-right',\n '-bottom': '-bottom',\n '-left': '-left',\n '-x': '-left' '-right',\n '-y': '-top' '-bottom',\n) !default;\n\n$spacing-properties: (\n 'padding': 'padding',\n 'margin': 'margin',\n) !default;\n\n$spacing-sizes: list.join($spacers, (\n null: var(--grid-gutter),\n 'none': 0\n));\n\n@each $breakpoint, $mediaquery in $breakpoints {\n @each $property-namespace, $property in $spacing-properties {\n @each $direction-namespace, $directions in $spacing-directions {\n @each $size-namespace, $size in $spacing-sizes {\n\n // Prepend \"-\" to spacing sizes if not null\n @if ($size-namespace != null) {\n $size-namespace: \"-\" + $size-namespace;\n }\n\n // Base class\n $base-class: \".u-\" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};\n\n // Spacer without media query\n @if $breakpoint == \"tiny\" {\n #{$base-class} {\n @each $direction in $directions {\n #{$property}#{$direction}: $size !important;\n }\n }\n }\n\n // Spacer min-width breakpoints `@from-*`\n #{$base-class}\\@from-#{$breakpoint} {\n @media #{mq-min($breakpoint)} {\n @each $direction in $directions {\n #{$property}#{$direction}: $size !important;\n }\n }\n }\n\n // Spacer max-width breakpoints @to-*`\n #{$base-class}\\@to-#{$breakpoint} {\n @media #{mq-max($breakpoint)} {\n @each $direction in $directions {\n #{$property}#{$direction}: $size !important;\n }\n }\n }\n }\n }\n }\n}\n\n/* stylelint-enable string-quotes */\n"
},
{
"path": "packages/landing/assets/styles/utilities/_states.scss",
"content": "// ==========================================================================\n// Utilities / States\n// ==========================================================================\n\n// ARIA roles display visual cursor hints\n\n[aria-busy=\"true\"] {\n cursor: progress;\n}\n\n[aria-controls] {\n cursor: pointer;\n}\n\n[aria-disabled] {\n cursor: default;\n}\n\n// Control visibility without affecting flow.\n\n.is-visible {\n visibility: visible !important;\n opacity: 1 !important;\n}\n\n.is-invisible {\n visibility: hidden !important;\n opacity: 0 !important;\n}\n\n// Completely remove from the flow and screen readers.\n\n.is-hidden {\n @include u-hidden;\n}\n\n@media not print {\n .is-hidden\\@screen {\n @include u-hidden;\n }\n}\n\n@media print {\n .is-hidden\\@print {\n @include u-hidden;\n }\n}\n\n// .is-hidden\\@to-large {\n// @media (max-width: $to-large) {\n// display: none;\n// }\n// }\n//\n// .is-hidden\\@from-large {\n// @media (min-width: $from-large) {\n// display: none;\n// }\n// }\n\n// // Display a hidden-by-default element.\n//\n// .is-shown {\n// @include u-shown;\n// }\n//\n// table.is-shown {\n// display: table !important;\n// }\n//\n// tr.is-shown {\n// display: table-row !important;\n// }\n//\n// td.is-shown,\n// th.is-shown {\n// display: table-cell !important;\n// }\n"
},
{
"path": "packages/landing/assets/styles/utilities/_theme.scss",
"content": "// ==========================================================================\n// Utilities / Theme\n// ==========================================================================\n\n\n@use \"../core\" as *;\n:root {\n --color-text: #{color(blue)};\n --color-background: #{color(white)};\n}\n\n[data-theme=\"white\"] {\n color: var(--color-text);\n background-color: var(--color-background);\n}\n\n[data-theme=\"blue\"] {\n --color-text: #{color(white)};\n --color-background: #{color(blue)};\n\n color: var(--color-text);\n background-color: var(--color-background);\n}\n\n[data-theme=\"black\"] {\n --color-text: #{color(white)};\n --color-background: #{color(black)};\n\n color: var(--color-text);\n background-color: var(--color-background);\n}\n"
},
{
"path": "packages/landing/assets/styles/utilities/_widths.scss",
"content": "// ==========================================================================\n// Utilities / Widths\n// ==========================================================================\n\n////\n/// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss\n///\n///\n/// Which fractions would you like in your grid system(s)?\n/// By default, the boilerplate provides fractions of one whole, halves, thirds,\n/// quarters, and fifths, e.g.:\n///\n/// @example css\n/// .u-1/2\n/// .u-2/5\n/// .u-3/4\n/// .u-2/3\n////\n\n$widths-fractions: 1 2 3 4 5 !default;\n\n@include widths($widths-fractions);\n\n.u-1\\/2\\@from-small {\n @media (min-width: $from-small) {\n width: span(1/2);\n }\n}\n"
},
{
"path": "packages/landing/assets/styles/vendors/.gitkeep",
"content": ""
},
{
"path": "packages/landing/assets.json",
"content": "{\n \"version\": 1767911710101\n}"
},
{
"path": "packages/landing/build/build.js",
"content": "import buildEleventy from './tasks/eleventy.js';\nimport concatFiles from './tasks/concats.js';\nimport compileScripts from './tasks/scripts.js';\nimport compileStyles from './tasks/styles.js';\nimport compileSVGs from './tasks/svgs.js';\nimport bumpVersions from './tasks/versions.js';\n\nbuildEleventy();\nconcatFiles();\ncompileScripts();\ncompileStyles();\ncompileSVGs();\nbumpVersions();\n"
},
{
"path": "packages/landing/build/helpers/config.js",
"content": "/**\n * @file Provides simple user configuration options.\n */\n\nimport loconfig from '../../loconfig.json' with { type: 'json' };\nimport { merge } from '../utils/index.js';\n\nlet usrconfig;\n\ntry {\n usrconfig = await import('../../loconfig.local.json', {\n with: { type: 'json' },\n });\n usrconfig = usrconfig.default;\n\n merge(loconfig, usrconfig);\n} catch (err) {\n // do nothing\n}\n\nexport default loconfig;\n\nexport {\n loconfig,\n};\n"
},
{
"path": "packages/landing/build/helpers/glob.js",
"content": "/**\n * @file Retrieve the first available glob library.\n *\n * Note that options vary between libraries.\n *\n * Candidates:\n *\n * - {@link https://npmjs.com/package/tiny-glob tiny-glob} [1][5][6]\n * - {@link https://npmjs.com/package/globby globby} [2][5]\n * - {@link https://npmjs.com/package/fast-glob fast-glob} [3]\n * - {@link https://npmjs.com/package/glob glob} [1][4][5]\n *\n * Notes:\n *\n * - [1] The library's function accepts only a single pattern.\n * - [2] The library's function accepts only an array of patterns.\n * - [3] The library's function accepts either a single pattern\n * or an array of patterns.\n * - [4] The library's function does not return a Promise but will be\n * wrapped in a function that does return a Promise.\n * - [5] The library's function will be wrapped in a function that\n * supports a single pattern and an array of patterns.\n * - [6] The library's function returns files and directories but will be\n * preconfigured to return only files.\n */\n\nimport { promisify } from 'node:util';\n\n/**\n * @callback GlobFn\n *\n * @param {string|string[]} patterns - A string pattern\n * or an array of string patterns.\n * @param {object} options\n *\n * @returns {Promise}\n */\n\n/**\n * @typedef {object} GlobOptions\n */\n\n/**\n * @type {GlobFn|undefined} The discovered glob function.\n */\nlet glob;\n\n/**\n * @type {string[]} A list of packages to attempt import.\n */\nconst candidates = [\n 'tiny-glob',\n 'globby',\n 'fast-glob',\n 'glob',\n];\n\ntry {\n glob = await importGlob();\n} catch (err) {\n // do nothing\n}\n\n/**\n * @type {boolean} Whether a glob function was discovered (TRUE) or not (FALSE).\n */\nconst supportsGlob = (typeof glob === 'function');\n\n/**\n * Imports the first available glob function.\n *\n * @throws {TypeError} If no glob library was found.\n *\n * @returns {GlobFn}\n */\nasync function importGlob() {\n for (let name of candidates) {\n try {\n let globModule = await import(name);\n\n if (typeof globModule.default !== 'function') {\n throw new TypeError(`Expected ${name} to be a function`);\n }\n\n /**\n * Wrap the function to ensure\n * a common pattern.\n */\n switch (name) {\n case 'tiny-glob':\n /** [1][5] */\n return createArrayableGlob(\n /** [6] */\n createPresetGlob(globModule.default, {\n filesOnly: true\n })\n );\n\n case 'globby':\n /** [2][5] - If `patterns` is a string, wraps into an array. */\n return (patterns, options) => globModule.default([].concat(patterns), options);\n\n case 'glob':\n /** [1][5] */\n return createArrayableGlob(\n /** [4] */\n promisify(globModule.default)\n );\n\n default:\n return globModule.default;\n }\n } catch (err) {\n // swallow this error; skip to the next candidate.\n }\n }\n\n throw new TypeError(\n `No glob library was found, expected one of: ${candidates.join(', ')}`\n );\n}\n\n/**\n * Creates a wrapper function for the glob function\n * to provide support for arrays of patterns.\n *\n * @param {function} globFn - The glob function.\n *\n * @returns {GlobFn}\n */\nfunction createArrayableGlob(globFn) {\n return (patterns, options) => {\n /** [2] If `patterns` is a string, wraps into an array. */\n patterns = [].concat(patterns);\n\n const globs = patterns.map((pattern) => globFn(pattern, options));\n\n return Promise.all(globs).then((files) => {\n return [].concat.apply([], files);\n });\n };\n}\n\n/**\n * Creates a wrapper function for the glob function\n * to define new default options.\n *\n * @param {function} globFn - The glob function.\n * @param {GlobOptions} presets - The glob function options to preset.\n *\n * @returns {GlobFn}\n */\nfunction createPresetGlob(globFn, presets) {\n return (patterns, options) => globFn(patterns, Object.assign({}, presets, options));\n}\n\nexport default glob;\n\nexport {\n glob,\n supportsGlob,\n};\n"
},
{
"path": "packages/landing/build/helpers/message.js",
"content": "/**\n * @file Provides a decorator for console messages.\n */\n\nimport kleur from 'kleur';\n\n/**\n * Outputs a message to the console.\n *\n * @param {string} text - The message to output.\n * @param {string} [type] - The type of message.\n * @param {string} [timerID] - The console time label to output.\n */\nfunction message(text, type, timerID) {\n switch (type) {\n case 'success':\n console.log('✅ ', kleur.bgGreen().black(text));\n break;\n\n case 'chore':\n console.log('🧹 ', kleur.bgGreen().black(text));\n break;\n\n case 'notice':\n console.log('ℹ️ ', kleur.bgBlue().black(text));\n break;\n\n case 'error':\n console.log('❌ ', kleur.bgRed().black(text));\n break;\n\n case 'warning':\n console.log('⚠️ ', kleur.bgYellow().black(text));\n break;\n\n case 'waiting':\n console.log('⏱ ', kleur.blue().italic(text));\n\n if (timerID != null) {\n console.timeLog(timerID);\n timerID = null;\n }\n break;\n\n default:\n console.log(text);\n break;\n }\n\n if (timerID != null) {\n console.timeEnd(timerID);\n }\n\n console.log('');\n}\n\nexport default message;\n\nexport {\n message,\n};\n"
},
{
"path": "packages/landing/build/helpers/notification.js",
"content": "/**\n * @file Provides a decorator for cross-platform notification.\n */\n\nimport notifier from 'node-notifier';\n\n/**\n * Sends a cross-platform native notification.\n *\n * Wraps around node-notifier to assign default values.\n *\n * @param {string|object} options - The notification options or a message.\n * @param {string} options.title - The notification title.\n * @param {string} options.message - The notification message.\n * @param {string} options.icon - The notification icon.\n * @param {function} callback - The notification callback.\n * @return {void}\n */\nfunction notification(options, callback) {\n if (typeof options === 'string') {\n options = {\n message: options\n };\n } else if (!options.title && !options.message) {\n throw new TypeError(\n 'Notification expects at least a \\'message\\' parameter'\n );\n }\n\n if (typeof options.icon === 'undefined') {\n options.icon = 'https://user-images.githubusercontent.com/4596862/54868065-c2aea200-4d5e-11e9-9ce3-e0013c15f48c.png';\n }\n\n // If notification does not use a callback,\n // shorten the wait before timing out.\n if (typeof callback === 'undefined') {\n if (typeof options.wait === 'undefined') {\n if (typeof options.timeout === 'undefined') {\n options.timeout = 5;\n }\n }\n }\n\n notifier.notify(options, callback);\n}\n\nexport default notification;\n\nexport {\n notification,\n};\n"
},
{
"path": "packages/landing/build/helpers/postcss.js",
"content": "/**\n * @file If available, returns the PostCSS Processor creator and\n * any the Autoprefixer PostCSS plugin.\n */\n\n/**\n * @typedef {import('autoprefixer').autoprefixer.Options} AutoprefixerOptions\n */\n\n/**\n * @typedef {import('postcss').AcceptedPlugin} AcceptedPlugin\n */\n\n/**\n * @typedef {import('postcss').Postcss} Postcss\n */\n\n/**\n * @typedef {import('postcss').ProcessOptions} ProcessOptions\n */\n\n/**\n * @typedef {import('postcss').Processor} Processor\n */\n\n/**\n * @typedef {AcceptedPlugin[]} PluginList\n */\n\n/**\n * @typedef {object} PluginMap\n */\n\n/**\n * @typedef {PluginList|PluginMap} PluginCollection\n */\n\n/**\n * @typedef {object} PostCSSOptions\n *\n * @property {ProcessOptions} processor - The `Processor#process()` options.\n * @property {AutoprefixerOptions} autoprefixer - The `autoprefixer()` options.\n */\n\n/**\n * @type {Postcss|undefined} postcss - The discovered PostCSS function.\n * @type {AcceptedPlugin|undefined} autoprefixer - The discovered Autoprefixer function.\n */\nlet postcss, autoprefixer;\n\ntry {\n postcss = await import('postcss');\n postcss = postcss.default;\n\n autoprefixer = await import('autoprefixer');\n autoprefixer = autoprefixer.default;\n} catch (err) {\n // do nothing\n}\n\n/**\n * @type {boolean} Whether PostCSS was discovered (TRUE) or not (FALSE).\n */\nconst supportsPostCSS = (typeof postcss === 'function');\n\n/**\n * @type {PluginList} A list of supported plugins.\n */\nconst pluginsList = [\n autoprefixer,\n];\n\n/**\n * @type {PluginMap} A map of supported plugins.\n */\nconst pluginsMap = {\n 'autoprefixer': autoprefixer,\n};\n\n/**\n * Attempts to create a PostCSS Processor with the given plugins and options.\n *\n * @param {PluginCollection} pluginsListOrMap - A list or map of plugins.\n * If a map of plugins, the plugin name looks up `options`.\n * @param {PostCSSOptions} options - The PostCSS wrapper options.\n *\n * @returns {Processor|null}\n */\nfunction createProcessor(pluginsListOrMap, options)\n{\n if (!postcss) {\n return null;\n }\n\n const plugins = parsePlugins(pluginsListOrMap, options);\n\n return postcss(plugins);\n}\n\n/**\n * Parses the PostCSS plugins and options.\n *\n * @param {PluginCollection} pluginsListOrMap - A list or map of plugins.\n * If a map of plugins, the plugin name looks up `options`.\n * @param {PostCSSOptions} options - The PostCSS wrapper options.\n *\n * @returns {PluginList}\n */\nfunction parsePlugins(pluginsListOrMap, options)\n{\n if (Array.isArray(pluginsListOrMap)) {\n return pluginsListOrMap;\n }\n\n /** @type {PluginList} */\n const plugins = [];\n\n for (let [ name, plugin ] of Object.entries(pluginsListOrMap)) {\n if (name in options) {\n plugin = plugin[name](options[name]);\n }\n\n plugins.push(plugin);\n }\n\n return plugins;\n}\n\nexport default postcss;\n\nexport {\n autoprefixer,\n createProcessor,\n parsePlugins,\n pluginsList,\n pluginsMap,\n postcss,\n supportsPostCSS,\n};\n"
},
{
"path": "packages/landing/build/helpers/template.js",
"content": "/**\n * @file Provides simple template tags.\n */\n\nimport loconfig from './config.js';\nimport {\n escapeRegExp,\n flatten\n} from '../utils/index.js';\n\nconst templateData = flatten({\n paths: loconfig.paths\n});\n\n/**\n * Replaces all template tags from a map of keys and values.\n *\n * If replacement pairs contain a mix of substrings, regular expressions,\n * and functions, regular expressions are executed last.\n *\n * @param {*} input - The value being searched and replaced on.\n * If input is, or contains, a string, tags will be resolved.\n * If input is, or contains, an object, it is mutated directly.\n * If input is, or contains, an array, a shallow copy is returned.\n * Otherwise, the value is left intact.\n * @param {object} [data] - An object in the form `{ 'from': 'to', … }`.\n * @return {*} Returns the transformed value.\n */\nfunction resolve(input, data = templateData) {\n switch (typeof input) {\n case 'string': {\n return resolveValue(input, data);\n }\n\n case 'object': {\n if (input == null) {\n break;\n }\n\n if (Array.isArray(input)) {\n return input.map((value) => resolve(value, data));\n } else {\n for (const key in input) {\n input[key] = resolve(input[key], data);\n }\n }\n }\n }\n\n return input;\n}\n\n/**\n * Replaces all template tags in a string from a map of keys and values.\n *\n * If replacement pairs contain a mix of substrings, regular expressions,\n * and functions, regular expressions are executed last.\n *\n * @param {string} input - The string being searched and replaced on.\n * @param {object} [data] - An object in the form `{ 'from': 'to', … }`.\n * @return {string} Returns the translated string.\n */\nfunction resolveValue(input, data = templateData) {\n const tags = [];\n\n if (data !== templateData) {\n data = flatten(data);\n }\n\n for (let tag in data) {\n tags.push(escapeRegExp(tag));\n }\n\n if (tags.length === 0) {\n return input;\n }\n\n const search = new RegExp('\\\\{%\\\\s*(' + tags.join('|') + ')\\\\s*%\\\\}', 'g');\n return input.replace(search, (match, key) => {\n let value = data[key];\n\n switch (typeof value) {\n case 'function':\n /**\n * Retrieve the offset of the matched substring `args[0]`\n * and the whole string being examined `args[1]`.\n */\n let args = Array.prototype.slice.call(arguments, -2);\n return value.call(data, match, args[0], args[1]);\n\n case 'string':\n case 'number':\n return value;\n }\n\n return '';\n });\n}\n\nexport default resolve;\n\nexport {\n resolve,\n resolveValue,\n};\n"
},
{
"path": "packages/landing/build/migrate_imports.js",
"content": "\nimport fs from 'fs';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst files = [\n 'generic/_generic.scss',\n 'generic/_media.scss',\n 'generic/_button.scss',\n 'elements/_document.scss',\n 'objects/_container.scss',\n 'objects/_icons.scss',\n 'objects/_grid.scss',\n 'components/_heading.scss',\n 'components/_text.scss',\n 'components/_button.scss',\n 'components/_form.scss',\n 'components/_header.scss',\n 'components/_hero.scss',\n 'components/_rail.scss',\n 'components/_cascade.scss',\n 'components/_section-heading.scss',\n 'components/_tool.scss',\n 'components/_features-grid.scss',\n 'components/_sticky-heading.scss',\n 'components/_list.scss',\n 'components/_footer.scss',\n 'components/_fadeInText.scss',\n 'components/_preloader.scss',\n 'utilities/_grid-column.scss',\n 'utilities/_theme.scss',\n 'utilities/_helpers.scss',\n 'utilities/_spacing.scss'\n];\n\nconst basePath = '/Users/arnvvd/Projects/locomotive-scroll/packages/landing/assets/styles';\n\nfiles.forEach(file => {\n const filePath = path.join(basePath, file);\n if (fs.existsSync(filePath)) {\n let content = fs.readFileSync(filePath, 'utf8');\n \n // Check if already has @use\n if (content.includes('@use \"../core\"')) {\n console.log(`Skipping ${file}, already has @use`);\n return;\n }\n\n // Try to find the header block\n const headerRegex = /^(\\/\\/ =+[\\r\\n]+(?:\\/\\/.*[\\r\\n]+)*\\/\\/ =+[\\r\\n]+)/;\n const match = content.match(headerRegex);\n\n if (match) {\n // Insert after header\n const header = match[1];\n const newContent = content.replace(header, header + '\\n@use \"../core\" as *;\\n');\n fs.writeFileSync(filePath, newContent, 'utf8');\n console.log(`Updated ${file}`);\n } else {\n // Prepend to top\n const newContent = '@use \"../core\" as *;\\n\\n' + content;\n fs.writeFileSync(filePath, newContent, 'utf8');\n console.log(`Updated ${file} (prepended)`);\n }\n } else {\n console.error(`File not found: ${filePath}`);\n }\n});\n"
},
{
"path": "packages/landing/build/tasks/concats.js",
"content": "import loconfig from '../helpers/config.js';\nimport glob, { supportsGlob } from '../helpers/glob.js';\nimport message from '../helpers/message.js';\nimport notification from '../helpers/notification.js';\nimport resolve from '../helpers/template.js';\nimport { merge } from '../utils/index.js';\nimport concat from 'concat';\nimport {\n basename,\n normalize,\n} from 'node:path';\n\n/**\n * @const {object} defaultGlobOptions - The default shared glob options.\n * @const {object} developmentGlobOptions - The predefined glob options for development.\n * @const {object} productionGlobOptions - The predefined glob options for production.\n */\nexport const defaultGlobOptions = {\n};\nexport const developmentGlobOptions = Object.assign({}, defaultGlobOptions);\nexport const productionGlobOptions = Object.assign({}, defaultGlobOptions);\n\n/**\n * @typedef {object} ConcatOptions\n * @property {boolean} removeDuplicates - Removes duplicate paths from\n * the array of matching files and folders.\n * Only the first occurrence of each path is kept.\n */\n\n/**\n * @const {ConcatOptions} defaultConcatOptions - The default shared concatenation options.\n * @const {ConcatOptions} developmentConcatOptions - The predefined concatenation options for development.\n * @const {ConcatOptions} productionConcatOptions - The predefined concatenation options for production.\n */\nexport const defaultConcatOptions = {\n removeDuplicates: true,\n};\nexport const developmentConcatOptions = Object.assign({}, defaultConcatOptions);\nexport const productionConcatOptions = Object.assign({}, defaultConcatOptions);\n\n/**\n * @const {object} developmentConcatFilesArgs - The predefined `concatFiles()` options for development.\n * @const {object} productionConcatFilesArgs - The predefined `concatFiles()` options for production.\n */\nexport const developmentConcatFilesArgs = [\n developmentGlobOptions,\n developmentConcatOptions,\n];\nexport const productionConcatFilesArgs = [\n productionGlobOptions,\n productionConcatOptions,\n];\n\n/**\n * Concatenates groups of files.\n *\n * @todo Add support for minification.\n *\n * @async\n * @param {object|boolean} [globOptions=null] - Customize the glob options.\n * If `null`, default production options are used.\n * If `false`, the glob function will be ignored.\n * @param {object} [concatOptions=null] - Customize the concatenation options.\n * If `null`, default production options are used.\n * @return {Promise}\n */\nexport default async function concatFiles(globOptions = null, concatOptions = null) {\n if (supportsGlob) {\n if (globOptions == null) {\n globOptions = productionGlobOptions;\n } else if (\n globOptions !== false &&\n globOptions !== developmentGlobOptions &&\n globOptions !== productionGlobOptions\n ) {\n globOptions = merge({}, defaultGlobOptions, globOptions);\n }\n }\n\n if (concatOptions == null) {\n concatOptions = productionConcatOptions;\n } else if (\n concatOptions !== developmentConcatOptions &&\n concatOptions !== productionConcatOptions\n ) {\n concatOptions = merge({}, defaultConcatOptions, concatOptions);\n }\n\n /**\n * @async\n * @param {object} entry - The entrypoint to process.\n * @param {string[]} entry.includes - One or more paths to process.\n * @param {string} entry.outfile - The file to write to.\n * @param {?string} [entry.label] - The task label.\n * Defaults to the outfile name.\n * @return {Promise}\n */\n loconfig.tasks.concats?.forEach(async ({\n includes,\n outfile,\n label = null\n }) => {\n if (!label) {\n label = basename(outfile || 'undefined');\n }\n\n const timeLabel = `${label} concatenated in`;\n console.time(timeLabel);\n\n try {\n if (!Array.isArray(includes)) {\n includes = [ includes ];\n }\n\n includes = resolve(includes);\n outfile = resolve(outfile);\n\n if (supportsGlob && globOptions) {\n includes = await glob(includes, globOptions);\n }\n\n if (concatOptions.removeDuplicates) {\n includes = includes.map((path) => normalize(path));\n includes = [ ...new Set(includes) ];\n }\n\n await concat(includes, outfile);\n\n if (includes.length) {\n message(`${label} concatenated`, 'success', timeLabel);\n } else {\n message(`${label} is empty`, 'notice', timeLabel);\n }\n } catch (err) {\n message(`Error concatenating ${label}`, 'error');\n message(err);\n\n notification({\n title: `${label} concatenation failed 🚨`,\n message: `${err.name}: ${err.message}`\n });\n }\n });\n};\n"
},
{
"path": "packages/landing/build/tasks/eleventy.js",
"content": "import message from '../helpers/message.js';\nimport { merge } from '../utils/index.js';\nimport Eleventy from \"@11ty/eleventy\";\n\nexport const defaultEleventyOptions = {\n production: true\n}\n\nexport const developmentEleventyOptions = {\n production: false\n}\n\nexport const productionEleventyOptions = {\n production: true\n}\n\nlet elev;\nexport default async function buildEleventy(eleventyOptions = null) {\n if (eleventyOptions == null) {\n eleventyOptions = productionEleventyOptions;\n } else if (\n eleventyOptions !== developmentEleventyOptions &&\n eleventyOptions !== productionEleventyOptions\n ) {\n eleventyOptions = merge({}, defaultEleventyOptions, eleventyOptions);\n }\n\n const { production } = eleventyOptions;\n const timeLabel = `11ty compiled in`;\n console.time(timeLabel);\n\n try {\n\n if(!elev) {\n elev = new Eleventy();\n\n if(!production) {\n await elev.watch();\n }\n }\n\n // Disable caching to ensure a fresh build each time\n await elev.write();\n\n message(`11ty compiled`, 'success', timeLabel);\n } catch(err) {\n console.error(err)\n message(err, 'error', timeLabel);\n }\n}\n"
},
{
"path": "packages/landing/build/tasks/scripts.js",
"content": "import loconfig from '../helpers/config.js';\nimport message from '../helpers/message.js';\nimport notification from '../helpers/notification.js';\nimport resolve from '../helpers/template.js';\nimport { merge } from '../utils/index.js';\nimport esbuild from 'esbuild';\nimport { basename } from 'node:path';\n\n/**\n * @const {object} defaultESBuildOptions - The default shared ESBuild options.\n * @const {object} developmentESBuildOptions - The predefined ESBuild options for development.\n * @const {object} productionESBuildOptions - The predefined ESBuild options for production.\n */\nexport const defaultESBuildOptions = {\n bundle: true,\n color: true,\n sourcemap: true,\n target: [\n 'es2015',\n ],\n};\nexport const developmentESBuildOptions = Object.assign({}, defaultESBuildOptions);\nexport const productionESBuildOptions = Object.assign({}, defaultESBuildOptions, {\n logLevel: 'warning',\n minify: true,\n});\n\n/**\n * @const {object} developmentScriptsArgs - The predefined `compileScripts()` options for development.\n * @const {object} productionScriptsArgs - The predefined `compileScripts()` options for production.\n */\nexport const developmentScriptsArgs = [\n developmentESBuildOptions,\n];\nexport const productionScriptsArgs = [\n productionESBuildOptions,\n];\n\n/**\n * Bundles and minifies main JavaScript files.\n *\n * @async\n * @param {object} [esBuildOptions=null] - Customize the ESBuild build API options.\n * If `null`, default production options are used.\n * @return {Promise}\n */\nexport default async function compileScripts(esBuildOptions = null) {\n if (esBuildOptions == null) {\n esBuildOptions = productionESBuildOptions;\n } else if (\n esBuildOptions !== developmentESBuildOptions &&\n esBuildOptions !== productionESBuildOptions\n ) {\n esBuildOptions = merge({}, defaultESBuildOptions, esBuildOptions);\n }\n\n /**\n * @async\n * @param {object} entry - The entrypoint to process.\n * @param {string[]} entry.includes - One or more paths to process.\n * @param {string} [entry.outdir] - The directory to write to.\n * @param {string} [entry.outfile] - The file to write to.\n * @param {?string} [entry.label] - The task label.\n * Defaults to the outdir or outfile name.\n * @throws {TypeError} If outdir and outfile are missing.\n * @return {Promise}\n */\n loconfig.tasks.scripts?.forEach(async ({\n includes,\n outdir = '',\n outfile = '',\n label = null\n }) => {\n if (!label) {\n label = basename(outdir || outfile || 'undefined');\n }\n\n const timeLabel = `${label} compiled in`;\n console.time(timeLabel);\n\n try {\n if (!Array.isArray(includes)) {\n includes = [ includes ];\n }\n\n includes = resolve(includes);\n\n if (outdir) {\n outdir = resolve(outdir);\n } else if (outfile) {\n outfile = resolve(outfile);\n } else {\n throw new TypeError(\n 'Expected \\'outdir\\' or \\'outfile\\''\n );\n }\n\n await esbuild.build(Object.assign({}, esBuildOptions, {\n entryPoints: includes,\n outdir,\n outfile,\n }));\n\n message(`${label} compiled`, 'success', timeLabel);\n } catch (err) {\n // errors managments (already done in esbuild)\n notification({\n title: `${label} compilation failed 🚨`,\n message: `${err.errors[0].text} in ${err.errors[0].location.file} line ${err.errors[0].location.line}`\n });\n }\n });\n};\n"
},
{
"path": "packages/landing/build/tasks/styles.js",
"content": "import loconfig from '../helpers/config.js';\nimport message from '../helpers/message.js';\nimport notification from '../helpers/notification.js';\nimport {\n createProcessor,\n pluginsMap as postcssPluginsMap,\n supportsPostCSS\n} from '../helpers/postcss.js';\nimport resolve from '../helpers/template.js';\nimport { merge } from '../utils/index.js';\nimport { writeFile } from 'node:fs/promises';\nimport { basename } from 'node:path';\nimport { promisify } from 'node:util';\nimport * as sass from 'sass';\nimport { PurgeCSS } from 'purgecss';\n\nconst sassRender = promisify(sass.render);\n\nlet postcssProcessor;\n\n/**\n * @const {object} defaultSassOptions - The default shared Sass options.\n * @const {object} developmentSassOptions - The predefined Sass options for development.\n * @const {object} productionSassOptions - The predefined Sass options for production.\n */\nexport const defaultSassOptions = {\n omitSourceMapUrl: true,\n sourceMap: true,\n sourceMapContents: true,\n};\n\nexport const developmentSassOptions = Object.assign({}, defaultSassOptions, {\n outputStyle: 'expanded',\n});\nexport const productionSassOptions = Object.assign({}, defaultSassOptions, {\n outputStyle: 'compressed',\n});\n\n/**\n * @const {object} defaultPostCSSOptions - The default shared PostCSS options.\n * @const {object} developmentPostCSSOptions - The predefined PostCSS options for development.\n * @const {object} productionPostCSSOptions - The predefined PostCSS options for production.\n */\nexport const defaultPostCSSOptions = {\n processor: {\n map: {\n annotation: false,\n inline: false,\n sourcesContent: true,\n },\n },\n};\nexport const developmentPostCSSOptions = Object.assign({}, defaultPostCSSOptions);\nexport const productionPostCSSOptions = Object.assign({}, defaultPostCSSOptions);\n\n/**\n * @const {object|boolean} developmentStylesArgs - The predefined `compileStyles()` options for development.\n * @const {object|boolean} productionStylesArgs - The predefined `compileStyles()` options for production.\n */\nexport const developmentStylesArgs = [\n developmentSassOptions,\n developmentPostCSSOptions,\n false\n];\nexport const productionStylesArgs = [\n productionSassOptions,\n productionPostCSSOptions,\n true\n];\n\n/**\n * Compiles and minifies main Sass files to CSS.\n *\n * @todo Add deep merge of `postcssOptions` to better support customization\n * of default processor options.\n *\n * @async\n * @param {object} [sassOptions=null] - Customize the Sass render API options.\n * If `null`, default production options are used.\n * @param {object|boolean} [postcssOptions=null] - Customize the PostCSS processor API options.\n * If `null`, default production options are used.\n * If `false`, PostCSS processing will be ignored.\n * @return {Promise}\n */\nexport default async function compileStyles(sassOptions = null, postcssOptions = null, purge = true) {\n if (sassOptions == null) {\n sassOptions = productionSassOptions;\n } else if (\n sassOptions !== developmentSassOptions &&\n sassOptions !== productionSassOptions\n ) {\n sassOptions = merge({}, defaultSassOptions, sassOptions);\n }\n\n if (supportsPostCSS) {\n if (postcssOptions == null) {\n postcssOptions = productionPostCSSOptions;\n } else if (\n postcssOptions !== false &&\n postcssOptions !== developmentPostCSSOptions &&\n postcssOptions !== productionPostCSSOptions\n ) {\n postcssOptions = merge({}, defaultPostCSSOptions, postcssOptions);\n }\n }\n\n /**\n * @async\n * @param {object} entry - The entrypoint to process.\n * @param {string[]} entry.infile - The file to process.\n * @param {string} entry.outfile - The file to write to.\n * @param {?string} [entry.label] - The task label.\n * Defaults to the outfile name.\n * @return {Promise}\n */\n loconfig.tasks.styles?.forEach(async ({\n infile,\n outfile,\n label = null\n }) => {\n const filestem = basename((outfile || 'undefined'), '.css');\n\n const timeLabel = `${label || `${filestem}.css`} compiled in`;\n console.time(timeLabel);\n\n try {\n infile = resolve(infile);\n outfile = resolve(outfile);\n\n let result = await sassRender(Object.assign({}, sassOptions, {\n file: infile,\n outFile: outfile,\n }));\n\n if (supportsPostCSS && postcssOptions) {\n if (typeof postcssProcessor === 'undefined') {\n postcssProcessor = createProcessor(\n postcssPluginsMap,\n postcssOptions\n );\n }\n\n result = await postcssProcessor.process(\n result.css,\n Object.assign({}, postcssOptions.processor, {\n from: outfile,\n to: outfile,\n })\n );\n\n if (result.warnings) {\n const warnings = result.warnings();\n if (warnings.length) {\n message(`Error processing ${label || `${filestem}.css`}`, 'warning');\n warnings.forEach((warn) => {\n message(warn.toString());\n });\n }\n }\n }\n\n try {\n await writeFile(outfile, result.css).then(() => {\n // Purge CSS once file exists.\n if (outfile && purge) {\n purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);\n }\n });\n\n if (result.css) {\n message(`${label || `${filestem}.css`} compiled`, 'success', timeLabel);\n } else {\n message(`${label || `${filestem}.css`} is empty`, 'notice', timeLabel);\n }\n } catch (err) {\n message(`Error compiling ${label || `${filestem}.css`}`, 'error');\n message(err);\n\n notification({\n title: `${label || `${filestem}.css`} save failed 🚨`,\n message: `Could not save stylesheet to ${label || `${filestem}.css`}`\n });\n }\n\n if (result.map) {\n try {\n await writeFile(outfile + '.map', result.map.toString());\n } catch (err) {\n message(`Error compiling ${label || `${filestem}.css.map`}`, 'error');\n message(err);\n\n notification({\n title: `${label || `${filestem}.css.map`} save failed 🚨`,\n message: `Could not save sourcemap to ${label || `${filestem}.css.map`}`\n });\n }\n }\n } catch (err) {\n message(`Error compiling ${label || `${filestem}.scss`}`, 'error');\n message(err.formatted || err);\n\n notification({\n title: `${label || `${filestem}.scss`} compilation failed 🚨`,\n message: (err.formatted || `${err.name}: ${err.message}`)\n });\n }\n });\n};\n\n/**\n * Purge unused styles from CSS files.\n *\n * @async\n *\n * @param {string} outfile - The path of a css file\n * If missing the function stops.\n * @param {string} label - The CSS file label or name.\n * @return {Promise}\n */\nasync function purgeUnusedCSS(outfile, label) {\n const contentFiles = loconfig.tasks.purgeCSS?.content;\n if (!Array.isArray(contentFiles) || !contentFiles.length) {\n return;\n }\n\n label = label ?? basename(outfile);\n\n const timeLabel = `${label} purged in`;\n console.time(timeLabel);\n\n const purgeCSSResults = await (new PurgeCSS()).purge({\n content: contentFiles,\n css: [ outfile ],\n defaultExtractor: content => content.match(/[a-z0-9_\\-\\\\\\/\\@]+/gi) || [],\n fontFaces: true,\n keyframes: true,\n safelist: {\n // Keep all except .u-gc-* | .u-margin-* | .u-padding-*\n standard: [ /^(?!.*\\b(u-gc-|u-margin|u-padding)).*$/ ],\n // Preserve CSS variables and their content in these selectors\n deep: [ /fadeInText/ ]\n },\n // Disable variable purging to preserve all CSS custom properties\n variables: false,\n })\n\n for (let result of purgeCSSResults) {\n await writeFile(outfile, result.css)\n\n message(`${label} purged`, 'chore', timeLabel);\n }\n}\n"
},
{
"path": "packages/landing/build/tasks/svgs.js",
"content": "import loconfig from '../helpers/config.js';\nimport message from '../helpers/message.js';\nimport notification from '../helpers/notification.js';\nimport resolve from '../helpers/template.js';\nimport { merge } from '../utils/index.js';\nimport { basename } from 'node:path';\nimport mixer from 'svg-mixer';\n\n/**\n * @const {object} defaultMixerOptions - The default shared Mixer options.\n * @const {object} developmentMixerOptions - The predefined Mixer options for development.\n * @const {object} productionMixerOptions - The predefined Mixer options for production.\n */\nexport const defaultMixerOptions = {\n spriteConfig: {\n usages: false,\n },\n};\nexport const developmentMixerOptions = Object.assign({}, defaultMixerOptions);\nexport const productionMixerOptions = Object.assign({}, defaultMixerOptions);\n\n/**\n * @const {object} developmentSVGsArgs - The predefined `compileSVGs()` options for development.\n * @const {object} productionSVGsArgs - The predefined `compileSVGs()` options for production.\n */\nexport const developmentSVGsArgs = [\n developmentMixerOptions,\n];\nexport const productionSVGsArgs = [\n productionMixerOptions,\n];\n\n/**\n * Generates and transforms SVG spritesheets.\n *\n * @async\n * @param {object} [mixerOptions=null] - Customize the Mixer API options.\n * If `null`, default production options are used.\n * @return {Promise}\n */\nexport default async function compileSVGs(mixerOptions = null) {\n if (mixerOptions == null) {\n mixerOptions = productionMixerOptions;\n } else if (\n mixerOptions !== developmentMixerOptions &&\n mixerOptions !== productionMixerOptions\n ) {\n mixerOptions = merge({}, defaultMixerOptions, mixerOptions);\n }\n\n /**\n * @async\n * @param {object} entry - The entrypoint to process.\n * @param {string[]} entry.includes - One or more paths to process.\n * @param {string} entry.outfile - The file to write to.\n * @param {?string} [entry.label] - The task label.\n * Defaults to the outfile name.\n * @return {Promise}\n */\n loconfig.tasks.svgs?.forEach(async ({\n includes,\n outfile,\n label = null\n }) => {\n if (!label) {\n label = basename(outfile || 'undefined');\n }\n\n const timeLabel = `${label} compiled in`;\n console.time(timeLabel);\n\n try {\n if (!Array.isArray(includes)) {\n includes = [ includes ];\n }\n\n includes = resolve(includes);\n outfile = resolve(outfile);\n\n const result = await mixer(includes, mixerOptions);\n\n await result.write(outfile);\n\n message(`${label} compiled`, 'success', timeLabel);\n } catch (err) {\n message(`Error compiling ${label}`, 'error');\n message(err);\n\n notification({\n title: `${label} compilation failed 🚨`,\n message: `${err.name}: ${err.message}`\n });\n }\n });\n};\n"
},
{
"path": "packages/landing/build/tasks/versions.js",
"content": "import loconfig from '../helpers/config.js';\nimport message from '../helpers/message.js';\nimport resolve from '../helpers/template.js';\nimport { merge } from '../utils/index.js';\nimport { randomBytes } from 'node:crypto';\nimport events from 'node:events';\nimport {\n createReadStream,\n createWriteStream,\n} from 'node:fs';\nimport {\n mkdir,\n rename,\n rm,\n readFile,\n writeFile,\n} from 'node:fs/promises';\nimport {\n basename,\n dirname,\n} from 'node:path';\nimport readline from 'node:readline';\n\nexport const REGEXP_SEMVER = /^(?0|[1-9]\\d*)\\.(?0|[1-9]\\d*)\\.(?0|[1-9]\\d*)(?:-(?(?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\\.(?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\\+(?[0-9a-zA-Z-]+(?:\\.[0-9a-zA-Z-]+)*))?$/;\n\n/**\n * @typedef {object} VersionOptions\n * @property {string|number|null} prettyPrint - A string or number to insert\n * white space into the output JSON string for readability purposes.\n * @property {string} versionFormat - The version number format.\n * @property {string|RegExp} versionKey - Either:\n * - A string representing the JSON field name assign the version number to.\n *\n * Explicit:\n *\n * ```json\n * \"key\": \"json:version\"\n * ```\n *\n * Implicit:\n *\n * ```json\n * \"key\": \"version\"\n * ```\n *\n * - A `RegExp` object or regular expression string prefixed with `regexp:`.\n *\n * ```json\n * \"key\": \"regexp:(?<=^const ASSETS_VERSION = ')(?\\\\d+)(?=';$)\"\n * ```\n *\n * ```js\n * key: new RegExp('(?<=^const ASSETS_VERSION = ')(?\\\\d+)(?=';$)')\n * ```\n *\n * ```js\n * key: /(?<=^const ASSETS_VERSION = ')(?\\d+)(?=';$)/\n * ```\n */\n\n/**\n * @const {VersionOptions} defaultVersionOptions - The default shared version options.\n * @const {VersionOptions} developmentVersionOptions - The predefined version options for development.\n * @const {VersionOptions} productionVersionOptions - The predefined version options for production.\n */\nexport const defaultVersionOptions = {\n prettyPrint: 4,\n versionFormat: 'timestamp',\n versionKey: 'version',\n};\nexport const developmentVersionOptions = Object.assign({}, defaultVersionOptions);\nexport const productionVersionOptions = Object.assign({}, defaultVersionOptions);\n\n/**\n * @const {object} developmentVersionFilesArgs - The predefined `bumpVersion()` options for development.\n * @const {object} productionVersionFilesArgs - The predefined `bumpVersion()` options for production.\n */\nexport const developmentVersionFilesArgs = [\n developmentVersionOptions,\n];\nexport const productionVersionFilesArgs = [\n productionVersionOptions,\n];\n\n/**\n * Bumps version numbers in file.\n *\n * @async\n * @param {object} [versionOptions=null] - Customize the version options.\n * If `null`, default production options are used.\n * @return {Promise}\n */\nexport default async function bumpVersions(versionOptions = null) {\n if (versionOptions == null) {\n versionOptions = productionVersionOptions;\n } else if (\n versionOptions !== developmentVersionOptions &&\n versionOptions !== productionVersionOptions\n ) {\n versionOptions = merge({}, defaultVersionOptions, versionOptions);\n }\n\n const queue = new Map();\n\n /**\n * @async\n * @param {object} entry - The entrypoint to process.\n * @param {string} entry.outfile - The file to write to.\n * @param {?string} [entry.label] - The task label.\n * Defaults to the outfile name.\n * @param {?string} [entry.format] - The version number format.\n * @param {?string} [entry.key] - The JSON field name assign the version number to.\n * @param {?string|number} [entry.pretty] - The white space to use to format the JSON file.\n * @return {Promise}\n */\n loconfig.tasks.versions?.forEach(({\n outfile,\n label = null,\n ...options\n }) => {\n if (!label) {\n label = basename(outfile || 'undefined');\n }\n\n options.pretty = (options.pretty ?? versionOptions.prettyPrint);\n options.format = (options.format ?? versionOptions.versionFormat);\n options.key = (options.key ?? versionOptions.versionKey);\n\n if (queue.has(outfile)) {\n queue.get(outfile).then(() => handleBumpVersion(outfile, label, options));\n } else {\n queue.set(outfile, handleBumpVersion(outfile, label, options));\n }\n });\n};\n\n/**\n * Creates a formatted version number or string.\n *\n * @param {string} format - The version format.\n * @param {?string} [oldValue] - The old version value.\n * @return {string|number}\n * @throws TypeError If the format or value are invalid.\n */\nfunction createVersionNumber(format, oldValue = null) {\n let [ type, modifier ] = format.split(':', 2);\n\n switch (type) {\n case 'hex':\n case 'hexadecimal':\n try {\n modifier = Number.parseInt(modifier);\n\n if (Number.isNaN(modifier)) {\n modifier = 6;\n }\n\n return randomBytes(modifier).toString('hex');\n } catch (err) {\n throw new TypeError(\n `${err.message} for \\'format\\' type \"hexadecimal\"`,\n { cause: err }\n );\n }\n\n case 'inc':\n case 'increment':\n try {\n if (modifier === 'semver') {\n return incrementSemVer(oldValue, [ 'buildmetadata', 'patch' ]);\n }\n\n return incrementNumber(oldValue, modifier);\n } catch (err) {\n throw new TypeError(\n `${err.message} for \\'format\\' type \"increment\"`,\n { cause: err }\n );\n }\n\n case 'regex':\n case 'regexp':\n try {\n return new RegExp(modifier);\n } catch (err) {\n throw new TypeError(\n `${err.message} for \\'format\\' type \"regexp\"`,\n { cause: err }\n );\n }\n\n case 'timestamp':\n return Date.now().valueOf();\n }\n\n throw new TypeError(\n 'Expected \\'format\\' to be either \"timestamp\", \"increment\", or \"hexadecimal\"'\n );\n}\n\n/**\n * @async\n * @param {string} outfile\n * @param {string} label\n * @param {object} options\n * @return {Promise}\n */\nasync function handleBumpVersion(outfile, label, options) {\n const timeLabel = `${label} bumped in`;\n console.time(timeLabel);\n\n try {\n options.key = parseVersionKey(options.key);\n\n if (options.key instanceof RegExp) {\n await handleBumpVersionWithRegExp(outfile, label, options);\n } else {\n await handleBumpVersionInJson(outfile, label, options);\n }\n\n message(`${label} bumped`, 'success', timeLabel);\n } catch (err) {\n message(`Error bumping ${label}`, 'error');\n message(err);\n\n notification({\n title: `${label} bumping failed 🚨`,\n message: `${err.name}: ${err.message}`\n });\n }\n}\n\n/**\n * Changes the version number for the provided JSON key in file.\n *\n * @async\n * @param {string} outfile\n * @param {string} label\n * @param {object} options\n * @param {string} options.key\n * @return {Promise}\n */\nasync function handleBumpVersionInJson(outfile, label, options) {\n outfile = resolve(outfile);\n\n let json;\n\n try {\n json = JSON.parse(await readFile(outfile, { encoding: 'utf8' }));\n } catch (err) {\n json = {};\n\n message(`${label} is a new file`, 'notice');\n\n await mkdir(dirname(outfile), { recursive: true });\n }\n\n json[options.key] = createVersionNumber(options.format, json?.[options.key]);\n\n return await writeFile(\n outfile,\n JSON.stringify(json, null, options.pretty),\n { encoding: 'utf8' }\n );\n}\n\n/**\n * Changes the version number for the provided RegExp in file.\n *\n * @async\n * @param {string} outfile\n * @param {string} label\n * @param {object} options\n * @param {RegExp} options.key\n * @return {Promise}\n */\nasync function handleBumpVersionWithRegExp(outfile, label, options) {\n outfile = resolve(outfile);\n\n const bckfile = `${outfile}~`;\n\n await rename(outfile, bckfile);\n\n try {\n const rl = readline.createInterface({\n input: createReadStream(bckfile),\n });\n\n let newVersion = null;\n\n const writeStream = createWriteStream(outfile, { encoding: 'utf8' });\n\n rl.on('line', (line) => {\n const found = line.match(options.key);\n\n if (found) {\n const groups = (found.groups ?? {});\n const oldVersion = (groups.build ?? groups.version ?? found[1] ?? found[0]);\n const newVersion = createVersionNumber(options.format, oldVersion);\n const replacement = found[0].replace(oldVersion, newVersion);\n\n line = line.replace(found[0], replacement);\n }\n\n writeStream.write(line + \"\\n\");\n });\n\n await events.once(rl, 'close');\n\n await rm(bckfile);\n } catch (err) {\n await rm(outfile, { force: true });\n\n await rename(bckfile, outfile);\n\n throw err;\n }\n}\n\n/**\n * Increments the given integer.\n *\n * @param {string|int} value - The number to increment.\n * @param {string|int} [increment=1] - The amount to increment by.\n * @return {int}\n * @throws TypeError If the version number is invalid.\n */\nfunction incrementNumber(value, increment = 1) {\n const version = Number.parseInt(value);\n if (Number.isNaN(version)) {\n throw new TypeError(\n `Expected an integer version number, received [${value}]`\n );\n }\n\n increment = Number.parseInt(increment);\n if (Number.isNaN(increment)) {\n throw new TypeError(\n 'Expected an integer increment number'\n );\n }\n\n return (version + increment);\n}\n\n/**\n * Increments the given SemVer version number.\n *\n * @param {string} value - The version to mutate.\n * @param {string|string[]} [target] - The segment to increment, one of:\n * 'major', 'minor', 'patch', ~~'prerelease'~~, 'buildmetadata'.\n * @param {string|int} [increment=1] - The amount to increment by.\n * @return {string}\n * @throws TypeError If the version or target are invalid.\n */\nfunction incrementSemVer(value, target = 'patch', increment = 1) {\n const found = value.match(REGEXP_SEMVER);\n if (!found) {\n throw new TypeError(\n `Expected a SemVer version number, received [${value}]`\n );\n }\n\n if (Array.isArray(target)) {\n for (const group of target) {\n if (found.groups[group] != null) {\n target = group;\n break;\n }\n }\n }\n\n if (!target || !found.groups[target]) {\n throw new TypeError(\n `Expected a supported SemVer segment, received [${target}]`\n );\n }\n\n const segments = {\n 'major': '',\n 'minor': '.',\n 'patch': '.',\n 'prerelease': '-',\n 'buildmetadata': '+',\n };\n\n let replacement = '';\n\n for (const [ segment, delimiter ] of Object.entries(segments)) {\n if (found.groups?.[segment] != null) {\n const newVersion = (segment === target)\n ? incrementNumber(found.groups[segment], increment)\n : found.groups[segment];\n\n replacement += `${delimiter}${newVersion}`;\n }\n }\n\n return value.replace(found[0], replacement);\n}\n\n/**\n * Parses the version key.\n *\n * @param {*} key - The version key.\n * @return {string|RegExp}\n */\nfunction parseVersionKey(key) {\n if (key instanceof RegExp) {\n return key;\n }\n\n if (typeof key !== 'string') {\n throw new TypeError(\n 'Expected \\'key\\' to be either a string or a RegExp'\n );\n }\n\n const delimiter = key.indexOf(':');\n\n if (delimiter === -1) {\n // Assumes its a JSON key\n return key;\n }\n\n const type = key.slice(0, delimiter);\n const value = key.slice(delimiter + 1);\n\n switch (type) {\n case 'json':\n return value;\n\n case 'regex':\n case 'regexp':\n return new RegExp(value);\n }\n\n throw new TypeError(\n 'Expected \\'key\\' type to be either \"json\" or \"regexp\"'\n );\n}\n"
},
{
"path": "packages/landing/build/utils/index.js",
"content": "/**\n * @file Provides generic functions and constants.\n */\n\n/**\n * @type {RegExp} - Match all special characters.\n */\nconst regexUnescaped = /[\\[\\]\\{\\}\\(\\)\\-\\*\\+\\?\\.\\,\\\\\\^\\$\\|\\#\\s]/g;\n\n/**\n * Quotes regular expression characters.\n *\n * @param {string} str - The input string.\n * @return {string} Returns the quoted (escaped) string.\n */\nfunction escapeRegExp(str) {\n return str.replace(regexUnescaped, '\\\\$&');\n}\n\n/**\n * Creates a new object with all nested object properties\n * concatenated into it recursively.\n *\n * Nested keys are flattened into a property path:\n *\n * ```js\n * {\n * a: {\n * b: {\n * c: 1\n * }\n * },\n * d: 1\n * }\n * ```\n *\n * ```js\n * {\n * \"a.b.c\": 1,\n * \"d\": 1\n * }\n * ```\n *\n * @param {object} input - The object to flatten.\n * @param {string} prefix - The parent key prefix.\n * @param {object} target - The object that will receive the flattened properties.\n * @return {object} Returns the `target` object.\n */\nfunction flatten(input, prefix, target = {}) {\n for (const key in input) {\n const field = (prefix ? prefix + '.' + key : key);\n\n if (isObjectLike(input[key])) {\n flatten(input[key], field, target);\n } else {\n target[field] = input[key];\n }\n }\n\n return target;\n}\n\n/**\n * Determines whether the passed value is an `Object`.\n *\n * @param {*} value - The value to be checked.\n * @return {boolean} Returns `true` if the value is an `Object`,\n * otherwise `false`.\n */\nfunction isObjectLike(value) {\n return (value != null && typeof value === 'object');\n}\n\n/**\n * Creates a new object with all nested object properties\n * merged into it recursively.\n *\n * @param {object} target - The target object.\n * @param {object[]} ...sources - The source object(s).\n * @throws {TypeError} If the target and source are the same.\n * @return {object} Returns the `target` object.\n */\nfunction merge(target, ...sources) {\n for (const source of sources) {\n if (target === source) {\n throw new TypeError(\n 'Cannot merge, target and source are the same'\n );\n }\n\n for (const key in source) {\n if (source[key] != null) {\n if (isObjectLike(source[key]) && isObjectLike(target[key])) {\n merge(target[key], source[key]);\n continue;\n } else if (Array.isArray(source[key]) && Array.isArray(target[key])) {\n target[key] = target[key].concat(source[key]);\n continue;\n }\n }\n\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nexport {\n escapeRegExp,\n flatten,\n isObjectLike,\n merge,\n regexUnescaped,\n};\n"
},
{
"path": "packages/landing/build/watch.js",
"content": "import concatFiles, { developmentConcatFilesArgs } from './tasks/concats.js';\nimport compileScripts, { developmentScriptsArgs } from './tasks/scripts.js';\nimport compileStyles, { developmentStylesArgs } from './tasks/styles.js' ;\nimport compileSVGs, { developmentSVGsArgs } from './tasks/svgs.js';\nimport buildEleventy, { developmentEleventyOptions } from './tasks/eleventy.js';\nimport loconfig from './helpers/config.js';\nimport message from './helpers/message.js';\nimport notification from './helpers/notification.js';\nimport resolve from './helpers/template.js';\nimport { merge } from './utils/index.js';\nimport browserSync from 'browser-sync';\nimport { join } from 'node:path';\n\n// Match a URL protocol.\nconst regexUrlStartsWithProtocol = /^[a-z0-9\\-]:\\/\\//i;\n\n// Build scripts, compile styles, concat files,\n// and generate spritesheets on first hit\nconcatFiles(...developmentConcatFilesArgs);\ncompileScripts(...developmentScriptsArgs);\ncompileStyles(...developmentStylesArgs);\ncompileSVGs(...developmentSVGsArgs);\nawait buildEleventy(developmentEleventyOptions);\n\n// Create a new BrowserSync instance\nconst server = browserSync.create();\n\n// Start the BrowserSync server\nserver.init(createServerOptions(loconfig), (err) => {\n if (err) {\n message('Error starting development server', 'error');\n message(err);\n\n notification({\n title: 'Development server failed',\n message: `${err.name}: ${err.message}`\n });\n }\n});\n\nconfigureServer(server, loconfig);\n\n/**\n * Configures the BrowserSync options.\n *\n * @param {BrowserSync} server - The BrowserSync API.\n * @param {object} loconfig - The project configset.\n * @param {object} loconfig.paths - The paths options.\n * @param {object} loconfig.tasks - The tasks options.\n * @return {void}\n */\nfunction configureServer(server, { paths, tasks }) {\n const views = createViewsArray(paths.views);\n\n // Reload on any changes to views or processed files\n server.watch(\n [\n join(paths.dest, '**/*')\n ]\n ).on('change', server.reload);\n\n // Watch source scripts\n server.watch(\n [\n join(paths.scripts.src, '**/*.js'),\n ]\n ).on('change', () => {\n compileScripts(...developmentScriptsArgs);\n });\n\n // Watch source concats\n if (tasks.concats?.length) {\n server.watch(\n resolve(\n tasks.concats.reduce(\n (patterns, { includes }) => patterns.concat(includes),\n []\n )\n )\n ).on('change', () => {\n concatFiles(...developmentConcatFilesArgs);\n });\n }\n\n // Watch source styles\n server.watch(\n [\n join(paths.styles.src, '**/*.scss'),\n ]\n ).on('change', () => {\n compileStyles(...developmentStylesArgs);\n });\n\n // Watch source SVGs\n server.watch(\n [\n join(paths.svgs.src, '*.svg'),\n ]\n ).on('change', () => {\n compileSVGs(...developmentSVGsArgs);\n });\n}\n\n/**\n * Creates a new object with all the BrowserSync options.\n *\n * @param {object} loconfig - The project configset.\n * @param {object} loconfig.paths - The paths options.\n * @param {object} loconfig.server - The server options.\n * @return {object} Returns the server options.\n */\nfunction createServerOptions({\n paths,\n server: options\n}) {\n const config = {\n open: false,\n notify: false,\n ghostMode: false\n };\n\n // Resolve the URL for the BrowserSync server\n if (isNonEmptyString(paths.url)) {\n // Use proxy\n config.proxy = paths.url;\n } else if (isNonEmptyString(paths.dest)) {\n // Use base directory\n config.server = {\n baseDir: paths.dest\n };\n }\n\n merge(config, resolve(options));\n\n // If HTTPS is enabled, prepend `https://` to proxy URL\n if (options?.https) {\n if (isNonEmptyString(config.proxy?.target)) {\n config.proxy.target = prependSchemeToUrl(config.proxy.target, 'https');\n } else if (isNonEmptyString(config.proxy)) {\n config.proxy = prependSchemeToUrl(config.proxy, 'https');\n }\n }\n\n return config;\n}\n\n/**\n * Creates a new array (shallow-copied) from the views configset.\n *\n * @param {*} views - The views configset.\n * @throws {TypeError} If views is invalid.\n * @return {array} Returns the views array.\n */\nfunction createViewsArray(views) {\n if (Array.isArray(views)) {\n return Array.from(views);\n }\n\n switch (typeof views) {\n case 'string':\n return [ views ];\n\n case 'object':\n if (views != null) {\n return Object.values(views);\n }\n }\n\n throw new TypeError(\n 'Expected \\'views\\' to be a string, array, or object'\n );\n}\n\n/**\n * Prepends the scheme to the URL.\n *\n * @param {string} url - The URL to mutate.\n * @param {string} [scheme] - The URL scheme to prepend.\n * @return {string} Returns the mutated URL.\n */\nfunction prependSchemeToUrl(url, scheme = 'http') {\n if (regexUrlStartsWithProtocol.test(url)) {\n return url.replace(regexUrlStartsWithProtocol, `${scheme}://`);\n }\n\n return `${scheme}://${url}`;\n}\n\n/**\n * Determines whether the passed value is a string with at least one character.\n *\n * @param {*} value - The value to be checked.\n * @return {boolean} Returns `true` if the value is a non-empty string,\n * otherwise `false`.\n */\nfunction isNonEmptyString(value) {\n return (typeof value === 'string' && value.length > 0);\n}\n"
},
{
"path": "packages/landing/data/features.json",
"content": "{\n \"title\": \"Features\",\n \"description\": \"Locomotive Scroll is a thin, opinionated wrapper around Lenis. You get all of Lenis's power plus our detection and animation layer.\",\n \"scrollbar\": {\n \"title\": \"Native scrollbar\",\n \"description\": \"Real browser scrollbar. No fake alternatives. Accessible, performant, and familiar to users.\"\n },\n \"normalized\": {\n \"title\": \"Smooth easing\",\n \"description\": \"Configurable lerp, duration, and custom easing functions thanks to Lenis options.\"\n },\n \"sticky\": {\n \"title\": \"CSS sticky\",\n \"description\": \"Works perfectly with position: sticky. No conflicts, no workarounds.\"\n },\n \"intersectionObserver\": {\n \"title\": \"Intersection Observer API\",\n \"description\": \"Browser-native detection. No polling, no performance hits, just efficient viewport tracking.\"\n },\n \"scrollTo\": {\n \"title\": \"Scroll to\",\n \"description\": \"Programmatic scrolling to any element, selector, or pixel value via Lenis. Supports offset, duration, and custom easing.\"\n },\n \"direction\": {\n \"title\": \"Scroll direction\",\n \"description\": \"Track direction changes in real-time thanks to Lenis. Perfect for hiding/showing headers or reversing animations.\"\n },\n \"layoutShifts\": {\n \"title\": \"No layout shifts\",\n \"description\": \"No more greedy CSS transforms breaking your layouts. Plays nice with position: sticky, fixed headers, and existing CSS.\"\n }\n}\n"
},
{
"path": "packages/landing/data/general.json",
"content": "{\n \"title\": \"Locomotive Scroll\",\n \"description\": \"A lightweight scroll library for modern web experiences. Detection, animation, and smooth scrolling — all in 9.4kB. Built on top of Lenis.\",\n \"github\": \"https://github.com/locomotivemtl/locomotive-scroll\",\n \"documentation\": \"https://scroll.locomotive.ca/docs\",\n \"website\": \"https://locomotive.ca\",\n \"version\": \"5.0\"\n}\n"
},
{
"path": "packages/landing/data/metadata.json",
"content": "{\n \"title\": \"Locomotive Scroll — Detection of elements in viewport & smooth scrolling with parallax effects\",\n \"description\": \"Locomotive Scroll is a lightweight JavaScript library that provides smooth scrolling animations and advanced scroll interactions for web applications.\",\n \"ogImage\": \"https://scroll.locomotive.ca/assets/images/og-image.png\",\n \"ogImageWidth\": \"1200\",\n \"ogImageHeight\": \"630\",\n \"url\": \"https://scroll.locomotive.ca\"\n}\n"
},
{
"path": "packages/landing/data/perks.json",
"content": "{\n \"bigText\": \"Version 5 is a complete rewrite. Designed for modern workflows, built on top of Lenis, and optimized for production.\",\n \"smallText\": \"This library has evolved considerably over the years. From jQuery to vanilla ES6, from custom engines to Lenis foundation.\",\n \"items\": [\n {\n \"title\": \"Built on top of Lenis\",\n \"description\": \"Latest stable release with improved touch handling and performance fixes. No more greedy CSS transforms!\"\n },\n {\n \"title\": \"TypeScript First\",\n \"description\": \"Fully typed. Better autocomplete, fewer bugs, happier developers.\"\n },\n {\n \"title\": \"Dual Intersection Observers\",\n \"description\": \"Separate observers for simple triggers vs. continuous animations. No wasted RAF cycles.\"\n },\n {\n \"title\": \"Smart Touch Detection\",\n \"description\": \"Parallax auto-disabled on mobile. Opt-in with one attribute.\"\n },\n {\n \"title\": \"Production Ready\",\n \"description\": \"Accessible by default. Native scrollbar, keyboard nav, and proper cleanup for SPAs.\"\n },\n {\n \"title\": \"Lightweight\",\n \"description\": \"Only 9.4kB gzipped\"\n }\n ]\n\n}\n"
},
{
"path": "packages/landing/data/showcase.json",
"content": "{\n \"title\": \"Showcase\",\n \"description\": \"Real projects built with Locomotive Scroll by leading studios and developers.\",\n \"items\": [\n {\n \"title\": \"Locomotive\",\n \"description\": \"https://locomotive.ca\",\n \"url\": \"https://locomotive.ca\"\n },\n {\n \"title\": \"Destigmatize\",\n \"description\": \"https://2024.destigmatize.ca/\",\n \"url\": \"https://2024.destigmatize.ca/\"\n },\n {\n \"title\": \"Scout Motors\",\n \"description\": \"https://scoutmotors.com/\",\n \"url\": \"https://scoutmotors.com/\"\n },\n {\n \"title\": \"Lightship\",\n \"description\": \"https://lightshiprv.com/\",\n \"url\": \"https://lightshiprv.com/\"\n },\n {\n \"title\": \"Vooban\",\n \"description\": \"https://vooban.com/\",\n \"url\": \"https://vooban.com/\"\n },\n {\n \"title\": \"Construction Desourdy\",\n \"description\": \"https://constructiondesourdy.com/\",\n \"url\": \"https://constructiondesourdy.com/\"\n },\n {\n \"title\": \"GKC\",\n \"description\": \"https://gkc.ca/\",\n \"url\": \"https://gkc.ca/\"\n },\n {\n \"title\": \"Troa\",\n \"description\": \"https://www.troa.fr/\",\n \"url\": \"https://www.troa.fr/\"\n },\n {\n \"title\": \"Vazzi\",\n \"description\": \"https://vazzi.fun/\",\n \"url\": \"https://vazzi.fun/\"\n },\n {\n \"title\": \"21TSI\",\n \"description\": \"https://21tsi.com/\",\n \"url\": \"https://21tsi.com/\"\n },\n {\n \"title\": \"Eduard Bodak\",\n \"description\": \"https://www.eduardbodak.com/\",\n \"url\": \"https://www.eduardbodak.com/\"\n },\n {\n \"title\": \"Mindmarket\",\n \"description\": \"https://mindmarket.com/\",\n \"url\": \"https://mindmarket.com/\"\n }\n ]\n}\n"
},
{
"path": "packages/landing/data/tools.json",
"content": "{\n \"inview\": {\n \"title\": \"In-view detection\",\n \"description\": \"Add classes, trigger callbacks, or fire custom events when elements enter the viewport. Built on Intersection Observer for native performance.\"\n },\n \"progress\": {\n \"title\": \"Progress tracking\",\n \"description\": \"Get real-time scroll progress (0-1) as CSS variables or JavaScript events. Perfect for progress bars, scroll-driven animations, or custom interactions.\"\n },\n \"parallax\": {\n \"title\": \"Parallax effects\",\n \"description\": \"Create smooth parallax effects instantly with a single data-scroll-speed attribute. No complex setup, no math, just add a number and it works.\"\n }\n}\n"
},
{
"path": "packages/landing/docs/development.md",
"content": "# Development\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Configuration](#configuration)\n * [Environment Configuration](#environment-configuration)\n * [Development Configuration](#development-configuration)\n * [`paths` option](#paths-option)\n * [`paths.url` option](#pathsurl-option)\n * [`paths.dest` option](#pathsdest-option)\n * [`tasks` option](#tasks-option)\n * [`server` option](#server-option)\n* [Tasks](#tasks)\n * [`concats`](#concats)\n * [`scripts`](#scripts)\n * [`styles`](#styles)\n * [`svgs`](#svgs)\n * [`versions`](#versions)\n\n---\n\nThe boilerplate provides a custom, easily configured, and very simple,\ntask runner for [Node] to process assets and test quickly in browsers.\n\nLearn more about the boilerplate's [tasks](#tasks) below.\n\n## Installation\n\nMake sure you have the following installed:\n\n* [Node] — at least 14.17, the latest LTS is recommended.\n* [NPM] — at least 8.0, the latest LTS is recommended.\n\n> 💡 You can use [NVM] to install and use different versions of Node via the command-line.\n\n```sh\n# Switch to recommended Node version from .nvmrc\nnvm use\n\n# Install dependencies from package.json\nnpm install\n```\n\n## Usage\n\n```sh\n# Start development server, watch for changes, and compile assets\nnpm start\n\n# Compile and minify assets\nnpm run build\n```\n\nSee [`build.js`](../build/build.js) and [`watch.js`](../build/watch.js)\nfor details.\n\n## Configuration\n\nFor development, most configuration values for processing front-end assets\nare defined in the [`loconfig.json`](../loconfig.json) file that exists at\nthe root directory of your project.\n\n### Environment Configuration\n\nIf any configuration options vary depending on whether your project is\nrunning on your computer, a collaborator's computer, or on a web server,\nthese values should be stored in a `loconfig.local.json` file.\n\nIn fresh copy of the boilerplate, the root directory of your project\nwill contain a [`loconfig.example.json`](../loconfig.example.json) file.\n\n> 💡 The boilerplate's default example customizes the development server\n> to use a custom SSL certificate.\n\nThat file can be copied to `loconfig.local.json` and customized to suit\nyour local environment.\n\nYour `loconfig.local.json` _should not_ be committed to your project's\nsource control.\n\n> 💡 If you are developing with a team, you may wish to continue\n> including a `loconfig.example.json` file with your project.\n\n### Development Configuration\n\nThe boilerplate provides a few configuration settings to control the\nbehaviour for processing front-end assets.\n\n#### `paths` option\n\nThe `paths` option defines URIs and file paths.\n\nIt is primarily used for template tags to reference any configuration\nproperties to reduce repetition.\n\nTemplate tags are specified using `{% %}` delimiters. They will be\nautomatically expanded when tasks process paths.\n\n```jsonc\n{\n \"paths\": {\n \"styles\": {\n \"src\": \"./assets/styles\",\n \"dest\": \"./www/assets/styles\"\n }\n },\n \"tasks\": {\n \"styles\": [\n {\n \"infile\": \"{% paths.styles.src %}/main.scss\", // → ./assets/styles/main.scss\n \"outfile\": \"{% paths.styles.dest %}/main.css\" // → ./www/assets/styles/main.css\n }\n ]\n }\n}\n```\n\n#### `paths.url` option\n\nThe `paths.url` option defines the base URI of the project.\n\nBy default, it is used by the development server as a proxy\nfor an existing virtual host.\n\n```json\n{\n \"paths\": {\n \"url\": \"locomotive-boilerplate.test\"\n }\n}\n```\n\n#### `paths.dest` option\n\nThe `paths.dest` option defines the public web directory of the project.\n\nBy default, it is used by the development server as the base directory\nto serve the website from if a proxy URI is not provided.\n\n```json\n{\n \"paths\": {\n \"dest\": \"./www\"\n }\n}\n```\n\n#### `tasks` option\n\nWhich assets and how they should be processed can be configured via\nthe `tasks` option:\n\n```json\n{\n \"tasks\": {\n \"scripts\": [\n {\n \"includes\": [\n \"./assets/scripts/app.js\"\n ],\n \"outfile\": \"./www/assets/scripts/app.js\"\n }\n ],\n \"styles\": [\n {\n \"infile\": \"./assets/styles/main.scss\",\n \"outfile\": \"./www/assets/styles/main.css\"\n }\n ]\n }\n}\n```\n\nSee [tasks](#tasks) section, below, for details.\n\n#### `server` option\n\nThe development server (BrowserSync) can be configured via\nthe `server` option:\n\n```json\n{\n \"server\": {\n \"open\": true,\n \"https\": {\n \"key\": \"~/.config/valet/Certificates/{% paths.url %}.key\",\n \"cert\": \"~/.config/valet/Certificates/{% paths.url %}.crt\"\n }\n }\n}\n```\n\nVisit [BrowserSync's documentation](https://browsersync.io/docs/options)\nfor all options.\n\n## Tasks\n\nThe boilerplate provides a handful of tasks for handling\nthe most commonly processed assets.\n\n### `concats`\n\nA wrapper around [concat] (with optional support for globbing) for concatenating multiple files.\n\nBy default, [tiny-glob] is installed with the boilerplate.\n\nExample:\n\n```json\n{\n \"concats\": [\n {\n \"label\": \"Application Vendors\",\n \"includes\": [\n \"{% paths.scripts.src %}/vendors/*.js\",\n \"node_modules/focus-visible/dist/focus-visible.min.js\",\n \"node_modules/vue/dist/vue.min.js\",\n \"node_modules/vuelidate/dist/vuelidate.min.js\",\n \"node_modules/vuelidate/dist/validators.min.js\"\n ],\n \"outfile\": \"{% paths.scripts.dest %}/app/vendors.js\"\n },\n {\n \"label\": \"Public Site Vendors\",\n \"includes\": [\n \"{% paths.scripts.src %}/vendors/*.js\",\n \"node_modules/focus-visible/dist/focus-visible.min.js\"\n ],\n \"outfile\": \"{% paths.scripts.dest %}/site/vendors.js\"\n }\n ]\n}\n```\n\nSee [`concats.js`](../build/tasks/concats.js) for details.\n\n### `scripts`\n\nA wrapper around [esbuild] for bundling and minifying modern JS/ES modules.\n\nExample:\n\n```json\n{\n \"scripts\": [\n {\n \"label\": \"Application Dashboard JS\",\n \"includes\": [\n \"{% paths.scripts.src %}/app/dashboard.js\"\n ],\n \"outfile\": \"{% paths.scripts.dest %}/app/dashboard.js\"\n },\n {\n \"label\": \"Public Site JS\",\n \"includes\": [\n \"{% paths.scripts.src %}/site/main.js\"\n ],\n \"outfile\": \"{% paths.scripts.dest %}/site/main.js\"\n }\n ]\n}\n```\n\nSee [`scripts.js`](../build/tasks/scripts.js) for details.\n\n### `styles`\n\nA wrapper around [sass] (with optional support for [Autoprefixer]\nvia [PostCSS]) for compiling and minifying Sass into CSS.\n\nBy default, [PostCSS] and [Autoprefixer] are installed with the boilerplate.\n\nExample:\n\n```json\n{\n \"styles\": [\n {\n \"label\": \"Text Editor CSS\",\n \"infile\": \"{% paths.styles.src %}/app/editor.scss\",\n \"outfile\": \"{% paths.styles.dest %}/app/editor.css\"\n },\n {\n \"label\": \"Application Dashboard CSS\",\n \"infile\": \"{% paths.styles.src %}/app/dashboard.scss\",\n \"outfile\": \"{% paths.styles.dest %}/app/dashboard.css\"\n },\n {\n \"label\": \"Public Site Critical CSS\",\n \"infile\": \"{% paths.styles.src %}/site/critical.scss\",\n \"outfile\": \"{% paths.styles.dest %}/site/critical.css\"\n },\n {\n \"label\": \"Public Site CSS\",\n \"infile\": \"{% paths.styles.src %}/site/main.scss\",\n \"outfile\": \"{% paths.styles.dest %}/site/main.css\"\n }\n ]\n}\n```\n\nSee [`styles.js`](../build/tasks/styles.js) for details.\n\nThe task also supports [PurgeCSS] to remove unused CSS.\nSee the [documentation on our Grid System](grid.md#build-tasks) for details.\n\n### `svgs`\n\nA wrapper around [SVG Mixer] for transforming and minifying SVG files\nand generating spritesheets.\n\nExample:\n\n```json\n{\n \"svgs\": [\n {\n \"label\": \"Application Spritesheet\",\n \"includes\": [\n \"{% paths.images.src %}/app/*.svg\"\n ],\n \"outfile\": \"{% paths.svgs.dest %}/app/sprite.svg\"\n },\n {\n \"label\": \"Public Site Spritesheet\",\n \"includes\": [\n \"{% paths.images.src %}/site/*.svg\"\n ],\n \"outfile\": \"{% paths.svgs.dest %}/site/sprite.svg\"\n }\n ]\n}\n```\n\nSee [`svgs.js`](../build/tasks/svgs.js) for details.\n\n### `versions`\n\nA task to create and update values for use in versioning assets.\n\nCan generate a hexadecimal value (using random bytes), use the current timestamp,\nor increment a number.\n\nExample:\n\n```json\n{\n \"versions\": [\n {\n \"format\": \"timestamp\",\n \"key\": \"now\",\n \"outfile\": \"./assets.json\"\n },\n {\n \"format\": \"hex:8\",\n \"key\": \"hex\",\n \"outfile\": \"./assets.json\"\n },\n {\n \"format\": \"inc:semver\",\n \"key\": \"inc\",\n \"outfile\": \"./assets.json\"\n }\n ]\n}\n```\n\n```json\n{\n \"now\": 1665071717350,\n \"hex\": \"6ef54181c4ba\",\n \"hex\": \"1.0.2\"\n}\n```\n\nThe task supports replacing the value of a data key in a JSON file or replacing\na string in a file using a [regular expression](RegExp).\n\n* Explicit JSON field name:\n ```json\n {\n \"key\": \"json:version\"\n }\n ```\n* Implicit JSON field name:\n ```json\n {\n \"key\": \"version\"\n }\n ```\n\nThe regular expression can be a `RegExp` object or a pattern prefixed with `regexp:`.\n\n* ```json\n {\n \"key\": \"regexp:(?<=^const ASSETS_VERSION = ')(?\\\\d+)(?=';$)\"\n }\n ```\n\n* ```js\n {\n key: new RegExp('(?<=^const ASSETS_VERSION = ')(?\\\\d+)(?=';$)')\n }\n ```\n* ```js\n {\n key: /^ \\* Version: +(?:.+?)\\+(.+?)$/\n }\n ```\n\nThe regular expression pattern will match the first occurrence and replace\nthe first match in the following order: `build` (named capture), `version`\n(named capture), `1` (first capture), or `0` (whole match).\n\nSee [`versions.js`](../build/tasks/versions.js) for details.\n\n[Autoprefixer]: https://npmjs.com/package/autoprefixer\n[BrowserSync]: https://npmjs.com/package/browser-sync\n[concat]: https://npmjs.com/package/concat\n[esbuild]: https://npmjs.com/package/esbuild\n[fast-glob]: https://npmjs.com/package/fast-glob\n[glob]: https://npmjs.com/package/glob\n[globby]: https://npmjs.com/package/globby\n[Node]: https://nodejs.org/\n[sass]: https://npmjs.com/package/sass\n[NPM]: https://npmjs.com/\n[NVM]: https://github.com/nvm-sh/nvm\n[PostCSS]: https://npmjs.com/package/postcss\n[PurgeCSS]: https://purgecss.com/\n[RegExp]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp\n[SVG Mixer]: https://npmjs.com/package/svg-mixer\n[tiny-glob]: https://npmjs.com/package/tiny-glob\n"
},
{
"path": "packages/landing/docs/grid.md",
"content": "# Grid system\n\n* [Architectures](#architecture)\n * [Build tasks](#build-tasks)\n * [Configuration](#configuration)\n* [Usage](#usage)\n * [Example](#example)\n\n## Architecture\n\nThe boilerplate's grid system is meant to be simple and easy to use. The goal is to create a light, flexible, and reusable way to build layouts.\nThe following styles are needed to work properly:\n\n* [`o-grid`](../assets/styles/objects/_grid.scss) — Object file where the default grid styles are set such as column numbers, modifiers, and options.\n* [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) — Utility file that generates the styles for every possible column based on an array of media queries and column numbers.\n\n### Build tasks\n\nThe columns generated by [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) adds a lot of styles to the compiled CSS file. To mitigate that, [PurgeCSS] is integrated into the `styles` build task to purge unused CSS.\n\n#### Configuration\n\nDepending on your project, you will need to specify all the files that include CSS classes from the grid system. These files will be scanned by [PurgeCSS] to your compiled CSS files.\n\nExample of a Charcoal project:\n\n```jsonc\n\"purgeCSS\": {\n \"content\": [\n \"./views/app/template/**/*.mustache\",\n \"./src/App/Template/*.php\",\n \"./assets/scripts/**/*\" // use case: `el.classList.add('u-gc-1/2')`\n ]\n}\n```\n\n## Usage\n\nThe first step is to set intial SCSS values in the following files :\n\n- [`settings/_config.scss`](../assets/styles/settings/_config.scss)\n\n ```scss\n // Grid\n // ==========================================================================\n $base-column-nb: 12;\n $base-column-gap: $unit-small;\n ```\n\n You can create multiple column layouts depending on media queries.\n\n- [`objects/_grid.scss`](../assets/styles/objects/_grid.scss)\n\n ```scss\n .o-grid {\n display: grid;\n width: 100%;\n margin: 0;\n padding: 0;\n list-style: none;\n\n // ==========================================================================\n // Cols\n // ==========================================================================\n &.-col-#{$base-column-nb} {\n grid-template-columns: repeat(#{$base-column-nb}, 1fr);\n }\n\n &.-col-4 {\n grid-template-columns: repeat(4, 1fr);\n }\n\n &.-col-#{$base-column-nb}\\@from-medium {\n @media (min-width: $from-medium) {\n grid-template-columns: repeat(#{$base-column-nb}, 1fr);\n }\n }\n // …\n ```\n\n### Example\n\nThe following layout has 4 columns at `>=999px` and 12 columns at `<1000px`.\n\n```html\n
\n
Hello
\n\n
\n
\n
This grid has 4 columns and 12 columns from `medium` MQ
\n
\n\n
\n
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?
\n
\n\n
\n
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?
\n
\n\n
\n
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?
\n
\n
\n
\n```\n\n[PurgeCSS]: https://purgecss.com/\n"
},
{
"path": "packages/landing/docs/technologies.md",
"content": "# Technologies\n\n* [Styles](#styles)\n * [CSS Architecture](#css-architecture)\n * [CSS Naming Convention](#css-naming-convention)\n * [CSS Namespacing](#css-namespacing)\n * [Example](#example-1)\n* [Scripts](#scripts)\n * [Example](#example-2)\n* [Page transitions](#page-transitions)\n * [Example](#example-3)\n* [Scroll detection](#scroll-detection)\n * [Example](#example-4)\n\n## Styles\n\n[SCSS][Sass] is a superset of CSS that adds many helpful features to improve\nand modularize our styles.\n\nWe use [node-sass] (LibSass) for processing and minifying SCSS into CSS.\n\nWe also use [PostCSS] and [Autoprefixer] to parse our CSS and add\nvendor prefixes for experimental features.\n\n### CSS Architecture\n\nThe boilerplate's CSS architecture is based on [Inuit CSS][inuitcss] and [ITCSS].\n\n* `settings`: Global variables, site-wide settings, config switches, etc.\n* `tools`: Site-wide mixins and functions.\n* `generic`: Low-specificity, far-reaching rulesets (e.g. resets).\n* `elements`: Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).\n* `objects`: Objects, abstractions, and design patterns (e.g. `.o-layout {}`).\n* `components`: Discrete, complete chunks of UI (e.g. `.c-carousel {}`).\n* `utilities`: High-specificity, very explicit selectors. Overrides and helper\n classes (e.g. `.u-hidden {}`)\n\nLearn more about [Inuit CSS](https://github.com/inuitcss/inuitcss#css-directory-structure).\n\n### CSS Naming Convention\n\nWe use a simplified [BEM] (Block, Element, Modifier) syntax:\n\n* `.block`\n* `.block_element`\n* `.-modifier`\n\n### CSS Namespacing\n\nWe namespace our classes for more UI transparency:\n\n* `o-`: Object that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places.\n* `c-`: Component is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.\n* `u-`: Utility has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI.\n* `s-`: Scope creates a new styling context. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly—they can be open to abuse and lead to poor CSS if not used wisely.\n* `is-`, `has-`: Is currently styled a certain way because of a state or condition. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.\n\nLearn about [namespacing](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/).\n\n### Example \\#1\n\n```html\n
\n```\n\n```scss\n.c-block {\n &.-large {\n padding: rem(60px);\n }\n}\n\n.c-block_heading {\n @media (max-width: $to-medium) {\n .c-block.-large & {\n margin-bottom: rem(40px);\n } \n }\n}\n```\n\n## Scripts\n\nWe use [esbuild] for bundling and minifying JavaScript/ES modules.\n\n[modularJS] is a small framework we use on top of ES modules.\n\n* Automatically init visible modules.\n* Easily call other modules methods.\n* Quickly set scoped events with delegation.\n* Simply select DOM elements scoped in their module.\n\n[_source_](https://npmjs.com/package/modujs#why)\n\n### Example \\#2\n\n```html\n
\n
\n
Example
\n
\n \n
\n```\n\n```js\nimport { module } from 'modujs';\n\nexport default class extends module {\n constructor(m) {\n super(m);\n\n this.events = {\n click: {\n load: 'loadMore'\n }\n };\n }\n\n loadMore() {\n this.$('main')[0].classList.add('is-loading');\n }\n}\n```\n\nLearn more about [modularJS].\n\n## Page transitions\n\n[modularLoad] is used for page transitions and lazy loading.\n\n### Example \\#3\n\n```html\n\n
\n \n
\n```\n```js\nimport modularLoad from 'modularload';\n\nthis.load = new modularLoad({\n enterDelay: 300,\n transitions: {\n transitionName: {\n enterDelay: 450\n }\n }\n});\n```\n\nLearn more about [modularLoad].\n\n## Scroll detection\n\n[Locomotive Scroll][locomotive-scroll] is used for elements in viewport\ndetection and smooth scrolling with parallax.\n\n### Example \\#4\n\n```html\n
\n 01\n In-view detection\n Add classes, trigger callbacks, or fire custom events when elements enter the viewport. Built on Intersection Observer for native performance.\n
\n In-view detection\n
\n
\n
\n\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n 02\n Progress tracking\n Get real-time scroll progress (0-1) as CSS variables or JavaScript events. Perfect for progress bars, scroll-driven animations, or custom interactions.\n
\n Progress tracking\n
\n
\n
\n\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n 02\n Parallax effects\n Create smooth parallax effects instantly with a single data-scroll-speed attribute. No complex setup, no math, just add a number and it works.\n
\n Parallax effects\n
\n
\n
\n\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n\n\n\n \n \n \n
\n
\n
\n
\n \n\n \n\n \n\n
\n \n \n Features\n \n \n \n \n \n \n\n \n \n \n
\n\n
\n
\n
\n ⛵\n
Locomotive Scroll is a thin, opinionated wrapper around Lenis. You get all of Lenis's power plus our detection and animation layer.
Real browser scrollbar. No fake alternatives. Accessible, performant, and familiar to users.
\n
\n
\n
\n\n
\n
\n
\n 02\n
Smooth easing
\n
Configurable lerp, duration, and custom easing functions thanks to Lenis options.
\n
\n
\n
\n\n
\n
\n
\n 03\n
CSS sticky
\n
Works perfectly with position: sticky. No conflicts, no workarounds.
\n
\n
\n
\n\n
\n
\n
\n 04\n
Intersection Observer API
\n
Browser-native detection. No polling, no performance hits, just efficient viewport tracking.
\n
\n
\n
\n\n
\n \n \n 05\n Scroll to\n Programmatic scrolling to any element, selector, or pixel value via Lenis. Supports offset, duration, and custom easing.\n \n \n
\n\n
\n
\n
\n 06\n
\n
Scroll direction
\n
\n ↓\n ↑\n
\n
\n
Track direction changes in real-time thanks to Lenis. Perfect for hiding/showing headers or reversing animations.
\n
\n
\n
\n\n
\n
\n
\n 07\n
No layout shifts
\n
No more greedy CSS transforms breaking your layouts. Plays nice with position: sticky, fixed headers, and existing CSS.
\n
\n
\n
\n\n
\n
\n
\n\n \n\n \n\n
\n
\n
\n
\n
\n ⛵\n
\n Real projects built with Locomotive Scroll by leading studios and developers.\n
![](\"https://user-images.githubusercontent.com/4596862/54868065-c2aea200-4d5e-11e9-9ce3-e0013c15f48c.png\")
\n \n![](\"assets/images/hello.jpg\")
\n