Add default image snippet

[Button] Change classes and modifiers method
Add basic styleguide to index
2026-01-15 00:55:08 +08:00 · 2024-03-29 11:14:01 -04:00 · 2024-03-29 11:13:45 -04:00 · 2024-03-29 10:56:00 -04:00 · 2024-03-29 10:36:14 -04:00 · 2024-03-29 10:36:04 -04:00
58 changed files with 5533 additions and 5928 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,16 @@ node_modules
 Thumbs.db
 loconfig.*.json
 !loconfig.example.json
-.prettierrc
+.prettierrc
+www/**/*.html
+
+www/assets/scripts/app.js
+www/assets/scripts/app.js.map
+www/assets/scripts/vendors.js
+
+www/assets/styles/main.css
+www/assets/styles/main.css.map
+www/assets/styles/critical.css
+www/assets/styles/critical.css.map
+
+assets.json
--- a/assets.json
+++ b/assets.json
@@ -1,3 +0,0 @@
-{
-    "version": 1706549368176
-}
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -10,7 +10,73 @@ const app = new modular({
    modules,
 });

-const setViewportSizes = () => {
+function init() {
+    bindEvents();
+    globals();
+    setViewportSizes();
+
+    app.init(app);
+
+    $html.classList.add(CSS_CLASS.LOADED, CSS_CLASS.READY);
+    $html.classList.remove(CSS_CLASS.LOADING);
+
+    /**
+     * Debug focus
+     */
+    // document.addEventListener(
+    //     "focusin",
+    //     function () {
+    //         console.log('focused: ', document.activeElement)
+    //     }, true
+    // );
+
+    /**
+     * Eagerly load the following fonts.
+     */
+    if (isFontLoadingAPIAvailable) {
+        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
+            $html.classList.add(CSS_CLASS.FONTS_LOADED);
+
+            /**
+             * Debug fonts loading
+             */
+            // if (ENV.IS_DEV) {
+            //     console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
+            //     console.group('State of eager fonts:');
+            //     eagerFonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
+            //     console.groupEnd();
+            //     console.group('State of all fonts:');
+            //     document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
+            //     console.groupEnd();
+            // }
+        });
+    }
+}
+
+////////////////
+// Global events
+////////////////
+function bindEvents() {
+
+    // Resize event
+    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
+    window.addEventListener(
+        "resize",
+        debounce(() => {
+            window.dispatchEvent(resizeEndEvent)
+        }, 200, false)
+    )
+    window.addEventListener(
+        "resize",
+        onResize
+    )
+}
+
+function onResize() {
+    setViewportSizes()
+}
+
+function setViewportSizes() {

    // Document styles
    const documentStyles = document.documentElement.style;
@@ -25,10 +91,10 @@ const setViewportSizes = () => {
    }

    // Viewport height
-    const height = window.innerHeight;
    const svh = document.documentElement.clientHeight * 0.01;
    documentStyles.setProperty('--svh', `${svh}px`);
-    const dvh = height * 0.01;
+
+    const dvh = window.innerHeight * 0.01;
    documentStyles.setProperty('--dvh', `${dvh}px`);

    if (document.body) {
@@ -53,6 +119,9 @@ const setViewportSizes = () => {
    }
 }

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

@@ -66,46 +135,3 @@ window.addEventListener('load', () => {
        console.warn('The "main-css" stylesheet not found');
    }
 });
-
-function init() {
-    globals();
-    setViewportSizes();
-
-    app.init(app);
-
-    $html.classList.add(CSS_CLASS.LOADED);
-    $html.classList.add(CSS_CLASS.READY);
-    $html.classList.remove(CSS_CLASS.LOADING);
-
-    // Bind window resize event with default vars
-    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END);
-    window.addEventListener('resize', () => {
-        setViewportSizes();
-        debounce(() => {
-            window.dispatchEvent(resizeEndEvent);
-        }, 200, false)
-    })
-
-    window.addEventListener('orientationchange', () => {
-        setViewportSizes();
-    })
-
-    /**
-     * Eagerly load the following fonts.
-     */
-    if (isFontLoadingAPIAvailable) {
-        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
-            $html.classList.add(CSS_CLASS.FONTS_LOADED);
-
-            if (ENV.IS_DEV) {
-                console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
-                console.group('State of eager fonts:');
-                eagerFonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
-                console.groupEnd();
-                console.group('State of all fonts:');
-                document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
-                console.groupEnd();
-            }
-        });
-    }
-}
--- a/assets/styles/elements/_document.scss
+++ b/assets/styles/elements/_document.scss
@@ -20,34 +20,26 @@ html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

