From 7255394221cf7c0d4aea945e4dc517b2b0435ef3 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Tue, 31 Mar 2020 14:30:21 -0700
Subject: [PATCH] fixes

---
 data/scripts/main.js |  3 ---
 index.html           | 19 +++++++++++--------
 styles.css           | 31 +++++++++++++++++++------------
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/data/scripts/main.js b/data/scripts/main.js
index 3da7ddd5..72a3b6a2 100644
--- a/data/scripts/main.js
+++ b/data/scripts/main.js
@@ -837,9 +837,6 @@ var textCodeReferenceArray = [
 ['{shadow#}', 'Adds a shadow # pixels away from the following text']
 ]
 function textCodeReference() {
-	// for (var i = 0; i < textCodeReferenceArray.length; i++) {
-	// 	document.getElementById('textCodeReference')
-	// }
 	textCodeReferenceArray.forEach(item => document.getElementById('textCodeReference').innerHTML += '<div>' + item[0] + '</div><div>' + item[1] + '</div>')
 }
 
diff --git a/index.html b/index.html
index a314895f..bd8d07b6 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,7 @@
 						Height: <input id='textEditorHeight' type='number' oninput='cardTextEdited()'>
 					</div>
 					<div id='textCodeReference'>
-						
+
 					</div>
 				</div>
 				<div id='artTab' class='hidden'>
@@ -96,13 +96,16 @@
 			        </div>
 				</div>
 				<div id='collectorTab' class='hidden'>
-					<div class="autoGrid">
-				        <input type="text" placeholder="Number" id="inputInfoNumber" oninput="bottomInfoUpdated()" value="">
-				        <input type="text" placeholder="Rarity" id="inputInfoRarity" oninput="bottomInfoUpdated()" value="P">
-				        <input type="text" placeholder="Set" id="inputInfoSet" oninput="bottomInfoUpdated()" value="MTG">
-				        <input type="text" placeholder="Language" id="inputInfoLanguage" oninput="bottomInfoUpdated()" value="EN">
-				        <input type="text" placeholder="Artist's Name" id="inputInfoArtist" oninput="bottomInfoUpdated()" value="">
-				    </div>
+					<div>
+						<div class="autoGrid">
+					        <input type="text" placeholder="Number" id="inputInfoNumber" oninput="bottomInfoUpdated()" value="">
+					        <input type="text" placeholder="Rarity" id="inputInfoRarity" oninput="bottomInfoUpdated()" value="P">
+					        <input type="text" placeholder="Set" id="inputInfoSet" oninput="bottomInfoUpdated()" value="MTG">
+					        <input type="text" placeholder="Language" id="inputInfoLanguage" oninput="bottomInfoUpdated()" value="EN">
+					        <input type="text" placeholder="Artist's Name" id="inputInfoArtist" oninput="bottomInfoUpdated()" value="">
+					    </div>
+					    Remember that you must properly credit the artist before downloading your card!
+					</div>
 				</div>
 				<div id='setSymbolTab' class='hidden'>
 					<div class="autoGrid">
diff --git a/styles.css b/styles.css
index 94c02c1a..542a2150 100644
--- a/styles.css
+++ b/styles.css
@@ -116,6 +116,7 @@ a:hover {
 	grid-gap: 0.1rem;
 }
 .autoGrid {
+	width: 100%;
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
 	grid-auto-rows: min-content;
@@ -248,12 +249,14 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	to {opacity: 1;}
 }
 @keyframes slide-from-left {
-	from {position: relative; left: -100vw;}
-	to {position: relative; left: 0px;}
+	0% {position: relative; left: -100vw;}
+	75% {position: relative; left: -10px;}
+	100% {position: relative; left: 0px;}
 }
 @keyframes slide-from-right {
-	from {position: relative; left: 100vw;}
-	to {position: relative; left: 0px;}
+	0% {position: relative; left: 100vw;}
+	75% {position: relative; left: 10px;}
+	100% {position: relative; left: 0px;}
 }
 .layerTitle {
 	text-align: center;
@@ -308,20 +311,24 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	transform: rotate(10deg) translate(-16%, 15%);
 }
 @keyframes sample-one {
-	from {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
-	to {transform: rotate(-10deg) translate(16%, 15%); position: relative; left: 0;}
+	0% {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
+	10% {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
+	100% {transform: rotate(-10deg) translate(16%, 15%); position: relative; left: 0;}
 }
 @keyframes sample-two {
-	from {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
-	to {transform: rotate(-5deg) translate(10%, 4%); position: relative; left: 0;}
+	0% {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
+	10% {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
+	100% {transform: rotate(-5deg) translate(10%, 4%); position: relative; left: 0;}
 }
 @keyframes sample-four {
-	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
-	to {transform: rotate(5deg) translate(-10%, 4%); position: relative; left: 0;}
+	0% {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
+	10% {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
+	100% {transform: rotate(5deg) translate(-10%, 4%); position: relative; left: 0;}
 }
 @keyframes sample-five {
-	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
-	to {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
+	0% {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
+	10% {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
+	100% {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
 }
 
 #inputColorPalette {