@appartmint/mint 1.2.2 → 1.2.4

package/src/scss/imports/components/_index.scss

@@ -1,16 +1,16 @@
-/// _index.scss - Forward all overrides
-/// @author App Art Mint LLC
-/// 
-/// @group Index
-@charset 'utf-8';
-
-/// Imports
-@use './backgrounds';
-@use './buttons';
-@use './cards';
-@use './embed';
-@use './footer';
-@use './header';
-@use './image';
-@use './recaptcha';
-@use './tables';
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@use './backgrounds';
+@use './buttons';
+@use './cards';
+@use './embed';
+@use './footer';
+@use './header';
+@use './image';
+@use './recaptcha';
+@use './tables';

package/src/scss/imports/global/_grid.scss

@@ -140,5 +140,14 @@
 	#{class(portrait)} {
 		grid-row: span 2;
 	}
+
+	#{class(landscape)} {
+		@include break(sm) {
+			grid-column: span 2;
+		}
+		@include break(lg) {
+			grid-column: span 3;
+		}
+	}
 }
 

package/src/scss/imports/global/_icons.scss

@@ -1,6 +1,6 @@
-/// Icon styles
-i {
-    &.fa-envelope {
-        transform: translateY(5%);
-    }
-}
+/// Icon styles
+i {
+    &.fa-envelope {
+        transform: translateY(5%);
+    }
+}

package/src/scss/imports/global/_index.scss

@@ -1,5 +1,7 @@
+/// Forward all global styles
 @use './animations';
 @use './aspect';
+@use './flex';
 @use './global';
 @use './grid';
 @use './icons';

package/src/scss/imports/global/_structure.scss

@@ -72,3 +72,12 @@
 #{class(right)} {
 	float: right;
 }
+
+#{class(full-page)} {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: calc(100vh - css-var(header-height));
+	min-height: calc(100dvh - css-var(header-height));
+}

package/src/scss/imports/util/_index.scss

@@ -1,9 +1,9 @@
-/// _index.scss - Forward all overrides
-/// @author App Art Mint LLC
-/// 
-/// @group Index
-@charset 'utf-8';
-
-/// Imports
-@forward './util';
-@forward './vars';
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@forward './util';
+@forward './vars';

package/src/ts/imports/enums/side.ts

@@ -1,9 +1,9 @@
-/**
- * Side Enum
- */
-export enum EMintSide {
-    Top,
-    Right,
-    Bottom,
-    Left
-};
+/**
+ * Side Enum
+ */
+export enum EMintSide {
+    Top,
+    Right,
+    Bottom,
+    Left
+};

package/src/ts/imports/models/color.ts

