Add dedicated svg folder

Merge pull request #160 from butterfail/greg/invlerp
Fix invlerp method
2026-01-15 00:55:08 +08:00 · 2023-12-11 11:43:16 +01:00 · 2023-12-11 11:10:26 +01:00 · 2023-12-11 11:02:54 +01:00 · 2023-12-11 11:00:21 +01:00 · 2023-12-11 10:58:24 +01:00
43 changed files with 811 additions and 430 deletions
--- a/assets.json
+++ b/assets.json
@@ -1,3 +1,3 @@
 {
-    "version": 1683902331941
+    "version": 1702288850381
 }
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -10,7 +10,7 @@ const app = new modular({
    modules: modules,
 });

-window.onload = (event) => {
+window.addEventListener('load', (event) => {
    const $style = document.getElementById('main-css');

    if ($style) {
@@ -24,7 +24,7 @@ window.onload = (event) => {
    } else {
        console.warn('The "main-css" stylesheet not found');
    }
-};
+});

 function init() {
    globals();
@@ -48,7 +48,7 @@ function init() {
     * Eagerly load the following fonts.
     */
    if (isFontLoadingAPIAvailable) {
-        loadFonts(FONT.EAGER_FONTS, ENV.IS_DEV).then((eagerFonts) => {
+        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
            $html.classList.add(CSS_CLASS.FONTS_LOADED);

            if (ENV.IS_DEV) {
--- a/assets/scripts/config.js
+++ b/assets/scripts/config.js
@@ -9,7 +9,7 @@
 */

 const NODE_ENV = process.env.NODE_ENV
-const IS_DESKTOP = typeof window.orientation === 'undefined'
+const IS_MOBILE = window.matchMedia('(any-pointer:coarse)').matches

 // Main environment variables
 const ENV = Object.freeze({
@@ -19,8 +19,8 @@ const ENV = Object.freeze({
    IS_DEV: NODE_ENV === 'development',

    // Device
-    IS_DESKTOP,
-    IS_MOBILE: !IS_DESKTOP,
+    IS_MOBILE,
+    IS_DESKTOP: !IS_MOBILE,
 })

 // Main CSS classes used within the project
--- a/assets/scripts/modules/Scroll.js
+++ b/assets/scripts/modules/Scroll.js
@@ -1,6 +1,6 @@
-import { module } from 'modujs';
-import { lazyLoadImage } from '../utils/image';
-import LocomotiveScroll from 'locomotive-scroll';
+import { module } from 'modujs'
+import { lazyLoadImage } from '../utils/image'
+import LocomotiveScroll from 'locomotive-scroll'

 export default class extends module {
    constructor(m) {
@@ -9,18 +9,14 @@ export default class extends module {

    init() {
        this.scroll = new LocomotiveScroll({
-            el: this.el,
-            smooth: true
-        });
-
-        this.scroll.on('call', (func, way, obj, id) => {
-            // Using modularJS
-            this.call(func[0], { way, obj }, func[1], func[2]);
-        });
-
-        this.scroll.on('scroll', (args) => {
-            // console.log(args.scroll);
+            modularInstance: this,
        })
+
+        // // Force scroll to top
+        // if (history.scrollRestoration) {
+        //     history.scrollRestoration = 'manual'
+        //     window.scrollTo(0, 0)
+        // }
    }

    /**
@@ -41,11 +37,22 @@ export default class extends module {
     * @param {LocomotiveScroll} args - The Locomotive Scroll instance.
     */
    lazyLoad(args) {
-        lazyLoadImage(args.obj.el, null, () => {
+        lazyLoadImage(args.target, null, () => {
            //callback
        })
    }

+    scrollTo(params) {
+        let { target, ...options } = params
+
+        options = Object.assign({
+            // Defaults
+            duration: 1,
+        }, options)
+
+        this.scroll?.scrollTo(target, options)
+    }
+
    destroy() {
        this.scroll.destroy();
    }
--- a/assets/scripts/utils/maths.js
+++ b/assets/scripts/utils/maths.js
@@ -28,7 +28,7 @@ const lerp = (x, y, a) => x * (1 - a) + y * a
 * @return {number} inverted lerp value
 */

-const invlerp = (x, y, a) => clamp((v - x)/(a - x))
+const invlerp = (x, y, a) => clamp((a - x)/(y - x))


 /**
--- a/assets/styles/components/_scrollbar.scss
+++ b/assets/styles/components/_scrollbar.scss
@@ -9,7 +9,7 @@
    width: 11px;
    height: 100vh;
    transform-origin: center right;
-    transition: transform 0.3s, opacity 0.3s;
+    transition: transform t(normal), opacity t(normal);
    opacity: 0;

    &:hover {
--- a/assets/styles/elements/_document.scss
+++ b/assets/styles/elements/_document.scss
@@ -5,7 +5,7 @@
 //
 // Simple page-level setup.
 //
-// 1. Include web fonts
+// 1. Includes fonts
 // 2. Ensure the page always fills at least the entire height of the viewport.
 // 3. Set the default `font-size` and `line-height` for the entire project,
 //    sourced from our default variables.
@@ -51,25 +51,9 @@ html {
    &.is-loading {
        cursor: wait;
    }
-
-    &.has-scroll-smooth {
-        overflow: hidden;
-        position: fixed;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-    }
-
-    &.has-scroll-dragging {
-        user-select: none;
-    }
 }

 body {
-    .has-scroll-smooth & {
-        overflow: hidden;
-    }
 }

 ::selection {
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -10,7 +10,6 @@
@import "tools/maths";
@import "tools/functions";
@import "tools/mixins";
-@import "tools/fonts";
 // @import "tools/layout";
 // @import "tools/widths";
 // @import "tools/family";
@@ -18,8 +17,13 @@
 // Settings
 // ==========================================================================

-@import "settings/config.eases";
+@import "settings/config.breakpoints";
@import "settings/config.colors";
+@import "settings/config.eases";
+@import "settings/config.fonts";
+@import "settings/config.spacers";
+@import "settings/config.timings";
+@import "settings/config.zindexes";
@import "settings/config";
@import "settings/config.variables";

@@ -32,6 +36,10 @@
@import "generic/form";
@import "generic/button";

+// Vendors
+// ==========================================================================
+@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+
 // Elements
 // ==========================================================================

@@ -40,7 +48,6 @@
 // Objects
 // ==========================================================================

-@import "objects/scroll";
@import "objects/container";
@import "objects/ratio";
@import "objects/icons";
@@ -48,14 +55,9 @@
 // @import "objects/layout";
 // @import "objects/table";

-// Vendors
-// ==========================================================================
-// @import "vendors/vendor";
-
 // Components
 // ==========================================================================

-@import "components/scrollbar";
@import "components/heading";
@import "components/button";
@import "components/form";
@@ -69,5 +71,5 @@
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-// @import "utilities/spacing";
+@import "utilities/spacing";
 // @import "utilities/print";
--- a/assets/styles/objects/_scroll.scss
+++ b/assets/styles/objects/_scroll.scss
@@ -1,7 +0,0 @@
-// ==========================================================================
-// Objects / Scroll
-// ==========================================================================
-
-.o-scroll {
-    min-height: 100vh;
-}
--- a/assets/styles/settings/_config.breakpoints.scss
+++ b/assets/styles/settings/_config.breakpoints.scss
@@ -0,0 +1,95 @@
+// ==========================================================================
+// Settings / Config / Breakpoints
+// ==========================================================================
+
+// Breakpoints
+// ==========================================================================
+
+$breakpoints: (
+    "tiny":     500px,
+    "small":    700px,
+    "medium":   1000px,
+    "large":    1200px,
+    "big":      1400px,
+    "huge":     1600px,
+    "enormous": 1800px,
+    "gigantic": 2000px,
+    "colossal": 2400px
+);
+
+// Functions
+// ==========================================================================
+
+// Creates a min-width or max-width media query expression.
+//
+// @param  {string} $breakpoint The breakpoint.
+// @param  {string} $type       Either "min" or "max".
+// @return {string}
+
+@function mq($breakpoint, $type: "min") {
+    @if not map-has-key($breakpoints, $breakpoint) {
+        @warn "Unknown media query breakpoint: `#{$breakpoint}`";
+    }
+
+    $value: map-get($breakpoints, $breakpoint);
+
+    @if ($type == "min") {
+        @return "(min-width: #{$value})";
+    }
+    @if ($type == "max") {
+        @return "(max-width: #{$value - 1px})";
+    }
+
+    @error "Unknown media query type: #{$type}";
+}
+
+// Creates a min-width media query expression.
+//
+// @param  {string} $breakpoint The breakpoint.
+// @return {string}
+
+@function mq-min($breakpoint) {
+    @return mq($breakpoint, "min");
+}
+
+// Creates a max-width media query expression.
+//
+// @param  {string} $breakpoint The breakpoint.
+// @return {string}
+
+@function mq-max($breakpoint) {
+    @return mq($breakpoint, "max");
+}
+
+// Creates a min-width and max-width media query expression.
+//
+// @param  {string} $from  The min-width breakpoint.
+// @param  {string} $until The max-width breakpoint.
+// @return {string}
+
+@function mq-between($breakpointMin, $breakpointMax) {
+    @return "#{mq-min($breakpointMin)} and #{mq-max($breakpointMax)}";
+}
+
+
+// Legacy
+// ==========================================================================
+
+$from-tiny:     map-get($breakpoints, "tiny")           !default;
+$to-tiny:       map-get($breakpoints, "tiny") - 1       !default;
+$from-small:    map-get($breakpoints, "small")          !default;
+$to-small:      map-get($breakpoints, "small") - 1      !default;
+$from-medium:   map-get($breakpoints, "medium")         !default;
+$to-medium:     map-get($breakpoints, "medium") - 1     !default;
+$from-large:    map-get($breakpoints, "large")          !default;
+$to-large:      map-get($breakpoints, "large") - 1      !default;
+$from-big:      map-get($breakpoints, "big")            !default;
+$to-big:        map-get($breakpoints, "big") - 1        !default;
+$from-huge:     map-get($breakpoints, "huge")           !default;
+$to-huge:       map-get($breakpoints, "huge") - 1       !default;
+$from-enormous: map-get($breakpoints, "enormous")       !default;
+$to-enormous:   map-get($breakpoints, "enormous") - 1   !default;
+$from-gigantic: map-get($breakpoints, "gigantic")       !default;
+$to-gigantic:   map-get($breakpoints, "gigantic") - 1   !default;
+$from-colossal: map-get($breakpoints, "colossal")       !default;
+$to-colossal:   map-get($breakpoints, "colossal") - 1   !default;
--- a/assets/styles/settings/_config.colors.scss
+++ b/assets/styles/settings/_config.colors.scss
@@ -3,7 +3,7 @@
 // ==========================================================================

 // Palette
-// =============================================================================
+// ==========================================================================

 $colors: (
    primary:        #3297FD,
@@ -11,9 +11,37 @@ $colors: (
    darkest:        #000000,
 );

+// Function
+// ==========================================================================
+
+// Returns color code.
+//
+// ```scss
+// .c-box {
+//     color: color(primary);
+// }
+// ```
+//
+// @param  {string} $key - The color key in $colors.
+// @param  {number} $alpha - The alpha for the color value.
+// @return {color}
+
+@function color($key, $alpha: 1) {
+    @if not map-has-key($colors, $key) {
+        @error "Unknown '#{$key}' in $colors.";
+    }
+
+    @if($alpha < 0 or $alpha > 1) {
+        @error "Alpha '#{$alpha}' must be in range [0, 1].";
+    }
+
+    $color: map-get($colors, $key);
+
+    @return rgba($color, $alpha);
+}

 // Specifics
-// =============================================================================
+// ==========================================================================

 // Link
 $color-link:           color(primary);
--- a/assets/styles/settings/_config.eases.scss
+++ b/assets/styles/settings/_config.eases.scss
@@ -2,47 +2,77 @@
 // Settings / Config / Eases
 // ==========================================================================

-// Power 1
-$ease-power1-in:        cubic-bezier(0.550, 0.085, 0.680, 0.530);
-$ease-power1-out:       cubic-bezier(0.250, 0.460, 0.450, 0.940);
-$ease-power1-in-out:    cubic-bezier(0.455, 0.030, 0.515, 0.955);
+// Eases
+// ==========================================================================

-// Power 2
-$ease-power2-in:        cubic-bezier(0.550, 0.055, 0.675, 0.190);
-$ease-power2-out:       cubic-bezier(0.215, 0.610, 0.355, 1.000);
-$ease-power2-in-out:    cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$eases: (
+    // Power 1
+    "power1.in":        cubic-bezier(0.550, 0.085, 0.680, 0.530),
+    "power1.out":       cubic-bezier(0.250, 0.460, 0.450, 0.940),
+    "power1.inOut":     cubic-bezier(0.455, 0.030, 0.515, 0.955),

-// Power 3
-$ease-power3-in:        cubic-bezier(0.895, 0.030, 0.685, 0.220);
-$ease-power3-out:       cubic-bezier(0.165, 0.840, 0.440, 1.000);
-$ease-power3-in-out:    cubic-bezier(0.770, 0.000, 0.175, 1.000);
+    // Power 2
+    "power2.in":        cubic-bezier(0.550, 0.055, 0.675, 0.190),
+    "power2.out":       cubic-bezier(0.215, 0.610, 0.355, 1.000),
+    "power2.inOut":     cubic-bezier(0.645, 0.045, 0.355, 1.000),

-// Power 3
-$ease-power4-in:        cubic-bezier(0.755, 0.050, 0.855, 0.060);
-$ease-power4-out:       cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$ease-power4-in-out:    cubic-bezier(0.860, 0.000, 0.070, 1.000);
+    // Power 3
+    "power3.in":        cubic-bezier(0.895, 0.030, 0.685, 0.220),
+    "power3.out":       cubic-bezier(0.165, 0.840, 0.440, 1.000),
+    "power3.inOut":     cubic-bezier(0.770, 0.000, 0.175, 1.000),

-// Expo
-$ease-expo-in:          cubic-bezier(0.950, 0.050, 0.795, 0.035);
-$ease-expo-out:         cubic-bezier(0.190, 1.000, 0.220, 1.000);
-$ease-expo-in-out:      cubic-bezier(1.000, 0.000, 0.000, 1.000);
+    // Power 4
+    "power4.in":        cubic-bezier(0.755, 0.050, 0.855, 0.060),
+    "power4.out":       cubic-bezier(0.230, 1.000, 0.320, 1.000),
+    "power4.inOut":     cubic-bezier(0.860, 0.000, 0.070, 1.000),

-// Back
-$ease-back-in:          cubic-bezier(0.600, -0.280, 0.735, 0.045);
-$ease-back-out:         cubic-bezier(0.175, 00.885, 0.320, 1.275);
-$ease-back-in-out:      cubic-bezier(0.680, -0.550, 0.265, 1.550);
+    // Expo
+    "expo.in":          cubic-bezier(0.950, 0.050, 0.795, 0.035),
+    "expo.out":         cubic-bezier(0.190, 1.000, 0.220, 1.000),
+    "expo.inOut":       cubic-bezier(1.000, 0.000, 0.000, 1.000),

-// Sine
-$ease-sine-in:          cubic-bezier(0.470, 0.000, 0.745, 0.715);
-$ease-sine-out:         cubic-bezier(0.390, 0.575, 0.565, 1.000);
-$ease-sine-in-out:      cubic-bezier(0.445, 0.050, 0.550, 0.950);
+    // Back
+    "back.in":          cubic-bezier(0.600, -0.280, 0.735, 0.045),
+    "back.out":         cubic-bezier(0.175, 00.885, 0.320, 1.275),
+    "back.inOut":       cubic-bezier(0.680, -0.550, 0.265, 1.550),

-// Circ
-$ease-circ-in:          cubic-bezier(0.600, 0.040, 0.980, 0.335);
-$ease-circ-out:         cubic-bezier(0.075, 0.820, 0.165, 1.000);
-$ease-circ-in-out:      cubic-bezier(0.785, 0.135, 0.150, 0.860);
+    // Sine
+    "sine.in":          cubic-bezier(0.470, 0.000, 0.745, 0.715),
+    "sine.out":         cubic-bezier(0.390, 0.575, 0.565, 1.000),
+    "sine.inOut":       cubic-bezier(0.445, 0.050, 0.550, 0.950),

-// Misc
-$ease-bounce:           cubic-bezier(0.17, 0.67, 0.3, 1.33);
-$ease-slow-out:         cubic-bezier(.04,1.15,0.4,.99);
-$ease-smooth:           cubic-bezier(0.380, 0.005, 0.215, 1);
+    // Circ
+    "circ.in":          cubic-bezier(0.600, 0.040, 0.980, 0.335),
+    "circ.out":         cubic-bezier(0.075, 0.820, 0.165, 1.000),
+    "circ.inOut":       cubic-bezier(0.785, 0.135, 0.150, 0.860),
+
+    // Misc
+    "bounce":           cubic-bezier(0.17, 0.67, 0.3, 1.33),
+    "slow.out":         cubic-bezier(.04,1.15,0.4,.99),
+    "smooth":           cubic-bezier(0.380, 0.005, 0.215, 1),
+);
+
+// Default value for ease()
+$ease-default: "power2.out" !default;
+
+// Function
+// ==========================================================================
+
+// Returns ease curve.
+//
+// ```scss
+// .c-box {
+//     transition-timing-function: ease("power2.out");
+// }
+// ```
+//
+// @param  {string} $key - The ease key in $eases.
+// @return {easing-function}
+
+@function ease($key: $ease-default) {
+    @if not map-has-key($eases, $key) {
+        @error "Unknown '#{$key}' in $eases.";
+    }
+
+    @return map-get($eases, $key);
+}
--- a/assets/styles/settings/_config.fonts.scss
+++ b/assets/styles/settings/_config.fonts.scss
@@ -1,5 +1,42 @@
 // ==========================================================================
-// Tools / Font Faces
+// Settings / Config / Breakpoints
+// ==========================================================================
+
+// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
+// ==========================================================================
+
+$font-fallback-sans:    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+$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;
+$font-fallback-mono:    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+
+// Typefaces
+// ==========================================================================
+
+// List of custom font faces as tuples.
+//
+// ```
+// <font-name> <font-file-basename> <font-weight> <font-style>
+// ```
+$font-faces: (
+    ("Source Sans", "SourceSans3-Bold",      700, normal),
+    ("Source Sans", "SourceSans3-BoldIt",    700, italic),
+    ("Source Sans", "SourceSans3-Regular",   400, normal),
+    ("Source Sans", "SourceSans3-RegularIt", 400, italic),
+);
+
+// Map of font families.
+//
+// ```
+// <font-id>: (<font-name>, <font-fallbacks>)
+// ```
+$font-families: (
+    sans: join("Source Sans", $font-fallback-sans, $separator: comma),
+);
+
+// Font directory
+$font-dir: "../fonts/";
+
+// Functions
 // ==========================================================================

 // Imports the custom font.
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -11,43 +11,11 @@ $context: frontend  !default;
 // Path is relative to the stylesheets directory.
 $assets-path: "../"  !default;

-// Typefaces
-// =============================================================================
-
-// Font directory
-$font-dir: "../fonts/";
-
-// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
-$font-fallback-sans:    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-$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;
-$font-fallback-mono:    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-
-// Map of font families.
-//
-// ```
-// <font-id>: (<font-name>, <font-fallbacks>)
-// ```
-$font-families: (
-    sans: join("Source Sans", $font-fallback-sans, $separator: comma),
-);
-
-// List of custom font faces as tuples.
-//
-// ```
-// <font-name> <font-file-basename> <font-weight> <font-style>
-// ```
-$font-faces: (
-    ("Source Sans", "SourceSans3-Bold",      700, normal),
-    ("Source Sans", "SourceSans3-BoldIt",    700, italic),
-    ("Source Sans", "SourceSans3-Regular",   400, normal),
-    ("Source Sans", "SourceSans3-RegularIt", 400, italic),
-);
-
 // Typography
 // =============================================================================

 // Base
-$font-size: 16px;
+$font-size:     16px;
 $line-height:   math.div(24px, $font-size);
 $font-color:    color(darkest);

@@ -57,11 +25,10 @@ $font-weight-normal:    400;
 $font-weight-medium:    500;
 $font-weight-bold:      700;

-// Transitions
+// Transition defaults
 // =============================================================================
-
-$speed:     0.3s;
-$easing:    $ease-power2-out;
+$speed:     t(normal);
+$easing:    ease("power2.out");

 // Spacing Units
 // =============================================================================
@@ -75,34 +42,3 @@ $padding:         $unit;
 // Grid
 // ==========================================================================
 $base-column-nb: 12;
-
-// Breakpoints
-// =============================================================================
-
-$from-tiny:     500px              !default;
-$to-tiny:       $from-tiny - 1     !default;
-$from-small:    700px              !default;
-$to-small:      $from-small - 1    !default;
-$from-medium:   1000px             !default;
-$to-medium:     $from-medium - 1   !default;
-$from-large:    1200px             !default;
-$to-large:      $from-large - 1    !default;
-$from-big:      1400px             !default;
-$to-big:        $from-big - 1      !default;
-$from-huge:     1600px             !default;
-$to-huge:       $from-huge - 1     !default;
-$from-enormous: 1800px             !default;
-$to-enormous:   $from-enormous - 1 !default;
-$from-gigantic: 2000px             !default;
-$to-gigantic:   $from-gigantic - 1 !default;
-$from-colossal: 2400px             !default;
-$to-colossal:   $from-colossal - 1 !default;
-
-// Master z-indexe
-// =============================================================================
-
-$z-indexes: (
-    "header":   200,
-    "above":    1,
-    "below":    -1
-);
--- a/assets/styles/settings/_config.spacers.scss
+++ b/assets/styles/settings/_config.spacers.scss
@@ -0,0 +1,40 @@
+// ==========================================================================
+// Settings / Config / Spacers
+// ==========================================================================
+
+// Spacers
+// ==========================================================================
+
+$spacers: (
+    'gutter':       var(--grid-gutter),
+    'xs':           #{vh(5)},
+    'sm':           #{vh(7.5)},
+    'md':           #{vh(10)},
+    'lg':           #{vh(12.5)},
+    'xl':           #{vh(15)},
+);
+
+// Function
+// ==========================================================================
+
+// Returns spacer.
+//
+// ```scss
+// .c-box {
+//     margin-top: spacer(gutter);
+// }
+// ```
+//
+// @param  {string} $key - The spacer key in $spacers.
+// @param  {number} $multiplier - The multiplier of the spacer value.
+// @return {size}
+
+@function spacer($spacer: $spacer-default, $multiplier: 1) {
+    @if not map-has-key($spacers, $spacer) {
+        @error "Unknown master spacer: #{$spacer}";
+    }
+
+    $index: map-get($spacers, $spacer);
+
+    @return calc(#{$index} * #{$multiplier});
+}
--- a/assets/styles/settings/_config.timings.scss
+++ b/assets/styles/settings/_config.timings.scss
@@ -0,0 +1,41 @@
+// ==========================================================================
+// Settings / Config / Timings
+// ==========================================================================
+
+// Timings
+// ==========================================================================
+
+$timings: (
+    fastest:    0.1s,
+    faster:     0.15s,
+    fast:       0.25s,
+    normal:     0.5s,
+    slow:       0.75s,
+    slower:     1s,
+    slowest:    2s,
+);
+
+// Default timing for t()
+$timing-default: "normal" !default;
+
+// Function
+// ==========================================================================
+
+// Returns timing.
+//
+// ```scss
+// .c-box {
+//     transition-duration: t(slow);
+// }
+// ```
+//
+// @param  {string} $key - The timing key in $timings.
+// @return {duration}
+
+@function t($key: $timing-default) {
+    @if not map-has-key($timings, $key) {
+        @error "Unknown '#{$key}' in $timings.";
+    }
+
+    @return map-get($timings, $key);
+}
--- a/assets/styles/settings/_config.variables.scss
+++ b/assets/styles/settings/_config.variables.scss
@@ -7,14 +7,13 @@
    // Grid
    --grid-columns:     4;
    --grid-gutter:      #{rem(10px)};
-    --grid-gutter-half: calc(0.5 * var(--grid-gutter));
    --grid-margin:      #{rem(10px)};

    // Container
    --container-width:  calc(100% - 2 * var(--grid-margin));

    // Font sizes
-    --font-size-h1:     #{rem(36px)};
+    --font-size-h1:     #{responsive-type(36px, 72px, 1400px)};
    --font-size-h2:     #{rem(28px)};
    --font-size-h3:     #{rem(24px)};
    --font-size-h4:     #{rem(20px)};
--- a/assets/styles/settings/_config.zindexes.scss
+++ b/assets/styles/settings/_config.zindexes.scss
@@ -0,0 +1,44 @@
+// ==========================================================================
+// Settings / Config / Z-indexes
+// ==========================================================================
+
+// Timings
+// ==========================================================================
+
+$z-indexes: (
+    "header":   200,
+    "above":    1,
+    "default":  0,
+    "below":    -1
+);
+
+// Default z-index for z()
+$z-index-default: "above" !default;
+
+// Function
+// ==========================================================================
+
+// Retrieves the z-index from the {@see $layers master list}.
+//
+// @link on http://css-tricks.com/handling-z-index/
+//
+// @param  {string} $layer    The name of the z-index.
+// @param  {number} $modifier A positive or negative modifier to apply
+//     to the returned z-index value.
+// @throw  Error if the $layer does not exist.
+// @throw  Warning if the $modifier might overlap another master z-index.
+// @return {number}           The computed z-index of $layer and $modifier.
+
+@function z($layer: $z-index-default, $modifier: 0) {
+    @if not map-has-key($z-indexes, $layer) {
+        @error "Unknown master z-index layer: #{$layer}";
+    }
+
+    @if ($modifier >= 50 or $modifier <= -50) {
+        @warn "Modifier may overlap the another master z-index layer: #{$modifier}";
+    }
+
+    $index: map-get($z-indexes, $layer);
+
+    @return $index + $modifier;
+}
--- a/assets/styles/tools/_functions.scss
+++ b/assets/styles/tools/_functions.scss
@@ -48,31 +48,6 @@
    @return math.div($size, $base) * 1rem;
 }

-// Retrieves the z-index from the {@see $layers master list}.
-//
-// @link on http://css-tricks.com/handling-z-index/
-//
-// @param  {string} $layer    The name of the z-index.
-// @param  {number} $modifier A positive or negative modifier to apply
-//     to the returned z-index value.
-// @throw  Error if the $layer does not exist.
-// @throw  Warning if the $modifier might overlap another master z-index.
-// @return {number}           The computed z-index of $layer and $modifier.
-
-@function z($layer, $modifier: 0) {
-    @if not map-has-key($z-indexes, $layer) {
-        @error "Unknown master z-index layer: #{$layer}";
-    }
-
-    @if ($modifier >= 50 or $modifier <= -50) {
-        @warn "Modifier may overlap the another master z-index layer: #{$modifier}";
-    }
-
-    $index: map-get($z-indexes, $layer);
-
-    @return $index + $modifier;
-}
-
 // Converts a number to a percentage.
 //
 // @alias  percentage()
@@ -140,21 +115,70 @@

 $context: 'frontend' !default;

-
-// Returns color code.
+// Returns calculation of a percentage of the grid cell width
+// with optional inset of grid gutter.
 //
 // ```scss
 // .c-box {
-//     width: color(primary);
+//     width: grid-space(6/12);
+//     margin-left: grid-space(1/12, 1);
 // }
 // ```
 //
-// @param  {string} $key - The color key in $colors.
-// @return {color}
-
-@function color($key) {
-    @if not map-has-key($colors, $key) {
-        @error "Unknown '#{$key}' in $colors.";
-    }
-    @return map-get($colors, $key);
+// @param  {number} $number - The percentage spacer
+// @param  {number} $inset  - The grid gutter inset
+// @return {function<number>}
+@function grid-space($percentage, $inset: 0) {
+    @return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
+}
+
+// Returns calculation of a percentage of the viewport height.
+//
+// ```scss
+// .c-box {
+//     height: vh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in vh
+@function vh($number) {
+    @return calc(#{$number} * var(--vh, 1vh));
+}
+
+// Returns calculation of a percentage of the viewport width.
+//
+// ```scss
+// .c-box {
+//     width: vw(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in vw
+
+@function vw($number) {
+    @return calc(#{$number} * var(--vw, 1vw));
+}
+
+// Returns clamp of calculated preferred responsive font size
+// within a font size and breakpoint range.
+//
+// ```scss
+// .c-heading.-h1 {
+//     font-size: responsive-type(30px, 60px, 1800);
+// }
+//
+// .c-heading.-h2 {
+//     font-size: responsive-type(20px, 40px, $from-big);
+// }
+// ```
+//
+// @param  {number} $min-size   - Minimum font size in pixels.
+// @param  {number} $max-size   - Maximum font size in pixels.
+// @param  {number} $breakpoint - Maximum breakpoint.
+// @return {function<number, function<number>, number>}
+@function responsive-type($min-size, $max-size, $breakpoint) {
+    $delta: math.div($max-size, $breakpoint);
+    @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
 }
--- a/assets/styles/tools/_maths.scss
+++ b/assets/styles/tools/_maths.scss
@@ -2,13 +2,18 @@
 // Tools / Maths
 // ==========================================================================

-// Removes the unit from the given number.
+// Remove the unit of a length
 //
-// @param  {number} $number The number to strip.
-// @return {number}
+// @param {Number} $number Number to remove unit from
+// @return {function<number>}
+@function strip-unit($value) {
+    @if type-of($value) != "number" {
+        @error "Invalid `#{type-of($value)}` type. Choose a number type instead.";
+    } @else if type-of($value) == "number" and not is-unitless($value) {
+        @return math.div($value, $value * 0 + 1);
+    }

-@function strip-units($number) {
-    @return math.div($number, ($number * 0 + 1));
+    @return $value;
 }

 // Returns the square root of the given number.
--- a/assets/styles/tools/_mixins.scss
+++ b/assets/styles/tools/_mixins.scss
@@ -193,3 +193,32 @@
    display: $display $important;
    visibility: visible  $important;
 }
+
+// Aspect-ratio polyfill
+//
+// @param  {Number}  $ratio     [19/6]  - The ratio of the element.
+// @param  {Number}  $width     [100%]  - The fallback width of element.
+// @param  {Boolean} $children  [false] - Whether the element contains children for the fallback properties.
+// @output Properties for maintaining aspect-ratio
+
+@mixin aspect-ratio($ratio: math.div(16, 9), $width: 100%, $children: false) {
+
+    @supports (aspect-ratio: 1) {
+        aspect-ratio: $ratio;
+    }
+
+    @supports not (aspect-ratio: 1) {
+        height: 0;
+        padding-top: calc(#{$width} * #{math.div(1, $ratio)});
+
+        @if ($children == true) {
+            position: relative;
+
+            > * {
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+}
--- a/assets/styles/utilities/_grid-column.scss
+++ b/assets/styles/utilities/_grid-column.scss
@@ -11,29 +11,31 @@

 $colsMax: $base-column-nb + 1;

-$breakpoints: (
-    "null" null,
-    "from-tiny" $from-tiny,
-    "from-small" $from-small,
-    "from-medium" $from-medium,
-    "from-large" $from-large,
-    "from-big" $from-big
-) !default;
-
@each $breakpoint, $mediaquery in $breakpoints {
    @for $fromIndex from 1 through $colsMax {
        @for $toIndex from 1 through $colsMax {
-            @if $mediaquery == null {
+
+            // Columns without media query
+            @if $breakpoint == "tiny" {
                .u-gc-#{$fromIndex}\/#{$toIndex} {
                    --gc-start: #{$fromIndex};
                    --gc-end: #{$toIndex};
                }
-            } @else {
-                .u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
-                    @media (min-width: #{$mediaquery}) {
-                        --gc-start: #{$fromIndex};
-                        --gc-end: #{$toIndex};
-                    }
+            }
+
+            // Columns min-width breakpoints `@from-*`
+            .u-gc-#{$fromIndex}\/#{$toIndex}\@from-#{$breakpoint} {
+                @media #{mq-min($breakpoint)} {
+                    --gc-start: #{$fromIndex};
+                    --gc-end: #{$toIndex};
+                }
+            }
+
+            // Columns max-width breakpoints @to-*`
+            .u-gc-#{$fromIndex}\/#{$toIndex}\@to-#{$breakpoint} {
+                @media #{mq-max($breakpoint)} {
+                    --gc-start: #{$fromIndex};
+                    --gc-end: #{$toIndex};
                }
            }
        }
--- a/assets/styles/utilities/_spacing.scss
+++ b/assets/styles/utilities/_spacing.scss
@@ -26,8 +26,8 @@ $spacing-directions: (
    '-right':      '-right',
    '-bottom':     '-bottom',
    '-left':       '-left',
-    '-horizontal': '-left' '-right',
-    '-vertical':   '-top'  '-bottom',
+    '-x':          '-left' '-right',
+    '-y':          '-top'  '-bottom',
 ) !default;

 $spacing-properties: (
@@ -35,19 +35,47 @@ $spacing-properties: (
    'margin':  'margin',
 ) !default;

-$spacing-sizes: (
-    null:     $unit,
-    '-double': $unit * 2,
-    '-small': $unit-small,
-    '-none':  0px
-) !default;
+$spacing-sizes: join($spacers, (
+    null:       var(--grid-gutter),
+    'none':    0
+));

-@each $property-namespace, $property in $spacing-properties {
-    @each $direction-namespace, $direction-rules in $spacing-directions {
-        @each $size-namespace, $size in $spacing-sizes {
-            .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
-                @each $direction in $direction-rules {
-                    #{$property}#{$direction}: rem($size) !important;
+@each $breakpoint, $mediaquery in $breakpoints {
+    @each $property-namespace, $property in $spacing-properties {
+        @each $direction-namespace, $directions in $spacing-directions {
+            @each $size-namespace, $size in $spacing-sizes {
+
+                // Prepend "-" to spacing sizes if not null
+                $size-namespace: if($size-namespace != null, "-" + $size-namespace, $size-namespace);
+
+                // Base class
+                $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
+
+                // Spacer without media query
+                @if $breakpoint == "tiny" {
+                    #{$base-class} {
+                        @each $direction in $directions {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
+                }
+
+                // Spacer min-width breakpoints `@from-*`
+                #{$base-class}\@from-#{$breakpoint} {
+                    @media #{mq-min($breakpoint)} {
+                        @each $direction in $directions {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
+                }
+
+                // Spacer max-width breakpoints @to-*`
+                #{$base-class}\@to-#{$breakpoint} {
+                    @media #{mq-max($breakpoint)} {
+                        @each $direction in $directions {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
                }
            }
        }
--- a/assets/images/sprite/.gitkeep
+++ b/assets/images/sprite/.gitkeep
--- a/build/tasks/concats.js
+++ b/build/tasks/concats.js
@@ -95,7 +95,7 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
     *     Defaults to the outfile name.
     * @return {Promise}
     */
-    loconfig.tasks.concats.forEach(async ({
+    loconfig.tasks.concats?.forEach(async ({
        includes,
        outfile,
        label = null
--- a/build/tasks/scripts.js
+++ b/build/tasks/scripts.js
@@ -65,7 +65,7 @@ export default async function compileScripts(esBuildOptions = null) {
     * @throws {TypeError} If outdir and outfile are missing.
     * @return {Promise}
     */
-    loconfig.tasks.scripts.forEach(async ({
+    loconfig.tasks.scripts?.forEach(async ({
        includes,
        outdir = '',
        outfile = '',
--- a/build/tasks/styles.js
+++ b/build/tasks/styles.js
@@ -11,7 +11,7 @@ import { merge } from '../utils/index.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { promisify } from 'node:util';
-import sass from 'sass';
+import * as sass from 'sass';
 import { PurgeCSS } from 'purgecss';

 const sassRender = promisify(sass.render);
@@ -60,10 +60,12 @@ export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions
 export const developmentStylesArgs = [
    developmentSassOptions,
    developmentPostCSSOptions,
+    false
 ];
 export const productionStylesArgs  = [
    productionSassOptions,
    productionPostCSSOptions,
+    true
 ];

 /**
@@ -80,7 +82,7 @@ export const productionStylesArgs  = [
 *     If `false`, PostCSS processing will be ignored.
 * @return {Promise}
 */
-export default async function compileStyles(sassOptions = null, postcssOptions = null) {
+export default async function compileStyles(sassOptions = null, postcssOptions = null, purge = true) {
    if (sassOptions == null) {
        sassOptions = productionSassOptions;
    } else if (
@@ -111,7 +113,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
     *     Defaults to the outfile name.
     * @return {Promise}
     */
-    loconfig.tasks.styles.forEach(async ({
+    loconfig.tasks.styles?.forEach(async ({
        infile,
        outfile,
        label = null
@@ -160,7 +162,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
            try {
                await writeFile(outfile, result.css).then(() => {
                    // Purge CSS once file exists.
-                    if (outfile) {
+                    if (outfile && purge) {
                        purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
                    }
                });
@@ -216,21 +218,27 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
 * @return {Promise}
 */
 async function purgeUnusedCSS(outfile, label) {
+    const contentFiles = loconfig.tasks.purgeCSS?.content;
+    if (!Array.isArray(contentFiles) || !contentFiles.length) {
+        return;
+    }
+
    label = label ?? basename(outfile);

    const timeLabel = `${label} purged in`;
    console.time(timeLabel);

-    const purgeCSSContentFiles = Array.from(loconfig.tasks.purgeCSS.content);
-
    const purgeCSSResults = await (new PurgeCSS()).purge({
-        content: purgeCSSContentFiles,
+        content: contentFiles,
        css: [ outfile ],
-        rejected: true,
-        defaultExtractor: (content) => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        fontFaces: true,
+        keyframes: true,
        safelist: {
-            standard: [ /^((?!\bu-gc-).)*$/ ]
-        }
+            // Keep all except .u-gc-* | .u-margin-* | .u-padding-*
+            standard: [ /^(((?!\bu-gc-).)*$ | (((?!\bu-margin-).)*$) | (((?!\bu-padding-).)*$))/ ]
+        },
+        variables: true,
    })

    for (let result of purgeCSSResults) {
--- a/build/tasks/svgs.js
+++ b/build/tasks/svgs.js
@@ -57,7 +57,7 @@ export default async function compileSVGs(mixerOptions = null) {
     *     Defaults to the outfile name.
     * @return {Promise}
     */
-    loconfig.tasks.svgs.forEach(async ({
+    loconfig.tasks.svgs?.forEach(async ({
        includes,
        outfile,
        label = null
--- a/build/tasks/versions.js
+++ b/build/tasks/versions.js
@@ -21,6 +21,8 @@ import {
 } from 'node:path';
 import readline from 'node:readline';

+export const REGEXP_SEMVER = /^(?<major>0|[1-9]\d*)\.(?<minor>0|[1-9]\d*)\.(?<patch>0|[1-9]\d*)(?:-(?<prerelease>(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?<buildmetadata>[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
+
 /**
 * @typedef  {object} VersionOptions
 * @property {string|number|null} prettyPrint   - A string or number to insert
@@ -111,7 +113,7 @@ export default async function bumpVersions(versionOptions = null) {
     * @param  {?string|number} [entry.pretty] - The white space to use to format the JSON file.
     * @return {Promise}
     */
-    loconfig.tasks.versions.forEach(({
+    loconfig.tasks.versions?.forEach(({
        outfile,
        label = null,
        ...options
@@ -135,32 +137,64 @@ export default async function bumpVersions(versionOptions = null) {
 /**
 * Creates a formatted version number or string.
 *
- * @param  {string} format - The version format.
+ * @param  {string}  format     - The version format.
+ * @param  {?string} [oldValue] - The old version value.
 * @return {string|number}
+ * @throws TypeError If the format or value are invalid.
 */
-function createVersionNumber(format) {
+function createVersionNumber(format, oldValue = null) {
    let [ type, modifier ] = format.split(':', 2);

    switch (type) {
        case 'hex':
        case 'hexadecimal':
-            modifier = Number.parseInt(modifier);
+            try {
+                modifier = Number.parseInt(modifier);

-            if (Number.isNaN(modifier)) {
-                modifier = 6;
+                if (Number.isNaN(modifier)) {
+                    modifier = 6;
+                }
+
+                return randomBytes(modifier).toString('hex');
+            } catch (err) {
+                throw new TypeError(
+                    `${err.message} for \'format\' type "hexadecimal"`,
+                    { cause: err }
+                );
            }

-            return randomBytes(modifier).toString('hex');
+        case 'inc':
+        case 'increment':
+            try {
+                if (modifier === 'semver') {
+                    return incrementSemVer(oldValue, [ 'buildmetadata', 'patch' ]);
+                }
+
+                return incrementNumber(oldValue, modifier);
+            } catch (err) {
+                throw new TypeError(
+                    `${err.message} for \'format\' type "increment"`,
+                    { cause: err }
+                );
+            }

        case 'regex':
-            return new RegExp(modifier);
+        case 'regexp':
+            try {
+                return new RegExp(modifier);
+            } catch (err) {
+                throw new TypeError(
+                    `${err.message} for \'format\' type "regexp"`,
+                    { cause: err }
+                );
+            }

        case 'timestamp':
            return Date.now().valueOf();
    }

    throw new TypeError(
-        'Expected \'format\' to be either "timestamp" or "hexadecimal"'
+        'Expected \'format\' to be either "timestamp", "increment", or "hexadecimal"'
    );
 }

@@ -221,9 +255,7 @@ async function handleBumpVersionInJson(outfile, label, options) {
        await mkdir(dirname(outfile), { recursive: true });
    }

-    const version = createVersionNumber(options.format);
-
-    json[options.key] = version;
+    json[options.key] = createVersionNumber(options.format, json?.[options.key]);

    return await writeFile(
        outfile,
@@ -254,7 +286,7 @@ async function handleBumpVersionWithRegExp(outfile, label, options) {
            input: createReadStream(bckfile),
        });

-        const version = createVersionNumber(options.format);
+        let newVersion = null;

        const writeStream = createWriteStream(outfile, { encoding: 'utf8' });

@@ -262,12 +294,12 @@ async function handleBumpVersionWithRegExp(outfile, label, options) {
            const found = line.match(options.key);

            if (found) {
-                const groups  = (found.groups ?? {});
-                const replace = found[0].replace(
-                    (groups.build ?? groups.version ?? found[1] ?? found[0]),
-                    version
-                );
-                line = line.replace(found[0], replace);
+                const groups      = (found.groups ?? {});
+                const oldVersion  = (groups.build ?? groups.version ?? found[1] ?? found[0]);
+                const newVersion  = createVersionNumber(options.format, oldVersion);
+                const replacement = found[0].replace(oldVersion, newVersion);
+
+                line = line.replace(found[0], replacement);
            }

            writeStream.write(line + "\n");
@@ -285,6 +317,88 @@ async function handleBumpVersionWithRegExp(outfile, label, options) {
    }
 }

+/**
+ * Increments the given integer.
+ *
+ * @param  {string|int} value         - The number to increment.
+ * @param  {string|int} [increment=1] - The amount to increment by.
+ * @return {int}
+ * @throws TypeError If the version number is invalid.
+ */
+function incrementNumber(value, increment = 1) {
+    const version = Number.parseInt(value);
+    if (Number.isNaN(version)) {
+        throw new TypeError(
+            `Expected an integer version number, received [${value}]`
+        );
+    }
+
+    increment = Number.parseInt(increment);
+    if (Number.isNaN(increment)) {
+        throw new TypeError(
+            'Expected an integer increment number'
+        );
+    }
+
+    return (version + increment);
+}
+
+/**
+ * Increments the given SemVer version number.
+ *
+ * @param  {string}          value     - The version to mutate.
+ * @param  {string|string[]} [target]  - The segment to increment, one of:
+ *     'major', 'minor', 'patch', ~~'prerelease'~~, 'buildmetadata'.
+ * @param  {string|int}      [increment=1] - The amount to increment by.
+ * @return {string}
+ * @throws TypeError If the version or target are invalid.
+ */
+function incrementSemVer(value, target = 'patch', increment = 1) {
+    const found = value.match(REGEXP_SEMVER);
+    if (!found) {
+        throw new TypeError(
+            `Expected a SemVer version number, received [${value}]`
+        );
+    }
+
+    if (Array.isArray(target)) {
+        for (const group of target) {
+            if (found.groups[group] != null) {
+                target = group;
+                break;
+            }
+        }
+    }
+
+    if (!target || !found.groups[target]) {
+        throw new TypeError(
+            `Expected a supported SemVer segment, received [${target}]`
+        );
+    }
+
+    const segments = {
+        'major':         '',
+        'minor':         '.',
+        'patch':         '.',
+        'prerelease':    '-',
+        'buildmetadata': '+',
+    };
+
+    let replacement = '';
+
+    for (const [ segment, delimiter ] of Object.entries(segments)) {
+        if (found.groups?.[segment] != null) {
+            const newVersion = (segment === target)
+                ? incrementNumber(found.groups[segment], increment)
+                : found.groups[segment];
+
+            replacement += `${delimiter}${newVersion}`;
+        }
+    }
+
+    return value.replace(found[0], replacement);
+}
+
 /**
 * Parses the version key.
 *
--- a/build/watch.js
+++ b/build/watch.js
@@ -70,16 +70,18 @@ function configureServer(server, { paths, tasks }) {
    });

    // Watch source concats
-    server.watch(
-        resolve(
-            tasks.concats.reduce(
-                (patterns, { includes }) => patterns.concat(includes),
-                []
+    if (tasks.concats?.length) {
+        server.watch(
+            resolve(
+                tasks.concats.reduce(
+                    (patterns, { includes }) => patterns.concat(includes),
+                    []
+                )
            )
-        )
-    ).on('change', () => {
-        concatFiles(...developmentConcatFilesArgs);
-    });
+        ).on('change', () => {
+            concatFiles(...developmentConcatFilesArgs);
+        });
+    }

    // Watch source styles
    server.watch(
--- a/docs/development.md
+++ b/docs/development.md
@@ -338,8 +338,8 @@ See [`svgs.js`](../build/tasks/svgs.js) for details.

 A task to create and update values for use in versioning assets.

-Can generate a hexadecimal value (using random bytes) or
-use the current timestamp.
+Can generate a hexadecimal value (using random bytes), use the current timestamp,
+or increment a number.

 Example:

@@ -355,6 +355,11 @@ Example:
            "format": "hex:8",
            "key": "hex",
            "outfile": "./assets.json"
+        },
+        {
+            "format": "inc:semver",
+            "key": "inc",
+            "outfile": "./assets.json"
        }
    ]
 }
@@ -363,7 +368,8 @@ Example:
 ```json
 {
    "now": 1665071717350,
-    "hex": "6ef54181c4ba"
+    "hex": "6ef54181c4ba",
+    "hex": "1.0.2"
 }
 ```

--- a/docs/technologies.md
+++ b/docs/technologies.md
@@ -181,10 +181,7 @@ detection and smooth scrolling with parallax.
 ```js
 import LocomotiveScroll from 'locomotive-scroll';

-this.scroll = new LocomotiveScroll({
-    el: this.el,
-    smooth: true
-});
+this.scroll = new LocomotiveScroll({})
 ````

 Learn more about [Locomotive Scroll][locomotive-scroll].
--- a/loconfig.json
+++ b/loconfig.json
@@ -15,7 +15,7 @@
            "dest": "./www/assets/scripts"
        },
        "svgs": {
-            "src": "./assets/images/sprite",
+            "src": "./assets/svgs",
            "dest": "./www/assets/images"
        },
        "views": {
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
            "name": "@locomotivemtl/boilerplate",
            "version": "1.0.0",
            "dependencies": {
-                "locomotive-scroll": "^4.1.4",
+                "locomotive-scroll": "^5.0.0-beta.9",
                "modujs": "^1.4.2",
                "modularload": "^1.2.6",
                "normalize.css": "^8.0.1",
@@ -23,7 +23,7 @@
                "node-notifier": "^10.0.1",
                "postcss": "^8.4.21",
                "purgecss": "^5.0.0",
-                "sass": "^1.57.1",
+                "sass": "^1.69.5",
                "svg-mixer": "~2.3.14",
                "tiny-glob": "^0.2.9"
            },
@@ -390,6 +390,11 @@
            "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
            "dev": true
        },
+        "node_modules/@studio-freight/lenis": {
+            "version": "1.0.27",
+            "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.27.tgz",
+            "integrity": "sha512-1I6EaWR9rxdFjIJtF52CtETJt9ngfY4AjawrJY5pLxCvHa/lQZ+1v2gTUntwNZkuks6E2It6YEXV6jnpnCZFjA=="
+        },
        "node_modules/@types/cookie": {
            "version": "0.4.1",
            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -686,11 +691,6 @@
            "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
            "dev": true
        },
-        "node_modules/bezier-easing": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
-            "integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
-        },
        "node_modules/binary-extensions": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -700,11 +700,6 @@
                "node": ">=8"
            }
        },
-        "node_modules/bindall-standalone": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz",
-            "integrity": "sha1-90MDiPHH+amt4Px1pADnEPZpKh0="
-        },
        "node_modules/brace-expansion": {
            "version": "1.1.11",
            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1590,9 +1585,9 @@
            }
        },
        "node_modules/engine.io": {
-            "version": "6.4.0",
-            "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.0.tgz",
-            "integrity": "sha512-OgxY1c/RuCSeO/rTr8DIFXx76IzUUft86R7/P7MMbbkuzeqJoTNw2lmeD91IyGz41QYleIIjWeMJGgug043sfQ==",
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
+            "integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
            "dev": true,
            "dependencies": {
                "@types/cookie": "^0.4.1",
@@ -2708,11 +2703,6 @@
                "node": ">=6"
            }
        },
-        "node_modules/lethargy": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz",
-            "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg=="
-        },
        "node_modules/limiter": {
            "version": "1.1.5",
            "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
@@ -2802,13 +2792,14 @@
            }
        },
        "node_modules/locomotive-scroll": {
-            "version": "4.1.4",
-            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz",
-            "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==",
+            "version": "5.0.0-beta.9",
+            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-5.0.0-beta.9.tgz",
+            "integrity": "sha512-sxVCWnQGXH6awe/kEuFHxnHZ0pu5KwW9v9R5urF3WZWI12WIpvVDJOzd3oaas6NaQTP8uHOvJIQMpXrXd9X4yA==",
            "dependencies": {
-                "bezier-easing": "^2.1.0",
-                "smoothscroll-polyfill": "^0.4.4",
-                "virtual-scroll": "^1.5.2"
+                "@studio-freight/lenis": "1.0.27"
+            },
+            "engines": {
+                "node": ">=17"
            }
        },
        "node_modules/lodash": {
@@ -3163,6 +3154,7 @@
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+            "dev": true,
            "engines": {
                "node": ">=0.10.0"
            }
@@ -3882,9 +3874,9 @@
            "dev": true
        },
        "node_modules/sass": {
-            "version": "1.57.1",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
-            "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+            "version": "1.69.5",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+            "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
            "dev": true,
            "dependencies": {
                "chokidar": ">=3.0.0 <4.0.0",
@@ -3895,7 +3887,7 @@
                "sass": "sass.js"
            },
            "engines": {
-                "node": ">=12.0.0"
+                "node": ">=14.0.0"
            }
        },
        "node_modules/sass/node_modules/immutable": {
@@ -4113,11 +4105,6 @@
            "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
            "dev": true
        },
-        "node_modules/smoothscroll-polyfill": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
-            "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg=="
-        },
        "node_modules/snapdragon": {
            "version": "0.8.2",
            "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -4344,9 +4331,9 @@
            "dev": true
        },
        "node_modules/socket.io-parser": {
-            "version": "4.2.2",
-            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz",
-            "integrity": "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+            "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
            "dev": true,
            "dependencies": {
                "@socket.io/component-emitter": "~3.1.0",
@@ -4814,11 +4801,6 @@
                "node": ">=0.8.0"
            }
        },
-        "node_modules/tiny-emitter": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz",
-            "integrity": "sha1-bchFBSywjr78GHRyO1jySmSMO28="
-        },
        "node_modules/tiny-glob": {
            "version": "0.2.9",
            "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -5108,17 +5090,6 @@
                "node": ">= 0.8"
            }
        },
-        "node_modules/virtual-scroll": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz",
-            "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==",
-            "dependencies": {
-                "bindall-standalone": "^1.0.5",
-                "lethargy": "^1.0.2",
-                "object-assign": "^4.0.1",
-                "tiny-emitter": "^1.0.0"
-            }
-        },
        "node_modules/which": {
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5420,6 +5391,11 @@
            "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
            "dev": true
        },
+        "@studio-freight/lenis": {
+            "version": "1.0.27",
+            "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.27.tgz",
+            "integrity": "sha512-1I6EaWR9rxdFjIJtF52CtETJt9ngfY4AjawrJY5pLxCvHa/lQZ+1v2gTUntwNZkuks6E2It6YEXV6jnpnCZFjA=="
+        },
        "@types/cookie": {
            "version": "0.4.1",
            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -5641,22 +5617,12 @@
            "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
            "dev": true
        },
-        "bezier-easing": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
-            "integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
-        },
        "binary-extensions": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
            "dev": true
        },
-        "bindall-standalone": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz",
-            "integrity": "sha1-90MDiPHH+amt4Px1pADnEPZpKh0="
-        },
        "brace-expansion": {
            "version": "1.1.11",
            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6354,9 +6320,9 @@
            "dev": true
        },
        "engine.io": {
-            "version": "6.4.0",
-            "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.0.tgz",
-            "integrity": "sha512-OgxY1c/RuCSeO/rTr8DIFXx76IzUUft86R7/P7MMbbkuzeqJoTNw2lmeD91IyGz41QYleIIjWeMJGgug043sfQ==",
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
+            "integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
            "dev": true,
            "requires": {
                "@types/cookie": "^0.4.1",
@@ -7221,11 +7187,6 @@
            "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
            "dev": true
        },
-        "lethargy": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz",
-            "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg=="
-        },
        "limiter": {
            "version": "1.1.5",
            "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
@@ -7297,13 +7258,11 @@
            }
        },
        "locomotive-scroll": {
-            "version": "4.1.4",
-            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz",
-            "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==",
+            "version": "5.0.0-beta.9",
+            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-5.0.0-beta.9.tgz",
+            "integrity": "sha512-sxVCWnQGXH6awe/kEuFHxnHZ0pu5KwW9v9R5urF3WZWI12WIpvVDJOzd3oaas6NaQTP8uHOvJIQMpXrXd9X4yA==",
            "requires": {
-                "bezier-easing": "^2.1.0",
-                "smoothscroll-polyfill": "^0.4.4",
-                "virtual-scroll": "^1.5.2"
+                "@studio-freight/lenis": "1.0.27"
            }
        },
        "lodash": {
@@ -7588,7 +7547,8 @@
        "object-assign": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+            "dev": true
        },
        "object-copy": {
            "version": "0.1.0",
@@ -8150,9 +8110,9 @@
            "dev": true
        },
        "sass": {
-            "version": "1.57.1",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
-            "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+            "version": "1.69.5",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+            "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
            "dev": true,
            "requires": {
                "chokidar": ">=3.0.0 <4.0.0",
@@ -8350,11 +8310,6 @@
            "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
            "dev": true
        },
-        "smoothscroll-polyfill": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
-            "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg=="
-        },
        "snapdragon": {
            "version": "0.8.2",
            "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -8547,9 +8502,9 @@
            }
        },
        "socket.io-parser": {
-            "version": "4.2.2",
-            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz",
-            "integrity": "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+            "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
            "dev": true,
            "requires": {
                "@socket.io/component-emitter": "~3.1.0",
@@ -8912,11 +8867,6 @@
                }
            }
        },
-        "tiny-emitter": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz",
-            "integrity": "sha1-bchFBSywjr78GHRyO1jySmSMO28="
-        },
        "tiny-glob": {
            "version": "0.2.9",
            "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -9127,17 +9077,6 @@
            "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
            "dev": true
        },
-        "virtual-scroll": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz",
-            "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==",
-            "requires": {
-                "bindall-standalone": "^1.0.5",
-                "lethargy": "^1.0.2",
-                "object-assign": "^4.0.1",
-                "tiny-emitter": "^1.0.0"
-            }
-        },
        "which": {
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
        "build": "node --experimental-json-modules --no-warnings build/build.js"
    },
    "dependencies": {
-        "locomotive-scroll": "^4.1.4",
+        "locomotive-scroll": "^5.0.0-beta.9",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "normalize.css": "^8.0.1",
@@ -29,7 +29,7 @@
        "node-notifier": "^10.0.1",
        "postcss": "^8.4.21",
        "purgecss": "^5.0.0",
-        "sass": "^1.57.1",
+        "sass": "^1.69.5",
        "svg-mixer": "~2.3.14",
        "tiny-glob": "^0.2.9"
    },
--- a/www/assets/scripts/app.js
+++ b/www/assets/scripts/app.js
--- a/www/assets/scripts/app.js.map
+++ b/www/assets/scripts/app.js.map
--- a/www/assets/styles/main.css
+++ b/www/assets/styles/main.css
--- a/www/assets/styles/main.css.map
+++ b/www/assets/styles/main.css.map
--- a/www/form.html
+++ b/www/form.html
@@ -18,8 +18,8 @@
    </head>
    <body data-module-load>
        <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
+            <div data-module-scroll="main">
+                <header>
                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
                    <nav>
                        <ul>
@@ -30,7 +30,7 @@
                    </nav>
                </header>

-                <main data-scroll-section>
+                <main>
                    <div class="o-container">
                        <h1 class="c-heading -h1">Page</h1>

@@ -90,7 +90,7 @@
                    </div>
                </main>

-                <footer data-scroll-section>
+                <footer>
                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                </footer>
            </div>
--- a/www/grid.html
+++ b/www/grid.html
@@ -34,8 +34,8 @@

 <body data-module-load>
    <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                <a href="/">
                    <h1>Locomotive Boilerplate</h1>
                </a>
@@ -48,7 +48,7 @@
                </nav>
            </header>

-            <main data-scroll-section>
+            <main>
                <div class="o-container">
                    <h1 class="c-heading -h1">Hello</h1>

@@ -76,7 +76,7 @@
                </div>
            </main>

-            <footer data-scroll-section>
+            <footer>
                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
            </footer>
--- a/www/images.html
+++ b/www/images.html
@@ -18,8 +18,8 @@
    </head>
    <body data-module-load>
        <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
+            <div data-module-scroll="main">
+                <header>
                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
                    <nav>
                        <ul>
@@ -30,7 +30,7 @@
                    </nav>
                </header>

-                <main data-scroll-section>
+                <main>
                    <div class="o-container">
                        <h1 class="c-heading -h1">Images</h1>

@@ -116,7 +116,7 @@
                    </div>
                </main>

-                 <footer data-scroll-section>
+                 <footer>
                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                </footer>
            </div>
--- a/www/index.html
+++ b/www/index.html
@@ -42,8 +42,8 @@
 <body data-module-load>

    <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                <a href="/">
                    <h1>Locomotive Boilerplate</h1>
                </a>
@@ -56,13 +56,13 @@
                </nav>
            </header>

-            <main data-module-example data-scroll-section>
+            <main data-module-example>
                <div class="o-container">
                    <h1 class="c-heading -h1">Hello</h1>
                </div>
            </main>

-            <footer data-scroll-section>
+            <footer>
                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
            </footer>
Author	SHA1	Message	Date
Lucas Vallenet	7021666c46	Add dedicated svg folder	2023-12-11 11:43:16 +01:00
Lucas	43c86c3b50	Merge pull request #160 from butterfail/greg/invlerp Fix invlerp method	2023-12-11 11:10:26 +01:00
Lucas Vallenet	0b4c82ceda	Add scss-config dedicated files	2023-12-11 11:02:54 +01:00
Lucas Vallenet	b72fdabe23	Add default z-index value	2023-12-11 11:00:21 +01:00
Lucas Vallenet	f1ebc27a69	Add aspect-ratio scss mixin	2023-12-11 10:58:24 +01:00
Grégoire Ciles	f2898c8c8e	Fix invlerp method	2023-11-29 12:27:01 +01:00
Lucas Vallenet	12d65db09f	Reverse aspect-ratio condition	2023-11-29 11:10:32 +01:00
Lucas Vallenet	657fd41f70	Update config functions: alpha parameter for colors, multiplier parameter for spacers	2023-11-21 10:03:17 +01:00
Deven Caron	65c486b910	Update locomotive-scroll to `v5.0.0-beta.9`	2023-11-15 13:55:25 -05:00
Deven Caron	3d0e4d26a2	Update sass version to `1.69.5`	2023-11-15 13:53:04 -05:00
Chauncey McAskill	df1a3a6f3c	Update sass import in styles.js	2023-09-08 17:11:27 -04:00
Lucas Vallenet	7f1b6dad2e	Fix device detection on config.js	2023-09-05 09:40:19 +02:00
Lucas Vallenet	63e46cde26	Comment updates	2023-09-05 09:34:24 +02:00
Lucas Vallenet	6564fb330a	Update eases names to match gsap / Add default vars for z-indexes, timings and eases	2023-09-05 09:31:56 +02:00
Chauncey McAskill	b5753148f1	Improve asset versioning task Add support for "increment" format to increment an integer version number with support for "increment:semver" to increment the build or patch of a SemVer version number. Usage: ```json "versions": [ { "format": "increment", "key": "version", "outfile": "assets.json" } ] ``` ```jsonc { "version": 16 // → 17 } ``` ```json "versions": [ { "format": "increment:semver", "key": "version", "outfile": "assets.json" } ] ``` ```jsonc { "version": "1.0.0" // → 1.0.1 } ``` ```jsonc { "version": "1.0.0+1" // → 1.0.0+2 } ```	2023-08-14 16:56:01 -04:00
Lucas Vallenet	7b415af8c2	Fix comments	2023-08-14 10:56:14 +02:00
Lucas Vallenet	dc0bc2042c	Create aspect-ratio SCSS mixin polyfill	2023-08-14 10:40:24 +02:00
Chauncey McAskill	e9dbb03207	Fix support for undefined tasks in watch.js Amends `596ff7a8ee`	2023-08-10 11:01:50 -04:00
Chauncey McAskill	95caf9ebb5	Replace `window.onload` with `window.addEventListener()` Since the `window` can only ever have one `onload` value, if ever a third-party script overwrites this property, the application risks never initializing. By using `addEventListener('load',…)`, the application's bootstrapping logic is queued and is more likely to be initialized.	2023-08-08 15:34:01 -04:00
Chauncey McAskill	596ff7a8ee	Fix support for undefined tasks For example, if there are no `concats` tasks defined in 'loconfig.json', avoid throwing an error.	2023-08-08 14:49:47 -04:00
Deven Caron	70b36052e6	Merge pull request #154 from locomotivemtl/dependabot/npm_and_yarn/socket.io-parser-4.2.4 Bump socket.io-parser from 4.2.2 to 4.2.4	2023-07-31 10:56:07 -04:00
dependabot[bot]	f1e2e2270f	Bump socket.io-parser from 4.2.2 to 4.2.4 Bumps [socket.io-parser](https://github.com/socketio/socket.io-parser) from 4.2.2 to 4.2.4. - [Release notes](https://github.com/socketio/socket.io-parser/releases) - [Changelog](https://github.com/socketio/socket.io-parser/blob/main/CHANGELOG.md) - [Commits](https://github.com/socketio/socket.io-parser/compare/4.2.2...4.2.4) --- updated-dependencies: - dependency-name: socket.io-parser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-07-31 14:30:51 +00:00
Deven Caron	13735c64f9	Merge pull request #153 from locomotivemtl/feature/update-scroll Update locomotive scroll v5	2023-07-31 10:30:17 -04:00
Deven Caron	659ef3767b	Fix img scroll lazyload $el	2023-07-31 10:29:02 -04:00
Deven Caron	e162af17dd	Update LS styles vendor import	2023-07-31 10:28:35 -04:00
Lucas Vallenet	93559a0c84	Add purgeCSS for .u-padding and .u-margin classes \| Disable purge on development	2023-07-10 15:40:56 +02:00
Lucas Vallenet	c1bcf7fb0d	Fix spacing loop	2023-06-16 10:13:10 +02:00
Lucas Vallenet	d0fcfaac86	Add config.spacers and modify spacing function to add breakpoint based spacers.	2023-06-15 17:28:29 +02:00
Lucas Vallenet	4a958c5fb5	Update grid-column loop with config.breakpoints list and media query functions. Add @to-* modifier	2023-06-15 17:28:06 +02:00
Lucas Vallenet	5e7e92c7f5	Rename z-indexes config / Update easing comment / Move font-face include to document.scss	2023-06-12 16:50:40 +02:00
Lucas Vallenet	380fbd40c3	Update comments	2023-06-12 16:21:57 +02:00
Lucas Vallenet	e16ba2ca16	Import locomotive scroll CSS / Removed unused styles (scroll, scorllbar) / Update DOM Markup / Update doc	2023-06-12 09:36:14 +02:00
Lucas Vallenet	43a5eb1ad3	Update locomotive scroll v5	2023-06-08 15:44:35 +02:00
Lucas Vallenet	99801a2d8b	Add dedicated scss config files	2023-06-08 11:48:00 +02:00
Lucas Vallenet	217a1adba7	Merge scss functions / Fix strip-unit	2023-06-08 10:57:59 +02:00
Lucas Vallenet	a11e98e31e	Fix js FONT var error	2023-05-22 09:48:34 +02:00
Deven Caron	6ef90dbe11	Merge pull request #149 from locomotivemtl/dependabot/npm_and_yarn/engine.io-6.4.2 Bump engine.io from 6.4.0 to 6.4.2	2023-05-12 10:41:24 -04:00
Deven Caron	6726d665f2	Merge pull request #148 from locomotivemtl/feature/scss-colors Color as list	2023-05-12 10:39:38 -04:00
dependabot[bot]	dcec21adf4	Bump engine.io from 6.4.0 to 6.4.2 Bumps [engine.io](https://github.com/socketio/engine.io) from 6.4.0 to 6.4.2. - [Release notes](https://github.com/socketio/engine.io/releases) - [Changelog](https://github.com/socketio/engine.io/blob/main/CHANGELOG.md) - [Commits](https://github.com/socketio/engine.io/compare/6.4.0...6.4.2) --- updated-dependencies: - dependency-name: engine.io dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-05-04 01:31:42 +00:00
Lucas Vallenet	be71474633	Remove duplicate / Update functions descriptions	2023-01-05 09:58:01 +01:00
Lucas Vallenet	810df92a61	Fix functions.scss error	2023-01-04 14:41:25 +01:00
Lucas Vallenet	bf28fe21a3	Strip breakpoint unit from responsive-type	2023-01-04 11:02:32 +01:00
Lucas Vallenet	7b3cefd8df	Add usefull scss functions	2023-01-04 10:50:36 +01:00