@appartmint/mint 2.0.2 → 2.1.1

package/package.json

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

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

@@ -269,14 +269,6 @@
 		}
 	}
 
-	h1 {
-		display: flex;
-		white-space: nowrap;
-		align-items: center;
-		gap: 1rem;
-		margin: 0;
-	}
-
 	#{id(navbar)} {
 		display: flex;
 		align-items: center;
@@ -287,9 +279,14 @@
 	#{class(logo)} {
 		display: flex;
 		align-items: center;
+		gap: 1rem;
 		width: auto;
 		text-decoration: none;
 
+		span {
+			margin: 0;
+		}
+
 		img {
 			max-height: css-var(header-height);
 			width: auto;

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

@@ -8,9 +8,10 @@
 @use './backgrounds';
 @use './buttons';
 @use './cards';
-@use './embed';
 @use './footer';
 @use './header';
 @use './image';
+@use './landing';
 @use './recaptcha';
 @use './tables';
+@use './video';

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

@@ -0,0 +1,29 @@
+/// _landing.scss - Landing styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:map';
+@use '../util' as *;
+
+/// Landing Styles
+: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);
+	
+			.swiper-slide {
+				padding: 0;
+			}
+		}
+		
+		#{class(video-bg)} {
+			margin: 0;
+		}
+	}
+}

package/src/scss/imports/components/{_embed.scss → _video.scss}

@@ -1,14 +1,14 @@
-/// _embed.scss - Embed styles
+/// _video.scss - Video styles
 /// @author App Art Mint LLC
 ///
-/// @group Embed
+/// @group Video
 @charset 'utf-8';
 
 /// Imports
 @use '../util' as *;
 
-/// Embed Styles
-#{class(embed)} {
+/// Video Styles
+#{class(video)} {
 	&-bg {
 		display: flex;
 		flex-direction: column;
@@ -19,7 +19,7 @@
 
 		@include break(lg) {
 			flex-direction: row;
-			min-height: 100vh;
+			min-height: calc(100vh - css-var(header-height));
 			margin-bottom: 15%;
 		}
 
@@ -30,8 +30,6 @@
 		}
 
 		iframe, video {
-			top: 0;
-			left: 0;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
@@ -39,7 +37,6 @@
 
 			@include break(lg) {
 				position: absolute;
-				left: -1rem;
 				width: 100vw;
 				border: none;
 				padding: 0;

package/src/scss/imports/global/_animations.scss

@@ -11,16 +11,43 @@
 @use '../util' as *;
 
 /// Animations
-/// Cycle through instagram colors
-@keyframes instafade {
-    @for $i from 0 through 6 {
-        $percent: math.percentage(math.div($i, 6));
-        #{$percent} {
-            color: css-var(instagram-#{$i});
-        }
-    }
+@keyframes #{prefix(stretch-in)} {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.25);
+	}
+
+	70% {
+		transform: scale(1.15);
+	}
+
+	100% {
+		transform: scale(1.2);
+	}
+}
+
+@keyframes #{prefix(stretch-out)} {
+	0% {
+		transform: scale(1.2);
+	}
+
+	25% {
+		transform: scale(0.9);
+	}
+
+	50% {
+		transform: scale(1.05);
+	}
+
+	100% {
+		transform: scale(1);
+	}
 }
 
+
 /// CSS variables
 :root {
     @include css-var(delay-instant, delay(instant));
@@ -31,6 +58,8 @@
     @include css-var(delay-slow, delay(slow));
 }
 
+
+/// Animation classes
 #{class(fall-in)} {
     filter: opacity(0%);
     transform: translateY(-100px);
@@ -77,3 +106,34 @@
         transition: transform delay(med-fast) ease-out;
     }
 }
+
+#{class(stretch)} {
+	animation: #{prefix(stretch-out)} 0.5s ease forwards;
+	@include states(hover, focus) {
+		animation: #{prefix(stretch-in)} 0.75s ease forwards;
+	}
+
+	&-img {
+		img {
+			animation: #{prefix(stretch-out)} 0.5s ease forwards;
+		}
+
+		@include states(hover, focus) {
+			img {
+				animation: #{prefix(stretch-in)} 0.75s ease forwards;
+			}
+		}
+	}
+
+	&-icon {
+		i {
+			animation: #{prefix(stretch-out)} 0.5s ease forwards;
+		}
+
+		@include states(hover, focus) {
+			i {
+				animation: #{prefix(stretch-in)} 0.75s ease forwards;
+			}
+		}
+	}
+}