@@ -1,96 +1,96 @@
-/**
- * Color
- */
-export class mintColor {
-    protected static hexBase: number = 16;
-    protected static hexMax: string = 'FF';
-    public r: number;
-    public g: number;
-    public b: number;
-    public a: number;
-
-    constructor (args: {[key: string]: number | string}) {
-        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
-        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
-        if (typeof args.color === 'string') {
-            this.stringConstructor(args.color);
-        }
-    }
-
-    /**
-     * Constructor from a string argument
-     */
-    protected stringConstructor (str: string) : void {
-        if (str.startsWith('#')) {
-            this.hexConstructor(str);
-        } else {
-            if (~str.indexOf('linear-gradient')) {
-                str = str.substring(str.indexOf('linear-gradient'), str.length);
-            }
-            this.rgbConstructor(str);
-        }
-    }
-
-    /**
-     * Constructor from a hex argument
-     */
-    protected hexConstructor (hex: string) : void {
-        switch (hex.length) {
-            case 1:
-            case 5:
-            case 6:
-                return;
-            case 2:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
-                break;
-            case 3:
-                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
-                break;
-            case 4:
-                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
-                break;
-            case 7:
-                hex += mintColor.hexMax;
-                break;
-            case 8:
-                hex += hex[hex.length - 1];
-                break;
-            default:
-                hex = hex.substring(0, 9);
-        }
-
-        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
-        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
-        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
-        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
-    }
-
-    /**
-     * Constructor from an rgba argument
-     */
-    protected rgbConstructor (rgb: string) : void {
-        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
-        if (match) {
-            this.r = parseInt(match[1]);
-            this.g = parseInt(match[2]);
-            this.b = parseInt(match[3]);
-            this.a = parseFloat(match[4]);
-        }
-    }
-
-    /**
-     * Returns the perceived brightness of the color
-     */
-    getBrightness () : number {
-        if (this.a === 0) {
-            return 262;
-        }
-        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
-            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
-        }
-        return -1;
-    }
-}
-export default mintColor;
+/**
+ * Color
+ */
+export class mintColor {
+    protected static hexBase: number = 16;
+    protected static hexMax: string = 'FF';
+    public r: number;
+    public g: number;
+    public b: number;
+    public a: number;
+
+    constructor (args: {[key: string]: number | string}) {
+        this.r = typeof args.r === 'number' ? Math.max(Math.min(args.r, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.g = typeof args.g === 'number' ? Math.max(Math.min(args.g, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.b = typeof args.b === 'number' ? Math.max(Math.min(args.b, mintColor.hexBase ** 2 - 1), 0) : 0;
+        this.a = typeof args.a === 'number' ? Math.max(Math.min(args.a, 1), 0) : 1;
+        if (typeof args.color === 'string') {
+            this.stringConstructor(args.color);
+        }
+    }
+
+    /**
+     * Constructor from a string argument
+     */
+    protected stringConstructor (str: string) : void {
+        if (str.startsWith('#')) {
+            this.hexConstructor(str);
+        } else {
+            if (~str.indexOf('linear-gradient')) {
+                str = str.substring(str.indexOf('linear-gradient'), str.length);
+            }
+            this.rgbConstructor(str);
+        }
+    }
+
+    /**
+     * Constructor from a hex argument
+     */
+    protected hexConstructor (hex: string) : void {
+        switch (hex.length) {
+            case 1:
+            case 5:
+            case 6:
+                return;
+            case 2:
+                hex = '#' + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + hex[1] + mintColor.hexMax;
+                break;
+            case 3:
+                hex = '#' + hex[1] + hex[1] + hex[1] + hex[2] + hex[2] + hex[2] + mintColor.hexMax;
+                break;
+            case 4:
+                hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3] + mintColor.hexMax;
+                break;
+            case 7:
+                hex += mintColor.hexMax;
+                break;
+            case 8:
+                hex += hex[hex.length - 1];
+                break;
+            default:
+                hex = hex.substring(0, 9);
+        }
+
+        this.r = parseInt(hex.substring(1, 3), mintColor.hexBase);
+        this.g = parseInt(hex.substring(3, 5), mintColor.hexBase);
+        this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
+        this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
+    }
+
+    /**
+     * Constructor from an rgba argument
+     */
+    protected rgbConstructor (rgb: string) : void {
+        let match: RegExpMatchArray | null = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
+        if (match) {
+            this.r = parseInt(match[1]);
+            this.g = parseInt(match[2]);
+            this.b = parseInt(match[3]);
+            this.a = parseFloat(match[4]);
+        }
+    }
+
+    /**
+     * Returns the perceived brightness of the color
+     */
+    getBrightness () : number {
+        if (this.a === 0) {
+            return 262;
+        }
+        if (!isNaN(this.r) && !isNaN(this.g) && !isNaN(this.b)) {
+            return Math.round((this.r * 299 + this.g * 587 + this.b * 144) / 1000);
+        }
+        return -1;
+    }
+}
+export default mintColor;

package/src/ts/imports/util/display.ts

@@ -1,72 +1,72 @@
-/**
- * Imports
- */
-import { EMintSide } from '../enums';
-import { MintSettings } from './settings';
-
-/**
- * Handles the display of elements
- */
-export abstract class MintDisplay {
-	/**
-     * Sets the element's height to its `innerHeight`, then to `auto` after a delay
-     * @param el - the element whose height will be set
-     * @param delay - the amount of time in milliseconds that the show animation will be active
-     * @param from - the side that the element is animating from
-     */
-    static show (el?: HTMLElement | null, delay: number = MintSettings.delay.default, from: EMintSide = EMintSide.Top) : void {
-        if (el) {
-            el.style.display = '';
-            requestAnimationFrame(() => {
-                if (from === EMintSide.Top || from === EMintSide.Bottom) {
-                    el.style.height = `${el.scrollHeight}px`;
-                } else {
-                    el.style.width = `${el.scrollWidth}px`;
-                }
-                
-                setTimeout(() => {
-                    if (from === EMintSide.Top || from === EMintSide.Bottom) {
-                        el.style.height = 'auto';
-                    } else {
-                        el.style.width = 'auto';
-                    }
-                }, delay);
-            });
-        }
-    }
-
-    /**
-     * Sets the element's height to 0
-     * @param el - the element whose height will be set
-     * @param delay - the amount of time in milliseconds that the show animation will be active
-     * @param from - the side that the element is animating from
-     */
-    static hide (el?: HTMLElement | null, delay: number = MintSettings.delay.default, from: EMintSide = EMintSide.Top) : void {
-        if (el) {
-            let height = el.scrollHeight,
-                width = el.scrollWidth,
-                transition = el.style.transition;
-            el.style.transition = '';
-            requestAnimationFrame(() => {
-                if (from === EMintSide.Top || from === EMintSide.Bottom) {
-                    el.style.height = `${height}px`;
-                } else {
-                    el.style.width = `${width}px`;
-                }
-                
-                el.style.transition = transition;
-                requestAnimationFrame(() => {
-                    if (from === EMintSide.Top || from === EMintSide.Bottom) {
-                        el.style.height = '0';
-                    } else {
-                        el.style.width = '0';
-                    }
-                });
-            });
-            setTimeout(() => {
-                el.style.display = 'none';
-            }, delay);
-        }
-    }
-};
-export default MintDisplay;
+/**
+ * Imports
+ */
+import { EMintSide } from '../enums';
+import { MintSettings } from './settings';
+
+/**
+ * Handles the display of elements
+ */
+export abstract class MintDisplay {
+	/**
+     * Sets the element's height to its `innerHeight`, then to `auto` after a delay
+     * @param el - the element whose height will be set
+     * @param delay - the amount of time in milliseconds that the show animation will be active
+     * @param from - the side that the element is animating from
+     */
+    static show (el?: HTMLElement | null, delay: number = MintSettings.delay.default, from: EMintSide = EMintSide.Top) : void {
+        if (el) {
+            el.style.display = '';
+            requestAnimationFrame(() => {
+                if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                    el.style.height = `${el.scrollHeight}px`;
+                } else {
+                    el.style.width = `${el.scrollWidth}px`;
+                }
+                
+                setTimeout(() => {
+                    if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                        el.style.height = 'auto';
+                    } else {
+                        el.style.width = 'auto';
+                    }
+                }, delay);
+            });
+        }
+    }
+
+    /**
+     * Sets the element's height to 0
+     * @param el - the element whose height will be set
+     * @param delay - the amount of time in milliseconds that the show animation will be active
+     * @param from - the side that the element is animating from
+     */
+    static hide (el?: HTMLElement | null, delay: number = MintSettings.delay.default, from: EMintSide = EMintSide.Top) : void {
+        if (el) {
+            let height = el.scrollHeight,
+                width = el.scrollWidth,
+                transition = el.style.transition;
+            el.style.transition = '';
+            requestAnimationFrame(() => {
+                if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                    el.style.height = `${height}px`;
+                } else {
+                    el.style.width = `${width}px`;
+                }
+                
+                el.style.transition = transition;
+                requestAnimationFrame(() => {
+                    if (from === EMintSide.Top || from === EMintSide.Bottom) {
+                        el.style.height = '0';
+                    } else {
+                        el.style.width = '0';
+                    }
+                });
+            });
+            setTimeout(() => {
+                el.style.display = 'none';
+            }, delay);
+        }
+    }
+};
+export default MintDisplay;

