✨ Added preview window animations

- Preview window will now move with sliding animation

index.css

@@ -194,19 +194,20 @@ input:checked + .slider:before {
 }
 
 textarea {
+	display: flex;
+	flex-grow: 1;
 	width: 50vw;
 	height: 100%;
+	padding: 16px;
 	resize: none;
-	display: flex;
-	flex-grow: 1;
 	background-color: var(--bg-color);
 	color: var(--font-color);
-	padding: 16px;
 	line-height: 2;
 	font-size: 16px;
 	font-weight: 600;
 	font-family: 'Roboto Mono', "SF Mono", "Lucida Console", Monaco, monospace;
 	z-index: 0;
+	transition: width .2s, padding .4s;
 }
 
 .markdown {
@@ -216,6 +217,7 @@ textarea {
 	overflow: auto;
 	padding: 16px;
 	font-family: 'Segoe UI', 'Arial', 'Roboto', 'Noto', sans-serif;
+	transition: width .2s, padding .4s;
 }
 
 h1,

index.js

@@ -151,24 +151,26 @@ const apply = (e) => {
 	keyUp();
 }
 const preview = (e) => {
-	let editor = document.getElementById('editor');
 	let viewer = document.getElementById('viewer');
 	let mark = document.getElementById('getm');
 	switch (e) {
 		case 'nill':
-			editor.style.display = 'none';
-			viewer.style.display = 'flex';
+			viewer.style.width = '100vw';
+			viewer.style.padding = "16px";
 			mark.style.width = "0";
+			mark.style.padding = "0";
 			break;
 		case 'half':
-			editor.style.display = 'flex';
-			viewer.style.display = 'flex';
+			viewer.style.width = '50vw';
+			viewer.style.padding = "16px";
 			mark.style.width = "50vw";
+			mark.style.padding = "16px";
 			break;
 		case 'full':
-			editor.style.display = 'flex';
-			viewer.style.display = 'none';
+			viewer.style.width = '0';
+			viewer.style.padding = "0";
 			mark.style.width = "100vw";
+			mark.style.padding = "16px";
 			break;
 	}
 }