@appartmint/mint 2.1.1 → 2.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [

package/src/scss/imports/components/_header.scss

@@ -282,6 +282,7 @@
 		gap: 1rem;
 		width: auto;
 		text-decoration: none;
+		white-space: nowrap;
 
 		span {
 			margin: 0;

package/src/scss/imports/components/_landing.scss

@@ -12,18 +12,41 @@
 :root {
 	#{class(landing)} {
 		&.swiper {
-			width: 100vw;
 			max-width: 100vw;
-			@include fluid(top, map.get($break, xs) * 1px, map.get($break, sm) * 1px, -4px, -16px);
-			@include fluid(left, map.get($break, xs) * 1px, map.get($break, sm) * 1px, -4px, -16px);
-	
+			@include exit-padding;
+			
+			$padding-min-vw: map.get($break, $pad-min-vw) * 1px;
+			$padding-max-vw: map.get($break, $pad-max-vw) * 1px;
+			@include fluid(left, $padding-min-vw, $padding-max-vw, $pad-min-size * -1, $pad-max-size * -1);
+
 			.swiper-slide {
 				padding: 0;
 			}
 		}
+	}
+}
+
+#{class(landing)} {
+	#{class(video-bg)} {
+		align-items: center;
+		top: 0;
+		width: 100%;
+		margin: 0;
+		min-height: calc(100vh - css-var(header-height));
+		$padding-min-vw: map.get($break, $pad-min-vw) * 1px;
+		$padding-max-vw: map.get($break, $pad-max-vw) * 1px;
+		@include fluid(padding, $padding-min-vw, $padding-max-vw, $pad-min-size * 4, $pad-max-size * 4);
 		
-		#{class(video-bg)} {
-			margin: 0;
+		iframe, video {
+			position: absolute;
+
+			& + * {
+				#{class(grid)} {
+					@include break(lg) {
+						margin-bottom: 0;
+					}
+				}
+			}
 		}
 	}
 }

package/src/scss/imports/components/_video.scss

@@ -14,59 +14,22 @@
 		flex-direction: column;
 		align-items: flex-end;
 		justify-content: center;
+		flex-direction: row;
+		min-height: calc(100vh - css-var(header-height) + 10rem);
 		gap: 2rem;
 		position: relative;
+		@include exit-padding;
+		@include fluid-padding;
 
-		@include break(lg) {
-			flex-direction: row;
-			min-height: calc(100vh - css-var(header-height));
-			margin-bottom: 15%;
-		}
-
-		& > section {
-			@include break(lg) {
-				margin-bottom: -15%;
-			}
-		}
-
-		iframe, video {
+		iframe, video, #{class(image)}, #{class(embed)} {
+			position: absolute;
+			top: 0;
+			padding: 0;
 			width: 100%;
-			height: 100%;
+			height: calc(100vh - css-var(header-height));
+			border: none;
 			object-fit: cover;
 			pointer-events: none;
-
-			@include break(lg) {
-				position: absolute;
-				width: 100vw;
-				border: none;
-				padding: 0;
-			}
-
-			& + * {
-				#{class(grid)} {
-					@include break(lg) {
-						margin-bottom: -15%;
-					}
-				}
-			}
-		}
-
-		&#{class(overflow)} {
-			overflow: hidden;
-			margin-bottom: 0;
-
-			& > section {
-				@include break(lg) {
-					margin-bottom: 0;
-				}
-			}
-
-			iframe, video {
-				top: -10%;
-				left: -10%;
-				width: 120%;
-				height: 120%;
-			}
 		}
 	}
 }

package/src/scss/imports/global/_global.scss

@@ -105,7 +105,7 @@ main {
 				width: 100%;
 				padding: 0.25rem;
 
-				@include fluid(padding, map.get($break, xs) * 1px, map.get($break, sm) * 1px, 4px, 16px);
+				@include fluid-padding;
 
 				&+:not(#{prefix(partial-footer)}) {
 					height: 0;

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

@@ -5,5 +5,5 @@
 @charset 'utf-8';
 
 /// Imports
-@forward './util';
 @forward './vars';
+@forward './util';

package/src/scss/imports/util/_util.scss

@@ -10,6 +10,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'vars' as *;
 
 /// Library name
 /// @group Variables
@@ -746,8 +747,9 @@ $bootstrap5: false !default;
 /// @param {String} $max-vw - the maximum screen width of the fluid property
 /// @param {String} $min-size - the minimum value of the fluid property
 /// @param {String} $max-size - the maximum value of the fluid property
+/// @param {String} $base - the base value of the fluid property
 /// @output the definitions for the property at different screen sizes
-@mixin fluid ($prop, $min-vw, $max-vw, $min-size, $max-size) {
+@mixin fluid ($prop, $min-vw, $max-vw, $min-size, $max-size, $base: null) {
 	$u1: math.unit($min-vw);
 	$u2: math.unit($max-vw);
 	$u3: math.unit($min-size);
@@ -765,8 +767,17 @@ $bootstrap5: false !default;
 		@error 'The fluid mixin requires width and size arguments with the same units.';
 	}
 
-	// See if you can get rid of this wrapping & selector
-	& {
+	@if ($base) {
+		#{$prop}: calc($base + $min-size);
+
+		@media (min-width: $min-vw) {
+			#{$prop}: calc($base + #{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+		}
+
+		@media (min-width: $max-vw) {
+			#{$prop}: calc($base + $max-size);
+		}
+	} @else {
 		#{$prop}: $min-size;
 
 		@media (min-width: $min-vw) {
@@ -779,6 +790,27 @@ $bootstrap5: false !default;
 	}
 }
 
+/// Gives a container fluid padding
+/// @group Mixins
+///
+///
+@mixin fluid-padding {
+	$padding-min-vw: map.get($break, $pad-min-vw) * 1px;
+	$padding-max-vw: map.get($break, $pad-max-vw) * 1px;
+	@include fluid(padding, $padding-min-vw, $padding-max-vw, $pad-min-size, $pad-max-size);
+}
+
+/// Negates a page's padding
+/// @group Mixins
+///
+///
+@mixin exit-padding {
+	$padding-min-vw: map.get($break, $pad-min-vw) * 1px;
+	$padding-max-vw: map.get($break, $pad-max-vw) * 1px;
+	@include fluid(top, $padding-min-vw, $padding-max-vw, $pad-min-size * -1, $pad-max-size * -1);
+	@include fluid(width, $padding-min-vw, $padding-max-vw, $pad-min-size * 2, $pad-max-size * 2, 100%);
+}
+
 /// Generates css varibles for lighter, darker, or both variations
 /// @group Mixins
 ///
@@ -964,14 +996,11 @@ $bootstrap5: false !default;
 @mixin headers () {
 	@for $i from 1 through 6 {
 		h#{$i},
-		#{class(h#{$i})
-	}
-
-		{
-		@content;
+		#{class(h#{$i})} {
+			@content;
+		}
 	}
 }
-}
 
 
 /// Background clip text

package/src/scss/imports/util/_vars.scss

@@ -89,6 +89,10 @@ $font-size-desktop: (
 
 /// Structure
 $grid-gap: 2rem !default;
+$pad-min-vw: xs !default;
+$pad-max-vw: sm !default;
+$pad-min-size: 4px !default;
+$pad-max-size: 16px !default;
 
 /// Outline width
 $border-width: 0.125rem !default;