add(layout,page): added reveal animation for layout(global) and zoomIn animation for page(/)

move(animations): styles -> tailwind
add(styles): wrapper

1 files changed, 6 insertions, 201 deletions

diff --git a/app/styles.css b/app/styles.css
index 33729de..6acdf80 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -100,6 +100,12 @@ body::-webkit-scrollbar {
     display: none;
 }
 
+.wrapper {
+	background: none repeat scroll 0 0 var(--background);
+	margin: 0 auto;
+	overflow: hidden;
+}
+
 @media (prefers-reduced-motion: no-preference) {
     :has(:target) {
         scroll-behavior: smooth;
@@ -107,148 +113,6 @@ body::-webkit-scrollbar {
 
 	/* animation ============================================== */
 
-	@keyframes slideInTop {
-		from {
-			transform: translateY(-300px);
-		}
-		to {
-			transform: translateY(0);
-		}
-	}
-
-	@keyframes bounce {
-		0%, 20%, 50%, 80%, 100% {
-			transform: translateY(0px);
-		}
-		40% {
-			transform: translateY(30px);
-		}
-		80% {
-			transform: translateY(-15px);
-		}
-	}
-
-	@keyframes zoomIn {
-		0% {
-			scale: 0.01;
-		}
-		65% {
-			scale: 1.05;
-		}
-		100% {
-			scale: 1;
-			position: relative;
-		}
-	}
-
-	@keyframes zoomOut {
-		from {
-			transform: scale(1);
-		}
-		to {
-			transform: scale(0.01);
-		}
-	}
-
-	@keyframes fadeZoomIn {
-		from {
-			opacity: 0.35;
-			scale: 1.15;
-		}
-		to {
-			opacity: 1;
-			scale: 1;
-		}
-	}
-
-	@keyframes reveal {
-		from {
-			-webkit-filter: blur(32px);
-			-moz-filter: blur(32px);
-			-o-filter: blur(32px);
-			-ms-filter: blur(32px);
-			filter: blur(32px);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
-			transform: scale(2);
-		}
-	}
-
-	@keyframes shake {
-		0% { transform: rotate(0deg); }
-		25% { transform: rotate(.5deg); }
-		50% { transform: rotate(0eg); }
-		75% { transform: rotate(-.5deg); }
-		100% { transform: rotate(0deg); }
-	}
-
-	@keyframes background-pan {
-		from {
-			background-position: 0% center;
-		}
-		to {
-			background-position: -200% center;
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			scale: 0.8;
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-			scale: 1;
-		}
-	}
-
-	@keyframes fadeOut {
-		from {
-
-		}
-		to {
-			opacity: 0;
-			scale: 0.8
-		}
-	}
-
-	@keyframes scroll {
-		from {
-			opacity: 0.8;
-			scale: 0.75;
-		}
-		to {
-			opacity: 1;
-			scale: 1;
-		}
-	}
-
-	@keyframes rotate {
-		from {
-			rotate: 0deg;
-		}
-		
-		50% {
-			scale: 1 1.25;
-		}
-		
-		to {
-			rotate: 360deg;
-		}
-	}
-
-	@keyframes minimize {
-		from {
-			scale: 1;
-			opacity: 1;
-		}
-		to {
-			scale: 0;
-			opacity: 0;
-		}
-	}
-
-
 	/* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
@@ -291,63 +155,6 @@ body::-webkit-scrollbar {
 		animation-duration: 1s;
 	}
 
-	/* real utility classes */
-
-	.animate.slideInTop {
-		animation-name: slideInTop;
-		-webkit-transition-timing-function: ease-in;
-		transition-timing-function: ease-in;
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	.animate.bounce {
-		-webkit-animation-name: bounce;
-		animation-name: bounce;
-	}
-
-	.animate.zoomIn {
-		-webkit-transition-timing-function: linear;
-		transition-timing-function: linear;
-		-webkit-animation-name: reveal;
-		animation-name: zoomIn;
-	}
-
-	.animate.zoomOut {
-		-webkit-transition-timing-function: linear;
-		transition-timing-function: linear;
-		-webkit-animation-name: zoomOut;
-		animation-name: zoomOut;
-	}
-
-	.animate.reveal {
-		animation-duration: 500ms;
-		-webkit-transition-timing-function: linear;
-		transition-timing-function: linear;
-		-webkit-animation-name: reveal;
-		animation-name: reveal;
-	}
-
-	.animate.shake {
-		-webkit-animation-name: shake;
-		animation-name: shake;
-	}
-
-	.animate.fadeIn {
-		-webkit-animation-name: fadeIn;
-		animation-name: fadeIn;
-	}
-
-	.animate.fadeOut {
-		-webkit-animation-name: fadeOut;
-		animation-name: fadeOut;
-	}
-
-	.animate.fadeZoomIn {
-		-webkit-animation-name: fadeZoomIn;
-		animation-name: fadeZoomIn;
-	}
-
 	.aniamte.persist {
 		animation-fill-mode: forwards;
 	}
@@ -408,5 +215,3 @@ a:hover, Button:hover {
 a:active, Button:active {
     transform: scale(0.9);
 }
-
-