package/src/ts/imports/util/event.ts

@@ -1,93 +1,93 @@
-import MintSettings from "./settings";
-
-/**
- * Event helper functions
- */
-export abstract class MintEvent {
-	/**
-     * Ensures that a function `func` is run only after not being called for `wait` milliseconds
-     * @param func - the function to debounce
-     * @param wait - the amount of time to wait before running the function
-     * @returns - the debounced function
-     */
-    static debounce (func: Function, wait: number = MintSettings.delay.default) : Function {
-        let timer: number;
-        return function (e: any) {
-            if (timer) {
-                clearTimeout(timer);
-            }
-            timer = setTimeout(func, wait, e);
-        }
-    }
-
-    /**
-     * Ensures that a function `func` is run only after not being called for `wait` milliseconds
-     * @param func - the function to debounce
-     * @param wait - the amount of time to wait before running the function
-     * @returns - the debounced function as an EventListener
-     */
-    static debounceEvent (func: Function, wait: number = MintSettings.delay.default) : EventListener {
-        return MintEvent.debounce(func, wait) as EventListener;
-    }
-
-    /**
-     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
-     * @param func - the function to throttle
-     * @param wait - the amount of time between function calls
-     * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
-     * @returns - the throttled function
-     */
-    static throttle (func: Function,
-                     wait: number = MintSettings.delay.default,
-                     options?: {[key: string]: boolean}) : Function {
-        let context: any, args: any, result: any,
-            timeout: number, previous: number = 0,
-            later: Function = function () {
-                previous = options?.leading === false ? 0 : new Date().getTime();
-                timeout = 0;
-                result = func.apply(context, args);
-                if (!timeout) {
-                    context = args = null;
-                }
-            },
-            throttled: Function = function (this: any): any {
-                let now: number = new Date().getTime();
-                if (!previous && options?.leading === false) {
-                    previous = now;
-                }
-                let remaining: number = wait - now + previous;
-                context = this;
-                args = arguments;
-                if (remaining <= 0 || remaining > wait) {
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = 0;
-                    }
-                    previous = now;
-                    result = func.apply(context, args);
-                    if (!timeout) {
-                        context = args = null;
-                    }
-                } else if (!timeout && options?.trailing !== false) {
-                    timeout = window.setTimeout(later, remaining);
-                }
-                return result;
-            };
-
-        return throttled;
-    }
-
-    /**
-     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
-     * @param func - the function to throttle
-     * @param wait - the amount of time between function calls
-     * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
-     * @returns - the throttled function as an EventListener
-     */
-    static throttleEvent (func: Function,
-                          wait: number = MintSettings.delay.default,
-                          options?: {[key: string]: boolean}) : EventListener {
-        return MintEvent.throttle(func, wait, options) as EventListener;
-    }
-};
-export default MintEvent;
+import MintSettings from "./settings";
+
+/**
+ * Event helper functions
+ */
+export abstract class MintEvent {
+	/**
+     * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+     * @param func - the function to debounce
+     * @param wait - the amount of time to wait before running the function
+     * @returns - the debounced function
+     */
+    static debounce (func: Function, wait: number = MintSettings.delay.default) : Function {
+        let timer: number;
+        return function (e: any) {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(func, wait, e);
+        }
+    }
+
+    /**
+     * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+     * @param func - the function to debounce
+     * @param wait - the amount of time to wait before running the function
+     * @returns - the debounced function as an EventListener
+     */
+    static debounceEvent (func: Function, wait: number = MintSettings.delay.default) : EventListener {
+        return MintEvent.debounce(func, wait) as EventListener;
+    }
+
+    /**
+     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+     * @param func - the function to throttle
+     * @param wait - the amount of time between function calls
+     * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+     * @returns - the throttled function
+     */
+    static throttle (func: Function,
+                     wait: number = MintSettings.delay.default,
+                     options?: {[key: string]: boolean}) : Function {
+        let context: any, args: any, result: any,
+            timeout: number, previous: number = 0,
+            later: Function = function () {
+                previous = options?.leading === false ? 0 : new Date().getTime();
+                timeout = 0;
+                result = func.apply(context, args);
+                if (!timeout) {
+                    context = args = null;
+                }
+            },
+            throttled: Function = function (this: any): any {
+                let now: number = new Date().getTime();
+                if (!previous && options?.leading === false) {
+                    previous = now;
+                }
+                let remaining: number = wait - now + previous;
+                context = this;
+                args = arguments;
+                if (remaining <= 0 || remaining > wait) {
+                    if (timeout) {
+                        clearTimeout(timeout);
+                        timeout = 0;
+                    }
+                    previous = now;
+                    result = func.apply(context, args);
+                    if (!timeout) {
+                        context = args = null;
+                    }
+                } else if (!timeout && options?.trailing !== false) {
+                    timeout = window.setTimeout(later, remaining);
+                }
+                return result;
+            };
+
+        return throttled;
+    }
+
+    /**
+     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+     * @param func - the function to throttle
+     * @param wait - the amount of time between function calls
+     * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+     * @returns - the throttled function as an EventListener
+     */
+    static throttleEvent (func: Function,
+                          wait: number = MintSettings.delay.default,
+                          options?: {[key: string]: boolean}) : EventListener {
+        return MintEvent.throttle(func, wait, options) as EventListener;
+    }
+};
+export default MintEvent;