Merge branch 'master' into feature/css-reset

Add dedicated SVG sprite folder

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1705057647819
+    "version": 1711479720413
 }

assets/scripts/app.js

@@ -1,25 +1,66 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-import { debounce } from './utils/tickers'
+import { debounce } from './utils/tickers';
 import { $html } from './utils/dom';
 import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
 import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
 
 const app = new modular({
-    modules: modules,
+    modules,
 });
 
-window.addEventListener('load', (event) => {
+const setViewportSizes = () => {
+
+    // Document styles
+    const documentStyles = document.documentElement.style;
+
+    // Viewport width
+    const vw = document.body.clientWidth * 0.01;
+    documentStyles.setProperty('--vw', `${vw}px`);
+
+    // Return if browser supports vh, svh, dvh, & lvh
+    if (ENV.SUPPORTS_VH) {
+        return
+    }
+
+    // Viewport height
+    const height = window.innerHeight;
+    const svh = document.documentElement.clientHeight * 0.01;
+    documentStyles.setProperty('--svh', `${svh}px`);
+    const dvh = height * 0.01;
+    documentStyles.setProperty('--dvh', `${dvh}px`);
+
+    if (document.body) {
+        const fixed = document.createElement('div');
+        fixed.style.width = '1px';
+        fixed.style.height = '100vh';
+        fixed.style.position = 'fixed';
+        fixed.style.left = '0';
+        fixed.style.top = '0';
+        fixed.style.bottom = '0';
+        fixed.style.visibility = 'hidden';
+
+        document.body.appendChild(fixed);
+
+        var fixedHeight = fixed.clientHeight;
+
+        fixed.remove();
+
+        const lvh = fixedHeight * 0.01;
+
+        documentStyles.setProperty('--lvh', `${lvh}px`);
+    }
+}
+
+window.addEventListener('load', () => {
     const $style = document.getElementById('main-css');
 
     if ($style) {
         if ($style.isLoaded) {
             init();
         } else {
-            $style.addEventListener('load', (event) => {
-                init();
-            });
+            $style.addEventListener('load', init);
         }
     } else {
         console.warn('The "main-css" stylesheet not found');
@@ -28,6 +69,7 @@ window.addEventListener('load', (event) => {
 
 function init() {
     globals();
+    setViewportSizes();
 
     app.init(app);
 
@@ -36,14 +78,18 @@ function init() {
     $html.classList.remove(CSS_CLASS.LOADING);
 
     // Bind window resize event with default vars
-    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
+    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END);
     window.addEventListener('resize', () => {
-        $html.style.setProperty('--vw', `${document.documentElement.clientWidth * 0.01}px`)
+        setViewportSizes();
         debounce(() => {
-            window.dispatchEvent(resizeEndEvent)
+            window.dispatchEvent(resizeEndEvent);
         }, 200, false)
     })
 
+    window.addEventListener('orientationchange', () => {
+        setViewportSizes();
+    })
+
     /**
      * Eagerly load the following fonts.
      */
@@ -53,12 +99,12 @@ function init() {
 
             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/*, font*/))
-                console.groupEnd()
-                console.group('State of all fonts:')
-                document.fonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
-                console.groupEnd()
+                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();
             }
         });
     }

assets/scripts/config.js

@@ -21,6 +21,15 @@ const ENV = Object.freeze({
     // Device
     IS_MOBILE,
     IS_DESKTOP: !IS_MOBILE,
+
+    // Supports
+    SUPPORTS_VH: (
+        'CSS' in window
+        && 'supports' in window.CSS
+        && window.CSS.supports('height: 100svh')
+        && window.CSS.supports('height: 100dvh')
+        && window.CSS.supports('height: 100lvh')
+    )
 })
 
 // Main CSS classes used within the project

assets/styles/main.scss

@@ -1,9 +1,12 @@
 // ==========================================================================
 // Main
 // ==========================================================================
+
+// Modules
+// ==========================================================================
+
 @use "sass:math";
 
-// ==========================================================================
 // Tools
 // ==========================================================================
 
@@ -17,14 +20,14 @@
 // 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.spacings";
 @import "settings/config.timings";
 @import "settings/config.zindexes";
-@import "settings/config";
 @import "settings/config.variables";
 
 // Vendors

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 & {

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
 // ==========================================================================

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});
-}

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});
+}

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
@@ -120,30 +109,58 @@ $context: 'frontend' !default;
 //
 // ```scss
 // .c-box {