-    @media (max-width: $to-small) {
+    @media (max-width: $to-sm) {
        font-size: $font-size - 2px;
    }

-    @media (min-width: $from-small) and (max-width: $to-medium) {
-        font-size: $font-size - 2px;
-    }
-
-    @media (min-width: $from-medium) and (max-width: $to-large) {
+    @media (min-width: $from-sm) and (max-width: $to-lg) {
        font-size: $font-size - 1px;
    }

-    @media (min-width: $from-large) and (max-width: $to-huge) {
-        font-size: $font-size; // [1]
+    @media (min-width: $from-lg) and (max-width: $to-2xl) {
+        font-size: $font-size;
    }

-    @media (min-width: $from-huge) and (max-width: $to-gigantic) {
+    @media (min-width: $from-2xl) and (max-width: $to-3xl) {
        font-size: $font-size + 1px;
    }

-    @media (min-width: $from-gigantic) and (max-width: $to-colossal) {
+    @media (min-width: $from-3xl) {
        font-size: $font-size + 2px;
    }

-    @media (min-width: $from-colossal) {
-        font-size: $font-size + 4px;
-    }
-
    &.is-loading {
        cursor: wait;
    }
--- a/assets/styles/elements/_normalize.scss
+++ b/assets/styles/elements/_normalize.scss
@@ -0,0 +1,124 @@
+// ==========================================================================
+// Elements / Normalize
+// ==========================================================================
+
+// Modern CSS Normalize
+// Based on the reset by Andy.set with some tweaks.
+// Original by Andy.set: https://piccalil.li/blog/a-more-modern-css-reset/
+// Review by Chris collier: https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
+
+
+// Box sizing rules
+*,
+*:after,
+*:before {
+    box-sizing: border-box;
+}
+
+// Prevent font size inflation
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+// Remove default margin in favour of better control in authored CSS
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl,
+dd,
+figure,
+blockquote {
+    margin-block: unset;
+}
+
+// Remove list styles on ul, ol elements with a class, which suggests default styling will be removed
+ul[class],
+ol[class] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+// Set core defaults
+html {
+    line-height: 1.5;
+}
+
+body {
+    margin: unset;
+}
+
+// Set shorter line heights on headings and interactive elements
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+label,
+button {
+    line-height: 1.1;
+}
+
+// Balance text wrapping on headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
+// Remove a elements default styles if they have a class
+a[class] {
+    color: inherit;
+    text-decoration: none;
+}
+
+// Make assets easier to work with
+img,
+svg,
+canvas,
+picture {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+select,
+textarea {
+    font: inherit;
+}
+
+// Make sure textareas without a rows attribute are not tiny
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+// Anything that has been anchored to should have extra scroll margin
+:target {
+    scroll-margin-block: 1rlh;
+}
+
+// Reduced mootion preference
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *:after,
+    *:before {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
--- a/assets/styles/generic/_button.scss
+++ b/assets/styles/generic/_button.scss
@@ -1,34 +0,0 @@
-// ==========================================================================
-// Generic / Buttons
-// ==========================================================================
-
-// 1. Allow us to style box model properties.
-// 2. Fixes odd inner spacing in IE7.
-// 3. Reset/normalize some styles.
-// 4. Line different sized buttons up a little nicer.
-// 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons).
-// 6. Force all button-styled elements to appear clickable.
-
-button,
-.c-button {
-    @include u-hocus {
-        text-decoration: none;
-    }
-
-    display: inline-block; // [1]
-    overflow: visible; // [2]
-    margin: 0; // [3]
-    padding: 0;
-    outline: 0;
-    border: 0;
-    background: none transparent;
-    color: inherit;
-    vertical-align: middle; // [4]
-    text-align: center; // [3]
-    text-decoration: none;
-    text-transform: none;
-    font: inherit; // [5]
-    line-height: normal;
-    cursor: pointer; // [6]
-    user-select: none;
-}
--- a/assets/styles/generic/_form.scss
+++ b/assets/styles/generic/_form.scss
@@ -1,44 +0,0 @@
-// ==========================================================================
-// Generic / Forms
-// ==========================================================================
-
-input,
-select,
-textarea {
-    display: block;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    outline: 0;
-    border: 0;
-    border-radius: 0;
-    background: none transparent;
-    color: inherit;
-    font: inherit;
-    line-height: normal;
-    appearance: none;
-}
-
-select {
-    text-transform: none;
-
-    &::-ms-expand {
-        display: none;
-    }
-
-    &::-ms-value {
-        background: none;
-        color: inherit;
-    }
-
-    // // Remove Firefox :focus dotted outline, breaks color inherit
-    // // &:-moz-focusring {
-    // //     color: transparent;
-    // //     text-shadow: 0 0 0 #000000; // Text :focus color
-    // // }
-}
-
-textarea {
-    overflow: auto;
-    resize: vertical;
-}
--- a/assets/styles/generic/_generic.scss
+++ b/assets/styles/generic/_generic.scss
@@ -1,87 +0,0 @@
-// ==========================================================================
-// Generic
-// ==========================================================================
-
-html {
-    box-sizing: border-box;
-}
-
-// Add the correct display in IE 10-.
-// 1. Add the correct display in IE.
-
-template, // [1]
-[hidden] {
-    display: none;
-}
-
-*,
-:before,
-:after {
-    box-sizing: inherit;
-}
-
-address {
-    font-style: inherit;
-}
-
-dfn,
-cite,
-em,
-i {
-    font-style: italic;
-}
-
-b,
-strong {
-    font-weight: $font-weight-bold;
-}
-
-a {
-    text-decoration: none;
-
-    svg {
-        pointer-events: none;
-    }
-}
-
-ul,
-ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-p,
-figure {
-    margin: 0;
-    padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-}
-
-// 1. Single taps should be dispatched immediately on clickable elements
-
-a, area, button, input, label, select, textarea, [tabindex] {
-    -ms-touch-action: manipulation; // [1]
-    touch-action: manipulation;
-}
-
-[hreflang] > abbr[title] {
-    text-decoration: none;
-}
-
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-
-hr {
-    display: block;
-    margin: 1em 0;
-    padding: 0;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #CCCCCC;
-}
--- a/assets/styles/generic/_media.scss
+++ b/assets/styles/generic/_media.scss
@@ -1,52 +0,0 @@
-// ==========================================================================
-// Generic / Media
-// ==========================================================================
-
-// 1. Setting `vertical-align` removes the whitespace that appears under `img`
-//    elements when they are dropped into a page as-is. Safer alternative to
-//    using `display: block;`.
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-    vertical-align: middle; // [1]
-}
-
-// Add the correct display in iOS 4-7.
-
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-// 2. Fluid media for responsive purposes.
-
-img,
-svg {
-    max-width: 100%; // [2]
-    height: auto;
-
-    // 4. If a `width` and/or `height` attribute have been explicitly defined,
-    //    let’s not make the image fluid.
-
-    &[width], // [4]
-    &[height] {
-        // [4]
-        max-width: none;
-    }
-}
-
-// 4. Offset `alt` text from surrounding copy.
-
-img {
-    font-style: italic; // [4]
-}
-
-// 5. SVG elements should fallback to their surrounding text color.
-
-svg {
-    fill: currentColor; // [5]
-}
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -20,25 +20,16 @@
 // Settings
 // ==========================================================================

+@import "settings/config";
@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.spacings";
+@import "settings/config.speeds";
@import "settings/config.zindexes";
-@import "settings/config";
@import "settings/config.variables";

-// Generic
-// ==========================================================================
-
-@import "node_modules/normalize.css/normalize";
-@import "generic/generic";
-@import "generic/media";
-@import "generic/form";
-@import "generic/button";
-
 // Vendors
 // ==========================================================================
@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
@@ -46,6 +37,7 @@
 // Elements
 // ==========================================================================

+@import "elements/normalize";
@import "elements/document";

 // Objects
--- a/assets/styles/objects/_grid.scss
+++ b/assets/styles/objects/_grid.scss
@@ -45,8 +45,8 @@
        grid-template-columns: repeat(4, 1fr);
    }

-    &.-col-#{$base-column-nb}\@from-medium {
-        @media (min-width: $from-medium) {
+    &.-col-#{$base-column-nb}\@from-md {
+        @media (min-width: $from-md) {
            grid-template-columns: repeat(#{$base-column-nb}, 1fr);
        }
    }
--- a/assets/styles/objects/_icons.scss
+++ b/assets/styles/objects/_icons.scss
@@ -48,7 +48,7 @@
 // // Logo
 // .svg-logo {
 //     --icon-width: #{rem(100px)};
-//     --icon-ratio: 20/30; // width/height based on svg viewBox
+//     --icon-ratio: math.div(20, 30); // width/height based on svg viewBox

 //     // Sizes
 //     .o-icon.-big & {
--- a/assets/styles/settings/_config.breakpoints.scss
+++ b/assets/styles/settings/_config.breakpoints.scss
@@ -6,15 +6,16 @@
 // ==========================================================================

 $breakpoints: (
-    "tiny":     500px,
-    "small":    700px,
-    "medium":   1000px,
-    "large":    1200px,
-    "big":      1400px,
-    "huge":     1600px,
-    "enormous": 1800px,
-    "gigantic": 2000px,
-    "colossal": 2400px
+    "2xs": 340px,
+    "xs":  500px,
+    "sm":  700px,
+    "md":  1000px,
+    "lg":  1200px,
+    "xl":  1400px,
+    "2xl": 1600px,
+    "3xl": 1800px,
+    "4xl": 2000px,
+    "5xl": 2400px
 );

 // Functions
@@ -75,21 +76,17 @@ $breakpoints: (
 // 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;
+$from-xs:  map-get($breakpoints, "xs")      !default;
+$to-xs:    map-get($breakpoints, "xs") - 1  !default;
+$from-sm:  map-get($breakpoints, "sm")      !default;
+$to-sm:    map-get($breakpoints, "sm") - 1  !default;
+$from-md:  map-get($breakpoints, "md")      !default;
+$to-md:    map-get($breakpoints, "md") - 1  !default;
+$from-lg:  map-get($breakpoints, "lg")      !default;
+$to-lg:    map-get($breakpoints, "lg") - 1  !default;
+$from-xl:  map-get($breakpoints, "xl")      !default;
+$to-xl:    map-get($breakpoints, "xl") - 1  !default;
+$from-2xl: map-get($breakpoints, "2xl")     !default;
+$to-2xl:   map-get($breakpoints, "2xl") - 1 !default;
+$from-3xl: map-get($breakpoints, "3xl")     !default;
+$to-3xl:   map-get($breakpoints, "3xl") - 1 !default;
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -32,12 +32,13 @@ $easing:    ease("power2.out");

 // Spacing Units
 // =============================================================================
-$unit:       60px;
-$unit-small: 20px;
+$unit:        60px;
+$unit-small:  20px;
+$vw-viewport: 1440;

 // Container
 // ==========================================================================
-$padding:         $unit;
+$padding:     $unit;

 // Grid
 // ==========================================================================
--- a/assets/styles/settings/_config.spacers.scss
+++ b/assets/styles/settings/_config.spacers.scss
@@ -1,40 +0,0 @@
-// ==========================================================================
-// 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.spacings.scss
+++ b/assets/styles/settings/_config.spacings.scss
@@ -0,0 +1,69 @@
+// ==========================================================================
+// Settings / Config / Spacings
+// ==========================================================================
+
+:root {
+    --spacing-2xs-mobile: 6;
+    --spacing-2xs-desktop: 10;
+
+    --spacing-xs-mobile: 12;
+    --spacing-xs-desktop: 16;
+
+    --spacing-sm-mobile: 22;
+    --spacing-sm-desktop: 32;
+
+    --spacing-md-mobile: 32;
+    --spacing-md-desktop: 56;
+
+    --spacing-lg-mobile: 48;
+    --spacing-lg-desktop: 96;
+
+    --spacing-xl-mobile: 64;
+    --spacing-xl-desktop: 128;
+
+    --spacing-2xl-mobile: 88;
+    --spacing-2xl-desktop: 176;
+
+    --spacing-3xl-mobile: 122;
+    --spacing-3xl-desktop: 224;
+}
+
+// Spacings
+// ==========================================================================
+
+$spacings: (
+    'gutter':   var(--grid-gutter),
+    '2xs':      #{size-clamp('2xs')},
+    'xs':       #{size-clamp('xs')},
+    'sm':       #{size-clamp('sm')},
+    'md':       #{size-clamp('md')},
+    'lg':       #{size-clamp('lg')},
+    'xl':       #{size-clamp('xl')},
+    '2xl':      #{size-clamp('2xl')},
+    '3xl':      #{size-clamp('3xl')},
+);
+
+// Function
+// ==========================================================================
+
+// Returns spacing.
+//
+// ```scss
+// .c-box {
+//     margin-top: spacing(gutter);
+// }
+// ```
+//
+// @param  {string} $key - The spacing key in $spacings.
+// @param  {number} $multiplier - The multiplier of the spacing value.
+// @return {size}
+
+@function spacing($spacing: 'sm', $multiplier: 1) {
+    @if not map-has-key($spacings, $spacing) {
+        @error "Unknown master spacing: #{$spacing}";
+    }
+
+    $index: map-get($spacings, $spacing);
+
+    @return calc(#{$index} * #{$multiplier});
+}
--- a/assets/styles/settings/_config.timings.scss
+++ b/assets/styles/settings/_config.timings.scss
@@ -1,23 +1,20 @@
 // ==========================================================================
-// Settings / Config / Timings
+// Settings / Config / Speeds
 // ==========================================================================

-// Timings
+// Speeds
 // ==========================================================================

-$timings: (
+$speeds: (
    fastest:    0.1s,
    faster:     0.15s,
    fast:       0.25s,
-    normal:     0.5s,
-    slow:       0.75s,
-    slower:     1s,
-    slowest:    2s,
+    normal:     0.3s,
+    slow:       0.5s,
+    slower:     0.75s,
+    slowest:    1s,
 );

-// Default timing for t()
-$timing-default: "normal" !default;
-
 // Function
 // ==========================================================================

@@ -25,17 +22,17 @@ $timing-default: "normal" !default;
 //
 // ```scss
 // .c-box {
-//     transition-duration: t(slow);
+//     transition-duration: speed(slow);
 // }
 // ```
 //
-// @param  {string} $key - The timing key in $timings.
+// @param  {string} $key - The speed key in $speeds.
 // @return {duration}

-@function t($key: $timing-default) {
-    @if not map-has-key($timings, $key) {
-        @error "Unknown '#{$key}' in $timings.";
+@function speed($key: "normal") {
+    @if not map-has-key($speeds, $key) {
+        @error "Unknown '#{$key}' in $speeds.";
    }

-    @return map-get($timings, $key);
+    @return map-get($speeds, $key);
 }
--- a/assets/styles/settings/_config.variables.scss
+++ b/assets/styles/settings/_config.variables.scss
@@ -25,7 +25,7 @@
    //     --color-#{"" + $color}: #{$value};
    // }

-    @media (min-width: $from-small) {
+    @media (min-width: $from-sm) {
        --grid-columns:     #{$base-column-nb};
        --grid-gutter:      #{rem(16px)};
        --grid-margin:      #{rem(20px)};
--- a/assets/styles/tools/_functions.scss
+++ b/assets/styles/tools/_functions.scss
@@ -48,17 +48,6 @@
    @return math.div($size, $base) * 1rem;
 }

-// Converts a number to a percentage.
-//
-// @alias  percentage()
-// @link   http://sassdoc.com/annotations/#alias
-// @param  {Number} $number - The value to convert.
-// @return {Number} A percentage.
-
-@function span($number) {
-    @return percentage($number);
-}
-
 // Checks if a list contains a value(s).
 //
 // @link   https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
@@ -125,11 +114,11 @@ $context: 'frontend' !default;
 // }
 // ```
 //
-// @param  {number} $number - The percentage spacer
-// @param  {number} $inset  - The grid gutter inset
+// @param  {number} $percentage - 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));
+    @return calc(#{$percentage} * (#{vw(100)} - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
 }

 // Returns calculation of a percentage of the viewport small height.
@@ -189,6 +178,19 @@ $context: 'frontend' !default;
    @return calc(#{$number} * var(--vw, 1vw));
 }

+@function clamp-with-max($min, $size, $max) {
+    $vw-context: $vw-viewport * 0.01;
+    @return clamp(#{$min}, calc(#{$size} / #{$vw-context} * 1vw), #{$max});
+}
+
+@function size-clamp($size) {
+    @return clamp-with-max(
+        calc(#{rem(1px)} * var(--spacing-#{$size}-mobile)),
+        var(--spacing-#{$size}-desktop),
+        calc(#{rem(1px)} * var(--spacing-#{$size}-desktop))
+    );
+}
+
 // Returns clamp of calculated preferred responsive font size
 // within a font size and breakpoint range.
 //
@@ -198,7 +200,7 @@ $context: 'frontend' !default;
 // }
 //
 // .c-heading.-h2 {
-//     font-size: responsive-type(20px, 40px, $from-big);
+//     font-size: responsive-type(20px, 40px, $from-xl);
 // }
 // ```
 //
--- a/assets/styles/utilities/_spacing.scss
+++ b/assets/styles/utilities/_spacing.scss
@@ -8,12 +8,11 @@
 ///
 /// @example
 ///   .u-margin-top {}
-///   .u-padding-left-large {}
-///   .u-margin-right-small {}
+///   .u-margin-top-xs {}
+///   .u-padding-left-lg {}
+///   .u-margin-right-sm {}
 ///   .u-padding {}
 ///   .u-padding-right-none {}
-///   .u-padding-horizontal {}
-///   .u-padding-vertical-small {}
 ///
 /// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss
 ////
@@ -35,7 +34,7 @@ $spacing-properties: (
    'margin':  'margin',
 ) !default;

-$spacing-sizes: join($spacers, (
+$spacing-sizes: join($spacings, (
    null:       var(--grid-gutter),
    'none':    0
 ));
@@ -51,8 +50,8 @@ $spacing-sizes: join($spacers, (
                // Base class
                $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};

-                // Spacer without media query
-                @if $breakpoint == "tiny" {
+                // Spacing without media query
+                @if $breakpoint == "xs" {
                    #{$base-class} {
                        @each $direction in $directions {
                            #{$property}#{$direction}: $size !important;
@@ -60,7 +59,7 @@ $spacing-sizes: join($spacers, (
                    }
                }

-                // Spacer min-width breakpoints `@from-*`
+                // Spacing min-width breakpoints `@from-*`
                #{$base-class}\@from-#{$breakpoint} {
                    @media #{mq-min($breakpoint)} {
                        @each $direction in $directions {
@@ -69,7 +68,7 @@ $spacing-sizes: join($spacers, (
                    }
                }

-                // Spacer max-width breakpoints @to-*`
+                // Spacing max-width breakpoints @to-*`
                #{$base-class}\@to-#{$breakpoint} {
                    @media #{mq-max($breakpoint)} {
                        @each $direction in $directions {
--- a/assets/styles/utilities/_states.scss
+++ b/assets/styles/utilities/_states.scss
@@ -46,14 +46,14 @@
    }
 }

-// .is-hidden\@to-large {
-//     @media (max-width: $to-large) {
+// .is-hidden\@to-lg {
+//     @media (max-width: $to-lg) {
 //         display: none;
 //     }
 // }
 //
-// .is-hidden\@from-large {
-//     @media (min-width: $from-large) {
+// .is-hidden\@from-lg {
+//     @media (min-width: $from-lg) {
 //         display: none;
 //     }
 // }
--- a/assets/styles/utilities/_widths.scss
+++ b/assets/styles/utilities/_widths.scss
@@ -21,8 +21,8 @@ $widths-fractions: 1 2 3 4 5 !default;

@include widths($widths-fractions);

-.u-1\/2\@from-small {
-    @media (min-width: $from-small) {
+.u-1\/2\@from-sm {
+    @media (min-width: $from-sm) {
        width: 50%;
    }
 }
--- a/assets/images/sprite/.gitkeep
+++ b/assets/images/sprite/.gitkeep
--- a/build/build.js
+++ b/build/build.js
@@ -1,9 +1,11 @@
+import buildEleventy from './tasks/eleventy.js';
 import concatFiles from './tasks/concats.js';
 import compileScripts from './tasks/scripts.js';
 import compileStyles from './tasks/styles.js';
 import compileSVGs from './tasks/svgs.js';
 import bumpVersions from './tasks/versions.js';

+buildEleventy();
 concatFiles();
 compileScripts();
 compileStyles();
--- a/build/tasks/eleventy.js
+++ b/build/tasks/eleventy.js
@@ -0,0 +1,50 @@
+import message from '../helpers/message.js';
+import { merge } from '../utils/index.js';
+import Eleventy from "@11ty/eleventy";
+
+export const defaultEleventyOptions = {
+    production: true
+}
+
+export const developmentEleventyOptions = {
+    production: false
+}
+
+export const productionEleventyOptions = {
+    production: true
+}
+
+let elev;
+export default async function buildEleventy(eleventyOptions = null) {
+    if (eleventyOptions == null) {
+        eleventyOptions = productionEleventyOptions;
+    } else if (
+        eleventyOptions !== developmentEleventyOptions &&
+        eleventyOptions !== productionEleventyOptions
+    ) {
+        eleventyOptions = merge({}, defaultEleventyOptions, eleventyOptions);
+    }
+
+    const { production } = eleventyOptions;
+    const timeLabel = `11ty compiled in`;
+    console.time(timeLabel);
+
+    try {
+
+        if(!elev) {
+            elev = new Eleventy();
+
+            if(!production) {
+                await elev.watch();
+            }
+        }
+
+        // Disable caching to ensure a fresh build each time
+        await elev.write();
+
+        message(`11ty compiled`, 'success', timeLabel);
+    } catch(err) {
+        console.error(err)
+        message(err, 'error', timeLabel);
+    }
+}
--- a/build/watch.js
+++ b/build/watch.js
@@ -2,6 +2,7 @@ import concatFiles, { developmentConcatFilesArgs } from './tasks/concats.js';
 import compileScripts, { developmentScriptsArgs } from './tasks/scripts.js';
 import compileStyles, { developmentStylesArgs } from './tasks/styles.js' ;
 import compileSVGs, { developmentSVGsArgs } from './tasks/svgs.js';
+import buildEleventy, { developmentEleventyOptions } from './tasks/eleventy.js';
 import loconfig from './helpers/config.js';
 import message from './helpers/message.js';
 import notification from './helpers/notification.js';
@@ -19,6 +20,7 @@ concatFiles(...developmentConcatFilesArgs);
 compileScripts(...developmentScriptsArgs);
 compileStyles(...developmentStylesArgs);
 compileSVGs(...developmentSVGsArgs);
+await buildEleventy(developmentEleventyOptions);

 // Create a new BrowserSync instance
 const server = browserSync.create();
@@ -53,10 +55,7 @@ function configureServer(server, { paths, tasks }) {
    // Reload on any changes to views or processed files
    server.watch(
        [
-            ...views,
-            join(paths.scripts.dest, '*.js'),
-            join(paths.styles.dest, '*.css'),
-            join(paths.svgs.dest, '*.svg'),
+            join(paths.dest, '**/*')
        ]
    ).on('change', server.reload);

--- a/data/metadata.json
+++ b/data/metadata.json
@@ -0,0 +1,4 @@
+{
+    "title": "Locomotive Boilerplate",
+    "description": "Front-end boilerplate for projects by Locomotive."
+}
--- a/data/projects.json
+++ b/data/projects.json
@@ -0,0 +1,34 @@
+[
+    {
+        "title": "Lusail Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. In dictum non consectetur a erat nam at lectus urna. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue."
+    },
+    {
+        "title": "Tottenham Hotspur Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Eget mi proin sed libero enim sed. Tincidunt id aliquet risus feugiat in ante metus."
+    },
+    {
+        "title": "Narendra Modi Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae tempus quam pellentesque nec nam aliquam. Velit laoreet id donec ultrices tincidunt. Tincidunt lobortis feugiat vivamus at augue eget arcu."
+    },
+    {
+        "title": "Texas A&M Kyle Field",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Dui faucibus in ornare quam viverra orci sagittis."
+    },
+    {
+        "title": "The Cathedral — A New Icon for Milan",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. In dictum non consectetur a erat nam at lectus urna. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue."
+    },
+    {
+        "title": "Allianz Field",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Eget mi proin sed libero enim sed. Tincidunt id aliquet risus feugiat in ante metus."
+    },
+    {
+        "title": "TQL Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae tempus quam pellentesque nec nam aliquam. Velit laoreet id donec ultrices tincidunt. Tincidunt lobortis feugiat vivamus at augue eget arcu."
+    },
+    {
+        "title": "Groupama Stadium and Training Centre",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Dui faucibus in ornare quam viverra orci sagittis."
+    }
+]
--- a/docs/grid.md
+++ b/docs/grid.md
@@ -70,8 +70,8 @@ The first step is to set intial SCSS values in the following files :
            grid-template-columns: repeat(4, 1fr);
        }

-        &.-col-#{$base-column-nb}\@from-medium {
-            @media (min-width: $from-medium) {
+        &.-col-#{$base-column-nb}\@from-md {
+            @media (min-width: $from-md) {
                grid-template-columns: repeat(#{$base-column-nb}, 1fr);
            }
        }
--- a/docs/technologies.md
+++ b/docs/technologies.md
@@ -80,10 +80,10 @@ Learn about [namespacing](https://csswizardry.com/2015/03/more-transparent-ui-co
 }

 .c-block_heading {
-    @media (max-width: $to-medium) {
+    @media (max-width: $to-md) {
        .c-block.-large & {
            margin-bottom: rem(40px);
-        } 
+        }
    }
 }
 ```
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -0,0 +1,71 @@
+// Import required modules
+const twig = require("twig");
+const fs = require('fs')
+const eleventyPluginTwig = require("@factorial/eleventy-plugin-twig");
+
+// Export Eleventy configuration
+module.exports = function(eleventyConfig) {
+    // Function to generate a version identifier
+    function generateVersion() {
+        // You can use a timestamp, a hash of asset files, or any other method you prefer
+        return Date.now();
+    }
+
+    eleventyConfig.setServerOptions({
+        enabled: false,
+    });
+
+    eleventyConfig.addWatchTarget("views/**/*");
+
+    // Use twig
+    eleventyConfig.addPlugin(eleventyPluginTwig, {
+        twig: {
+            namespaces: {
+                layouts: "views/layouts",
+                partials: "views/partials",
+                snippets: "views/snippets"
+            }
+        },
+        dir: {
+            input: 'views/templates',
+            output: 'www'
+        }
+    });
+
+    twig.extendFilter("log", function(value) {
+        return '<pre>'+JSON.stringify(value)+'</pre>';
+    });
+
+    twig.extendFilter("slug", function(str) {
+        return str
+            .toLowerCase() // Convert the string to lowercase
+            .replace(/\s+/g, '-') // Replace spaces with dashes
+            .replace(/[^\w-]/g, '') // Remove non-word characters
+            .replace(/--+/g, '-') // Replace consecutive dashes with a single dash
+            .trim(); // Trim any leading or trailing dashes
+    })
+
+    // // Add a filter to append the version to asset URLs
+    twig.extendFilter('version', function(url) {
+        const version = generateVersion();
+        return `${url}?v=${version}`;
+    });
+
+    twig.extendFunction("critical_css", function() {
+        try {
+            return fs.readFileSync('./www/assets/styles/critical.css', 'utf-8')
+        } catch(error) {
+            return '';
+        }
+    });
+
+    // Configure and return Eleventy settings
+    return {
+        templateFormats: ['twig'],
+        dir: {
+            input: 'views/templates',
+            output: 'www',
+            data: '../../data'
+        }
+    };
+};
--- a/loconfig.json
+++ b/loconfig.json
@@ -15,11 +15,14 @@
            "dest": "./www/assets/scripts"
        },
        "svgs": {
-            "src": "./assets/images/sprite",
+            "src": "./assets/svgs",
            "dest": "./www/assets/images"
        },
        "views": {
-            "src": "./www/"
+            "src": "./views/"
+        },
+        "data": {
+            "src": "./data/"
        }
    },
    "tasks": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
    "author": "Locomotive <info@locomotive.ca>",
    "type": "module",
    "engines": {
-        "node": ">=20.1",
+        "node": "20.x",
        "npm": ">=8.0"
    },
    "scripts": {
@@ -17,10 +17,12 @@
        "locomotive-scroll": "^5.0.0-beta.11",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
-        "normalize.css": "^8.0.1",
        "svg4everybody": "^2.1.9"
    },
    "devDependencies": {
+        "@11ty/eleventy": "^2.0.1",
+        "@11ty/eleventy-img": "^3.1.8",
+        "@factorial/eleventy-plugin-twig": "^0.1.2",
        "autoprefixer": "^10.4.17",
        "browser-sync": "^3.0.2",
        "concat": "^1.0.3",
@@ -31,7 +33,8 @@
        "purgecss": "^5.0.0",
        "sass": "^1.70.0",
        "svg-mixer": "~2.3.14",
-        "tiny-glob": "^0.2.9"
+        "tiny-glob": "^0.2.9",
+        "twig": "^1.17.1"
    },
    "overrides": {
        "browser-sync": {
--- a/views/layouts/base.twig
+++ b/views/layouts/base.twig
@@ -0,0 +1,48 @@
+<!doctype html>
+<html class="is-loading" lang="en" data-page="images">
+    <head>
+        <meta charset="utf-8">
+
+        <base href="/">
+
+        <title>{% if title %}{{ title }} | {% endif %}{{ metadata.title }}</title>
+        <meta name="description" content="{% if description %}{{description}}{% else %}{{ metadata.description }}{% endif %}">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <meta name="theme-color" content="#ffffff">
+        <meta name="msapplication-TileColor" content="#ffffff">
+        <link rel="manifest" href="site.webmanifest">
+        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
+        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
+
+        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
+    </head>
+    <body data-module-load>
+        <div data-load-container>
+            {% block beforeMain %}
+                <div data-module-scroll="main">
+                    {% include "@partials/header.twig" %}
+                    {% endblock %}
+
+                        <main>
+                            {% block content %}{% endblock %}
+
+                            {% block afterContent %}
+                                {% include "@partials/footer.twig" %}
+                            {% endblock %}
+                        </main>
+
+                    {% block afterMain %}
+                </div>
+            {% endblock %}
+        </div>
+
+        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
+        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
+
+        <script src="assets/scripts/vendors.js" defer></script>
+        <script src="assets/scripts/app.js" defer></script>
+    </body>
+</html>
--- a/views/partials/footer.twig
+++ b/views/partials/footer.twig
@@ -0,0 +1,5 @@
+<footer class="o-container">
+    <p>Made by Locomotive<br>
+    <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">Github</a>
+    </p>
+</footer>
--- a/views/partials/header.twig
+++ b/views/partials/header.twig
@@ -0,0 +1,11 @@
+<header class="o-container">
+    <h1><a href="/">Locomotive Boilerplate</a></h1>
+    <nav>
+        <ul>
+            <li><a href="/grid">Grid</a></li>
+            <li><a href="/form" data-load="customTransition">Form</a></li>
+            <li><a href="/wysiwyg">Wysiwyg</a></li>
+            <li><a href="/projects">Projects</a></li>
+        </ul>
+    </nav>
+</header>
--- a/views/snippets/button.twig
+++ b/views/snippets/button.twig
@@ -0,0 +1,51 @@
+{# --- Parameters ------------------------- #}
+
+{% set _tag             = tag | default('button') %}
+{% set _href            = href | default(null) %}
+{% set _external        = external ?? false %}
+{% set _classes         = classes | default(null) %}
+{% set _modifiers       = modifiers | default(null) %}
+{% set _label           = label | default(null) %}
+{% set _icon            = icon | default(null) %}
+{% set _attr            = attr | default(null) %}
+
+{# --- Computed --------------------------- #}
+
+{% if _href != null %}
+    {% set _tag = 'a' %}
+{% elseif _tag == 'a' %}
+    {% set _tag = 'span' %}
+{% endif %}
+
+{% if _classes != null %}
+    {% set _classes = ' ' ~ _classes %}
+{% endif %}
+
+{% if _modifiers != null %}
+    {% set _classes = ' ' ~ _modifiers ~ ' ' ~ _classes %}
+{% endif %}
+
+{# ---------------------------------------- #}
+
+<{{ _tag }}
+    class="c-button{{ _classes }}"
+    {% if _href %}href="{{ _href }}"{% endif %}
+    {% if _external %}target="_blank" rel="noopener noreferrer" data-load="false"{% endif %}
+    {% if _attr %}{{  _attr | raw }}{% endif %}
+>
+    {% block inner %}
+        <span class="c-button_inner">
+            {% if _label %}
+                <span class="c-button_label">
+                    {{ _label }}
+                </span>
+            {% endif %}
+            {% if _icon %}
+                {% include "@snippets/icon.twig" with {
+                    icon: _icon,
+                    classes: 'c-button_icon',
+                } only %}
+            {% endif %}
+        </span>
+    {% endblock %}
+</{{ _tag }}>
--- a/views/snippets/icon.twig
+++ b/views/snippets/icon.twig
@@ -0,0 +1,15 @@
+{# --- Parameters ------------------------- #}
+
+{% set _icon        = icon %}
+{% set _classes     = classes | default(null) %}
+{% set _modifiers   = modifiers | default(null) %}
+
+{# ---------------------------------------- #}
+
+{% if _icon %}
+    <span class="o-icon {{ _classes }} {{ _modifiers }}">
+        <svg class="svg-{{ _icon }}" focusable="false" aria-hidden="true">
+            <use xlink:href="#{{ _icon }}"></use>
+        </svg>
+    </span>
+{% endif %}
--- a/views/snippets/image.twig
+++ b/views/snippets/image.twig
@@ -0,0 +1,95 @@
+{#
+    Image snippet
+
+    The `img` parameter was made to receive formatted data from a CMS.
+    The use case would be to output an image without overriding is dimensions or other properties.
+
+    It needs to be an object with the following keys :
+        -src: String,
+        -width: Int,
+        -height: Int,
+        -alt?: String,
+        -caption?: String
+
+    ```twig
+    {% include '@snippets/image.twig' with
+        img: project.featured_image
+    %}
+    ```
+#}
+
+{# Defaults #}
+{% set _width = img.width | default(1) %}
+{% set _height = img.height | default(1) %}
+{% set _src = img.src | default(null) %}
+{% set _alt = img.alt | default(null) %}
+{% set _caption = img.caption | default(null) %}
+{% set _attr = attr | default(null) %}
+{% set _has_parallax = has_parallax | default(null) %}
+{% set _parallax_speed = parallax_speed | default('-0.1') %}
+
+{# Override properties #}
+{% set _width = width | default(_width) %}
+{% set _height = height | default(_height) %}
+{% set _src = src | default(_src) %}
+{% set _alt = alt | default(_alt) %}
+{% set _caption = caption | default(_caption) %}
+
+{# Misc. #}
+{% set _is_figure = is_figure | default(false) %}
+{% set _is_lazy_load = is_lazy_load | default(true) %}
+{% set _tag = _is_figure ? 'figure' : 'div' %}
+
+{# Classes & modifiers #}
+{% set _classes = classes | default(null) %}
+{% set _modifiers = modifiers | default(null) %}
+
+{% if _has_parallax %}
+    {% set _modifiers = _modifiers ~ ' -parallax' %}
+{% endif %}
+
+{% if _is_lazy_load %}
+    {% set _modifiers = _modifiers ~ ' -lazy-load' %}
+    {% set _loading = 'lazy' %}
+{% else %}
+    {% set _loading = 'eager' %}
+{% endif %}
+
+{% if _classes != null %}
+    {% set _classes = ' ' ~ _classes %}
+{% endif %}
+
+{% if _modifiers != null %}
+    {% set _classes = ' ' ~ _modifiers ~ ' ' ~ _classes %}
+{% endif %}
+
+{# ---------------------------------------- #}
+
+<{{_tag}} class="c-image{{ _classes }}" {{_attr}}>
+    <div
+        class="c-image_inner"
+        {% if has_parallax %}
+            data-scroll
+            data-scroll-speed="{{ _parallax_speed }}"
+        {% endif %}
+    >
+        <img
+            class="c-image_img"
+            src="{{ _src }}"
+            alt="{{ _alt }}"
+            width="{{ _width }}"
+            height="{{ _height }}"
+            loading="{{ _loading }}"
+            onload="this.closest('.c-image')?.classList?.add('is-loaded');"
+        >
+    </div>
+
+    {% if _caption %}
+        {% if _is_figure %}
+        <figcaption class="c-image_description">{{ _caption }}</figcaption>
+        {% else %}
+        <div class="c-image_description"><span>{{ _caption }}</span></div>
+        {% endif %}
+    {% endif %}
+
+</{{ _tag }}>
--- a/views/templates/form.twig
+++ b/views/templates/form.twig
@@ -0,0 +1,61 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Page</h1>
+
+        <div class="o-layout">
+            <div class="o-layout_item u-1/2@from-small">
+
+                <form class="c-form">
+                    <div class="c-form_item">
+                        <label class="c-form_label" for="input">Input</label>
+                        <input class="c-form_input" type="text" id="input">
+                    </div>
+                    <div class="c-form_item">
+                        <div class="o-layout -gutter">
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_checkbox" type="checkbox" id="checkbox">
+                                <label class="c-form_checkboxLabel" for="checkbox">Checkbox</label>
+                            </div>
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_checkbox" type="checkbox" id="checkbox2">
+                                <label class="c-form_checkboxLabel" for="checkbox2">Checkbox 2</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="c-form_item">
+                        <div class="o-layout -gutter">
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_radio" type="radio" name="radio" id="radio">
+                                <label class="c-form_radioLabel" for="radio">Radio</label>
+                            </div>
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_radio" type="radio" name="radio" id="radio2">
+                                <label class="c-form_radioLabel" for="radio2">Radio 2</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="c-form_item">
+                        <label class="c-form_label" for="select">Select</label>
+                        <div class="c-form_select">
+                            <select class="c-form_select_input" id="select">
+                                <option value="option">Option</option>
+                                <option value="option2">Option 2</option>
+                                <option value="option3">Option 3</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="c-form_item">
+                        <label class="c-form_label" for="textarea">Textarea</label>
+                        <textarea class="c-form_textarea" id="textarea"></textarea>
+                    </div>
+                    <button class="c-button" type="submit">
+                        Submit
+                    </button>
+                </form>
+
+            </div>
+        </div>
+    </div>
+{% endblock %}
--- a/views/templates/grid.twig
+++ b/views/templates/grid.twig
@@ -0,0 +1,29 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Hello</h1>
+
+        <div class="o-grid -col-4 -col-12@from-md -gutters">
+            <div class="o-grid_item u-gc-1/8@from-md" style="background-color: gray;">
+                <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `md` MQ</h2>
+            </div>
+
+            <div class="o-grid_item u-gc-1/5@from-md" style="background-color: yellow;">
+                <p>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?</p>
+            </div>
+
+            <div class="o-grid_item u-gc-5/9@from-md" style="background-color: red;">
+                <p>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?</p>
+            </div>
+
+            <div class="o-grid_item u-gc-9/13@from-md" style="background-color: blue;">
+                <p>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?</p>
+            </div>
+
+            <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-md" style="background-color: pink;">
+                <p>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?</p>
+            </div>
+        </div>
+    </div>
+{% endblock %}
--- a/views/templates/images.twig
+++ b/views/templates/images.twig
@@ -0,0 +1,89 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="main">
+        <div class="o-container">
+            <h1 class="c-heading -h1">Images</h1>
+
+            <section>
+                <h2 class="c-heading -h2">Lazy load demo</h2>
+
+                <h3 class="c-heading -h3">Basic</h3>
+
+                <div style="width: 640px; max-width: 100%;">
+                    <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
+                    <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
+                </div>
+
+                <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+
+                <div style="width: 480px; max-width: 100%;">
+                    <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
+                    <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
+                </div>
+            </section>
+
+            <section>
+                <h3 class="c-heading -h3">Relative to scroll</h3>
+
+                <h4 class="c-heading -h3">Using o-ratio & img</h3>
+
+                <div style="width: 640px; max-width: 100%;">
+                    <div class="o-ratio u-4:3">
+                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                    </div>
+                    <div class="o-ratio u-4:3">
+                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                    </div>
+                    <div class="o-ratio u-4:3">
+                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                    </div>
+                    <div class="o-ratio u-4:3">
+                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                    </div>
+                    <div class="o-ratio u-4:3">
+                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                    </div>
+                </div>
+
+                <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+
+                <div style="width: 480px; max-width: 100%;">
+                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
+                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
+                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
+                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
+                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
+                </div>
+
+                <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
+
+                <div style="width: 480px; max-width: 100%;">
+                    <img
+                        data-scroll
+                        data-scroll-call="lazyLoad, Scroll, main"
+                        data-src="http://picsum.photos/640/480?v=6"
+                        alt=""
+                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                    />
+
+                    <img
+                        data-scroll
+                        data-scroll-call="lazyLoad, Scroll, main"
+                        data-src="http://picsum.photos/640/480?v=7"
+                        alt=""
+                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                    />
+
+                    <img
+                        data-scroll
+                        data-scroll-call="lazyLoad, Scroll, main"
+                        data-src="http://picsum.photos/640/480?v=8"
+                        alt=""
+                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                    />
+                </div>
+            </section>
+        </div>
+    </div>
+{% endblock %}
--- a/views/templates/index.twig
+++ b/views/templates/index.twig
@@ -0,0 +1,54 @@
+---
+title: Home
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+
+        {# ====================== #}
+        {# ====== Headings ====== #}
+        {# ====================== #}
+
+        <h1 class="c-heading -h1">Heading 1</h1>
+        <h1 class="c-heading -h2">Heading 2</h1>
+        <h1 class="c-heading -h3">Heading 3</h1>
+        <h1 class="c-heading -h4">Heading 4</h1>
+        <h1 class="c-heading -h5">Heading 5</h1>
+        <h1 class="c-heading -h6">Heading 6</h1>
+
+        <hr>
+
+        {# ======================= #}
+        {# ======== Texts ======== #}
+        {# ======================= #}
+
+        <p class="c-text -body-regular" style="max-width: 500px">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam libero, sit pariatur voluptatum amet magni odio ducimus! Saepe facere iste porro voluptatem. Tenetur perferendis ea a quasi vitae! Ullam, blanditiis.
+        </p>
+
+        <hr>
+
+        {# ======================= #}
+        {# ======= Buttons ======= #}
+        {# ======================= #}
+
+        {% include "@snippets/button.twig" with {
+            label: 'Button'
+        } %}
+
+        <hr>
+
+        {# ====================== #}
+        {# ======= Images ======= #}
+        {# ====================== #}
+
+        {% include "@snippets/image.twig" with {
+            src: 'http://picsum.photos/800/600?v=1',
+            width: 800,
+            height: 600
+        } %}
+
+    </div>
+{% endblock %}
--- a/views/templates/project.twig
+++ b/views/templates/project.twig
@@ -0,0 +1,16 @@
+---
+pagination:
+    data: projects
+    size: 1
+    alias: project
+permalink: "project/{{ project.title | slug }}/index.html"
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="main">
+        <h1 class="c-heading -h1">{{project.title}}</h1>
+        <p>{{project.desc}}</p>
+    </div>
+{% endblock %}
--- a/views/templates/projects.twig
+++ b/views/templates/projects.twig
@@ -0,0 +1,30 @@
+---
+pagination:
+  data: projects
+  size: 4
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="main">
+
+        <h1 class="c-heading -h1">Projects</h1>
+
+        <ul>
+        {% for item in pagination.items %}
+            <li><a href="/project/{{item.title|slug}}">{{ item.title }}</a></li>
+        {% endfor %}
+        </ul>
+
+        <ol>
+        {% for pageEntry in pagination.pages %}
+            {% if page.url == pagination.hrefs[ loop.index0 ] %}
+                <span aria-current="page">{{ loop.index }}</span>
+            {% else %}
+                <a href="{{ pagination.hrefs[ loop.index0 ] }}">{{ loop.index }}</a>
+            {% endif %}
+        {% endfor %}
+        </ol>
+    </div>
+{% endblock %}
--- a/views/templates/wysiwyg.twig
+++ b/views/templates/wysiwyg.twig
@@ -0,0 +1,78 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="main">
+        <div class="o-container || c-wysiwyg">
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+            <h1>Heading 1</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <h2>Heading 2</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <h3>Heading 3</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <h4>Heading 4</h4>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <h5>Heading 5</h5>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <h6>Heading 6</h6>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p><p><strong>Lorem ipsum dolor sit amet, consectetur</strong> adipiscing elit, sed do eiusmod tempor incididunt u<strong>t labore et dolore magna aliqua</strong>. Ut enim ad minim <em>veniam, quis nostrud exercitation</em> ullamco laboris <em>nisi ut aliquip ex ea</em> commodo consequat. <span style="text-decoration: underline;">Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. <span style="text-decoration: underline;">Excepteur sint occaecat cupidatat</span> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <blockquote>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            </blockquote>
+            <p>Je suis un <a href="https://www.lipsum.com/" target="_blank" title="Un super lien" rel="noopener noreferrer">super lien.</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a href="https://www.lipsum.com/" title="Lorem Ipsum">incididunt ut labore et dolore magna aliqua</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p>
+                <a href="mailto:example@example.com" title="Test mail">Lien mail.</a><br/>
+                <a href="tel:+0-123-456-7890" title="Test tel">Lien téléphone.</a>
+            </p>
+            <ul>
+                <li>Item 1</li>
+                <li><strong>Item 2</strong></li>
+                <li><em><strong>Item 3</strong></em></li>
+                <li><span style="text-decoration: underline;">Item 4</span></li>
+                <li><a href="https://www.lipsum.com/" title="Lorem ipsum">Item 5</a></li>
+            </ul>
+            <ol>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+            </ol>
+            <p style="padding-left: 60px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex."</p>
+            <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <table width="539" height="90">
+                <tbody>
+                    <tr>
+                        <td style="width: 126.55px;"><strong>Last name</strong></td>
+                        <td style="width: 261.417px;"><span style="text-decoration: underline;">First name</span></td>
+                        <td style="width: 126.533px;"><em>City</em></td>
+                    </tr>
+                    <tr>
+                        <td style="width: 126.55px;">Lorem</td>
+                        <td style="width: 261.417px;">Ipsum</td>
+                        <td style="width: 126.533px;">Montréal</td>
+                    </tr>
+                    <tr>
+                        <td style="width: 126.55px;">Dolor</td>
+                        <td style="width: 261.417px;">Sit</td>
+                        <td style="width: 126.533px;">Paris</td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p><img src="https://www.airinuit.com/uploads/destinations/XGR/Mathias_Laroque_MWL.pilot_website_fall_2021_HD.jpg" alt=""/></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p><img src="https://www.airinuit.com/uploads/destinations/XGR/Mathias_Laroque_MWL.pilot_website_fall_2021_HD.jpg" alt=""/></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p><iframe width="560" height="315" src="https://www.youtube.com/embed/qt7jSw55N1A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
+            <p><img src="https://www.airinuit.com/uploads/destinations/XGR/Mathias_Laroque_MWL.pilot_website_fall_2021_HD.jpg" alt=""/></p>
+        </div>
+    </div>
+{% endblock %}
--- a/www/assets/scripts/vendors.js
+++ b/www/assets/scripts/vendors.js
--- 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/critical.css
+++ b/www/assets/styles/critical.css
--- a/www/assets/styles/critical.css.map
+++ b/www/assets/styles/critical.css.map
@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"critical.css"}
--- 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
@@ -1,105 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="page">
-    <head>
-        <meta charset="utf-8">
-        <title>Form | Locomotive Boilerplate</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <meta name="theme-color" content="#ffffff">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <link rel="manifest" href="site.webmanifest">
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-
-        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
-    </head>
-    <body data-module-load>
-        <div data-load-container>
-            <div data-module-scroll="main">
-                <header>
-                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
-                    <nav>
-                        <ul>
-                            <li><a href="images.html">Images</a></li>
-                            <li><a href="form.html" data-load="customTransition">Form</a></li>
-                            <li><a href="grid.html">Grid</a></li>
-                        </ul>
-                    </nav>
-                </header>
-
-                <main>
-                    <div class="o-container">
-                        <h1 class="c-heading -h1">Page</h1>
-
-                        <div class="o-layout">
-                            <div class="o-layout_item u-1/2@from-small">
-
-                                <form class="c-form">
-                                    <div class="c-form_item">
-                                        <label class="c-form_label" for="input">Input</label>
-                                        <input class="c-form_input" type="text" id="input">
-                                    </div>
-                                    <div class="c-form_item">
-                                        <div class="o-layout -gutter">
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_checkbox" type="checkbox" id="checkbox">
-                                                <label class="c-form_checkboxLabel" for="checkbox">Checkbox</label>
-                                            </div>
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_checkbox" type="checkbox" id="checkbox2">
-                                                <label class="c-form_checkboxLabel" for="checkbox2">Checkbox 2</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="c-form_item">
-                                        <div class="o-layout -gutter">
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_radio" type="radio" name="radio" id="radio">
-                                                <label class="c-form_radioLabel" for="radio">Radio</label>
-                                            </div>
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_radio" type="radio" name="radio" id="radio2">
-                                                <label class="c-form_radioLabel" for="radio2">Radio 2</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="c-form_item">
-                                        <label class="c-form_label" for="select">Select</label>
-                                        <div class="c-form_select">
-                                            <select class="c-form_select_input" id="select">
-                                                <option value="option">Option</option>
-                                                <option value="option2">Option 2</option>
-                                                <option value="option3">Option 3</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="c-form_item">
-                                        <label class="c-form_label" for="textarea">Textarea</label>
-                                        <textarea class="c-form_textarea" id="textarea"></textarea>
-                                    </div>
-                                    <button class="c-button" type="submit">
-                                        Submit
-                                    </button>
-                                </form>
-
-                            </div>
-                        </div>
-                    </div>
-                </main>
-
-                <footer>
-                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-                </footer>
-            </div>
-        </div>
-
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
-
-        <script src="assets/scripts/vendors.js" defer></script>
-        <script src="assets/scripts/app.js" defer></script>
-    </body>
-</html>
--- a/www/grid.html
+++ b/www/grid.html
@@ -1,96 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="grid">
-<head>
-    <meta charset="utf-8">
-    <title>Locomotive Boilerplate</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
-    <!--
-            <style>
-                path {
-                    fill: #000;
-                }
-                @media (prefers-color-scheme: dark) {
-                    path {
-                        fill: #fff;
-                    }
-                }
-            </style>
-        -->
-    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
-
-    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
-        onload="this.media='all'; this.onload=null; this.isLoaded=true">
-</head>
-
-<body data-module-load>
-    <div data-load-container>
-        <div data-module-scroll="main">
-            <header>
-                <a href="/">
-                    <h1>Locomotive Boilerplate</h1>
-                </a>
-                <nav>
-                    <ul>
-                        <li><a href="images.html">Images</a></li>
-                        <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        <li><a href="grid.html">Grid</a></li>
-                    </ul>
-                </nav>
-            </header>
-
-            <main>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
-
-                    <div class="o-grid -col-4 -col-12@from-medium -gutters">
-                        <div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
-                            <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
-                        </div>
-
-                        <div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
-                            <p>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?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
-                            <p>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?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
-                            <p>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?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
-                            <p>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?</p>
-                        </div>
-                    </div>
-                </div>
-            </main>
-
-            <footer>
-                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
-                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-            </footer>
-        </div>
-    </div>
-
-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>
-
-    <script src="assets/scripts/vendors.js" defer></script>
-    <script src="assets/scripts/app.js" defer></script>
-</body>
-
-</html>
--- a/www/images.html
+++ b/www/images.html
@@ -1,131 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="images">
-    <head>
-        <meta charset="utf-8">
-        <title>Images | Locomotive Boilerplate</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <meta name="theme-color" content="#ffffff">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <link rel="manifest" href="site.webmanifest">
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-
-        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
-    </head>
-    <body data-module-load>
-        <div data-load-container>
-            <div data-module-scroll="main">
-                <header>
-                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
-                    <nav>
-                        <ul>
-                            <li><a href="images.html">Images</a></li>
-                            <li><a href="form.html" data-load="customTransition">Form</a></li>
-                            <li><a href="grid.html">Grid</a></li>
-                        </ul>
-                    </nav>
-                </header>
-
-                <main>
-                    <div class="o-container">
-                        <h1 class="c-heading -h1">Images</h1>
-
-                        <section>
-                            <h2 class="c-heading -h2">Lazy load demo</h2>
-
-                            <h3 class="c-heading -h3">Basic</h3>
-
-                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
-                            </div>
-                        </section>
-
-                        <section>
-                            <h3 class="c-heading -h3">Relative to scroll</h3>
-
-                            <h4 class="c-heading -h3">Using o-ratio & img</h3>
-
-                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=6"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=7"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=8"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-                            </div>
-                        </section>
-                    </div>
-                </main>
-
-                 <footer>
-                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-                </footer>
-            </div>
-        </div>
-
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
-
-        <script src="assets/scripts/vendors.js" defer></script>
-        <script src="assets/scripts/app.js" defer></script>
-    </body>
-</html>
--- a/www/index.html
+++ b/www/index.html
@@ -1,82 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="home">
-
-<head>
-    <meta charset="utf-8">
-    <title>Locomotive Boilerplate</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
-    <!--
-            <style>
-                path {
-                    fill: #000;
-                }
-                @media (prefers-color-scheme: dark) {
-                    path {
-                        fill: #fff;
-                    }
-                }
-            </style>
-        -->
-    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
-
-    <!-- Preload Fonts -->
-    <link rel="preload" href="assets/fonts/SourceSans3-Bold.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-BoldIt.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-Regular.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-RegularIt.woff2" as="font" type="font/woff2" crossorigin>
-
-    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
-        onload="this.media='all'; this.onload=null; this.isLoaded=true">
-</head>
-
-<body data-module-load>
-
-    <div data-load-container>
-        <div data-module-scroll="main">
-            <header>
-                <a href="/">
-                    <h1>Locomotive Boilerplate</h1>
-                </a>
-                <nav>
-                    <ul>
-                        <li><a href="images.html">Images</a></li>
-                        <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        <li><a href="grid.html">Grid</a></li>
-                    </ul>
-                </nav>
-            </header>
-
-            <main data-module-example>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
-                </div>
-            </main>
-
-            <footer>
-                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
-                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-            </footer>
-        </div>
-    </div>
-
-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>
-
-    <script src="assets/scripts/vendors.js" defer></script>
-    <script src="assets/scripts/app.js" defer></script>
-</body>
-
-</html>
Author	SHA1	Message	Date
Lucas Bigot	171aa29a12	Add default image snippet	2024-03-29 11:14:01 -04:00
Lucas Bigot	375b54150e	[Button] Change classes and modifiers method	2024-03-29 11:13:45 -04:00
Lucas Bigot	0a4da30696	Add basic styleguide to index Add default button snippet Add default icon snippet	2024-03-29 10:56:00 -04:00
Lucas Bigot	ec55037dfe	Update footer	2024-03-29 10:36:14 -04:00
Lucas Bigot	795be38edb	Add wysiwyg example page	2024-03-29 10:36:04 -04:00
Lucas Bigot	f52d2bc61e	Update grid beakpoints names	2024-03-29 10:32:55 -04:00
Deven Caron	6cef7be291	Update 11ty dependancies	2024-03-27 14:54:51 -04:00
Deven Caron	e97cf527b8	Fix dev dependencies	2024-03-27 14:32:16 -04:00
Lucas Bigot	a1801c8bc8	Merge branch 'master' into feature/11ty	2024-03-27 10:00:10 -04:00
Lucas Bigot	d6abf2b4ca	Build assets	2024-03-26 18:46:43 -04:00
Lucas Bigot	09217c17e5	Update locomotive-scroll version	2024-03-26 18:45:32 -04:00
Lucas Bigot	a66cb193d0	Add missing `eleventy-img` package	2024-03-26 18:45:06 -04:00
Lucas Bigot	6d37049989	Fix resize event debounce method + Clean up and re-organize app file	2024-03-26 18:30:36 -04:00
Lucas Bigot	bc3fd3a492	Fix grid-space sass function using calculated vw value	2024-03-26 18:29:48 -04:00
Lucas Bigot	45d8be5525	Rename breakpoints by shortnames (#171 ) * Rename breakpoints by shortnames * Replace `tiny` breakpoint for `xs` in spacing loop * Add 2xs, 4xl and 5xl breakpoints	2024-03-26 16:50:16 -04:00
Deven Caron	ea8f98a52d	Add assets.json and empty directories for scripts and styles	2024-03-26 16:29:33 -04:00
Deven Caron	56bbd9e3c5	Delete assets.json file	2024-03-26 16:29:12 -04:00
Deven Caron	dcb7e91b91	Update node version for vercel	2024-03-26 16:20:50 -04:00
Deven Caron	2b1eb8e0dd	Add new files and update .gitignore	2024-03-26 15:44:21 -04:00
Deven Caron	f4afd9c6b2	Delete compiled assets	2024-03-26 15:42:20 -04:00
Lucas Bigot	7578397a8e	Merge pull request #170 from locomotivemtl/feature/config-speed Rename `timing` by `speed`	2024-03-26 15:10:10 -04:00
Lucas Bigot	27effb470d	Merge branch 'master' into feature/config-speed	2024-03-26 15:06:16 -04:00
Lucas Bigot	7a91cbce61	Merge pull request #165 from locomotivemtl/feature/css-reset Modernize css normalize	2024-03-26 15:03:15 -04:00
Lucas Bigot	65a265c0ea	Merge branch 'master' into feature/css-reset	2024-03-26 15:02:21 -04:00
Lucas Bigot	afb3a4aa6a	Merge pull request #161 from locomotivemtl/feature/svgs-folder Add dedicated SVG sprite folder	2024-03-26 14:56:03 -04:00
Lucas Bigot	40521c3f2b	Merge pull request #169 from locomotivemtl/feature/config-spacing Rework spacing css config	2024-03-26 14:47:00 -04:00
Lucas Bigot	2d395cf73a	Rename timing file and sass function for speed	2024-03-26 14:37:11 -04:00
Lucas Bigot	81d47b88b8	Rename spacer by spacings	2024-03-26 14:06:25 -04:00
Lucas Bigot	c16407c8c1	Add clamp-with-max & size-clamp sass functions	2024-03-26 11:41:23 -04:00
Lucas Bigot	522c9c0bcb	Replace vh based spacing values	2024-03-26 11:16:54 -04:00
Chauncey McAskill	ddd12ffc38	Fix inconsistent argument name in `grid-space()` function in Sass	2024-01-29 15:19:09 -05:00
Chauncey McAskill	9e6d7ae182	Replace deprecated divisions in Sass	2024-01-29 15:17:50 -05:00
Chauncey McAskill	d5bff3ab50	Remove obsolete `span()` function in Sass	2024-01-29 15:06:58 -05:00
Jérémy Minié	8cde150a3a	Use 11ty w/ twig setup instead of hardcoded HTML files	2024-01-18 17:17:11 -05:00
Lucas Vallenet	0af2be4599	Update reset	2024-01-12 12:07:38 +01:00
Lucas Vallenet	98ba8c4972	Update normalize comment	2024-01-12 11:28:42 +01:00
Lucas Vallenet	a674a16c4b	Remove body margins	2024-01-11 11:27:44 +01:00
Lucas Vallenet	dd2c783938	Modernize css normalize	2024-01-11 11:10:38 +01:00
Lucas Vallenet	7021666c46	Add dedicated svg folder	2023-12-11 11:43:16 +01:00
				`@@ -1 +0,0 @@`
				`{"version":3,"sources":[],"names":[],"mappings":"","file":"critical.css"}`