-//     width: grid-space(6/12);
-//     margin-left: grid-space(1/12, 1);
-// }
-// ```
-//
-// @param  {number} $number - The percentage spacer
-// @param  {number} $inset  - The grid gutter inset
-// @return {function<number>}
-@function grid-space($percentage, $inset: 0) {
-    @return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
-}
-
-// Returns calculation of a percentage of the viewport height.
-//
-// ```scss
-// .c-box {
-//     height: vh(100);
+//     width: grid-space(math.div(6, 12));
+//     margin-left: grid-space(math.div(1, 12), 1);
 // }
 // ```
 //
 // @param  {number} $number - The percentage number
-// @return {function<number>} in vh
-@function vh($number) {
-    @return calc(#{$number} * var(--vh, 1vh));
+// @param  {number} $inset  - The grid gutter inset
+// @return {function<number>}
+@function grid-space($number, $inset: 0) {
+    @return calc(#{$number} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$number}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
+}
+
+// Returns calculation of a percentage of the viewport small height.
+//
+// ```scss
+// .c-box {
+//     height: svh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in svh
+@function svh($number) {
+    @return calc(#{$number} * var(--svh, 1svh));
+}
+
+// Returns calculation of a percentage of the viewport large height.
+//
+// ```scss
+// .c-box {
+//     height: lvh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in lvh
+@function lvh($number) {
+    @return calc(#{$number} * var(--lvh, 1lvh));
+}
+
+// Returns calculation of a percentage of the viewport dynamic height.
+//
+// ```scss
+// .c-box {
+//     height: dvh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in dvh
+@function dvh($number) {
+    @return calc(#{$number} * var(--dvh, 1dvh));
 }
 
 // Returns calculation of a percentage of the viewport width.
@@ -161,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.
 //

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,7 +50,7 @@ $spacing-sizes: join($spacers, (
                 // Base class
                 $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
 
-                // Spacer without media query
+                // Spacing without media query
                 @if $breakpoint == "tiny" {
                     #{$base-class} {
                         @each $direction in $directions {
@@ -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 {

assets/styles/utilities/_widths.scss

@@ -23,6 +23,6 @@ $widths-fractions: 1 2 3 4 5 !default;
 
 .u-1\/2\@from-small {
     @media (min-width: $from-small) {
-        width: span(1/2);
+        width: 50%;
     }
 }

build/tasks/styles.js

@@ -236,7 +236,7 @@ async function purgeUnusedCSS(outfile, label) {
         keyframes: true,
         safelist: {
             // Keep all except .u-gc-* | .u-margin-* | .u-padding-*
-            standard: [ /^(((?!\bu-gc-).)*$ | (((?!\bu-margin-).)*$) | (((?!\bu-padding-).)*$))/ ]
+            standard: [ /^(?!.*\b(u-gc-|u-margin|u-padding)).*$/ ]
         },
         variables: true,
     })

loconfig.json

@@ -15,7 +15,7 @@
             "dest": "./www/assets/scripts"
         },
         "svgs": {
-            "src": "./assets/images/sprite",
+            "src": "./assets/svgs",
             "dest": "./www/assets/images"
         },
         "views": {

package.json

@@ -14,21 +14,21 @@
         "build": "node --experimental-json-modules --no-warnings build/build.js"
     },
     "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.9",
+        "locomotive-scroll": "^5.0.0-beta.11",
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",
         "svg4everybody": "^2.1.9"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.13",
+        "autoprefixer": "^10.4.17",
         "browser-sync": "^3.0.2",
         "concat": "^1.0.3",
-        "esbuild": "^0.17.6",
+        "esbuild": "^0.20.0",
         "kleur": "^4.1.5",
         "node-notifier": "^10.0.1",
         "postcss": "^8.4.21",
         "purgecss": "^5.0.0",
-        "sass": "^1.69.5",
+        "sass": "^1.70.0",
         "svg-mixer": "~2.3.14",
         "tiny-glob": "^0.2.9"
     },