Update index.html

index.html

@@ -23,7 +23,7 @@
    		</DataObject>
   	</PageMap>
 	<meta name="thumbnail" content="http://cardconjurer.com/images/sampleCards/sample1.png">
-	<!-- Here is the stuff that does things? -->
+	<!-- Here's the stuff that does things? -->
 	<script type='application/ld+json'>
 	{
 		"@context": "http://schema.org/",
@@ -396,33 +396,31 @@
 			</div>
 			<div class="selectionGridTarget">
 				<div class="extras shown" id="extras-about">
-					<div class="text">
+					<div class="miniTitle">
 						Welcome to Card Conjurer! 
 					</div>
 					<div class="paragraph">
 						Card Conjurer is a program that creates custom Magic: The Gathering cards. There are already plenty of Magic card makers, but what sets Card Conjurer apart from the rest is its live-edit capabilities. Users can immediately see the effects of any change they make, which makes card customization easier and more enjoyable. Additionally, Card Conjurer offers more borders than any other website, including full art lands, planechase cards, miracle and nyx borders, and so much more.
 					</div>
-					<br>
+					<div class="miniTitle">
-					<div class="text">
 						About Me
 					</div>
 					<div class="paragraph">
 						Hi! My name is Kyle Burton and I am currently a high school student. I used to play Pokemon, but when a friend introduced me to Magic in 2013 I sold my pocket monsters and bought an M14 Intro Pack. Ever since that day Magic has been my all time favorite game. In addition to playing games, I've always <a href="https://www.youtube.com/watch?v=ERCzN91JicA" target="blank">loved technology.</a> During the 2017-18 school year I tought myself how to code Javascript, and a little bit of HTML and CSS. The following summer I created Kyle's Card Imager. (<a href="https://scryfall.com/card/5dn/134/krark-clan-ironworks" target="blank">KCI</a>) It was pretty simple but I soon began to add more border images like Miracle or Nyx. After a few months I decided to share my creation, so I renamed it Card Conjurer and uploaded it to Github, and then in April of 2019 I bought the domain <a href="#header" onclick="alert('You\'re already there, silly!')">cardconjurer.com</a>.
 					</div>
-					<br>
+					<div class="miniTitle">
-					<div class="text">
 						How You Can Help
 					</div>
 					<div class="paragraph">
-						I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link... Or you can check out my friend's youtube channel: Izzet Right?
+						I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link:
-					</div><br>
+					</div>
 					<div class="grid donateGrid selectionGrid">
 						<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></div>
 						<!-- <div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></div> -->
 						<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></div>
 						<div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">@ImKyle4815<img src="images/twitter.png"></div>
 						<div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="images/massdrop.png"></div>
-						<div onclick="window.open('https://www.youtube.com/channel/UC95Pd8lc8UWEkI96Nq_THvw', '_blank');" style="color:rgb(255,0,0);">Izzet Right?<img src="images/izzetright.png"></div>
+						<!-- <div onclick="window.open('https://www.youtube.com/channel/UC95Pd8lc8UWEkI96Nq_THvw', '_blank');" style="color:rgb(255,0,0);">Izzet Right?<img src="images/izzetright.png"></div> -->
 					</div>
 				</div>
 				<div class="extras" id="extras-symbolList">
@@ -458,7 +456,7 @@
 		<!-- <div class="adspace">
 			Ads?
 		</div> -->
-		<div class="sampleGrid grid text">
+		<div class="sampleGrid grid miniTitle">
 			Check out some samples<br>
 			<div class="noBorder">
 				<img id="sampleCardA" class="sampleCard">
@@ -515,8 +513,8 @@
 	src: url("data/fonts/mplantin-i.ttf");
 }
 
-/*Color Palette*/
 :root {
+	/*Color Palette*/
 	/*Regular*/
 	--color-background: #00000077;
 	--color-background-darker: #000000aa;
@@ -527,7 +525,7 @@
 /*Page-wide styling*/
 * {
 	font-family: belerenb;
-	font-size: 6vw;
+	font-size: 20pt; /*Master font size*/
 	user-select: none;
 	color: #eee;
 }
@@ -549,7 +547,7 @@ body {
 	width: calc(100% - 2px);
 }
 .mainGrid > div:not(.noVerticalPadding) {
-	padding: 8px 0px;
+	padding: 0.25em 0px;
 }
 .mainGrid > div:nth-child(odd) {
 	background: var(--color-background);
@@ -578,18 +576,18 @@ body {
 	font-size: 1.1em;
 	font-family: belerenbsc;
 	cursor: pointer;
-	padding: 3px;
+	padding: 0.1em;
-	border: 1px solid var(--color-primary);
+	border: 0.05em solid var(--color-primary);
 	background-color: var(--color-background);
 	-webkit-transition: 0.3333s;
   	transition: 0.3333s;
 }
 .selectionGrid > div:hover {
-	border: 4px solid var(--color-select);
+	border: 0.15em solid var(--color-select);
 	padding: 0px;
 }
 .selectionGridTarget {
-	padding: 24px;
+	padding: 1em;
 }
 .cmm, .extras {
 	display: none;
@@ -600,9 +598,6 @@ body {
 .sampleCard {
 	width: 100%;
 }
-.mainGrid.grid > .sampleGrid {
-	border-bottom-width: 1px;
-}
 
 /*Inputs and more*/
 /*dropdown*/
@@ -705,7 +700,7 @@ a {
 	 	background-size: cover;
 	}
 	* {
-		font-size: 28px;
+		font-size: 20pt; /*Master font size*/
 	}
 	header {
 		top: 0;
@@ -728,7 +723,7 @@ a {
 	}
 }
 @media only screen and (min-width: 1175px) {
-	.mainGrid:not(.plane) {
+	.mainGrid {
 		grid-template-columns: 750px auto;
 	}
 	.adspace {
@@ -740,12 +735,6 @@ a {
 	.sampleGrid {
 		grid-column: 1 / span 2;
 	}
-	.mainGrid.plane > .cmmArea {
-		grid-column: 1 / span 2;
-	}
-	.mainGrid.plane > .canvasContainer {
-		grid-column: 1 / span 2;
-	}
 }
 @media only screen and (orientation: landscape) {
 	.sampleCard {
@@ -758,14 +747,17 @@ a {
 	font-size: inherit;
 }
 .info {
-	font-size: 0.6em;
+	font-size: 0.7em;
+	border-top: 1px solid var(--color-primary);
 }
 
 /*Title*/
 #header {
-	/*max-height: 80px;*/
 	width: auto;
 }
+header {
+	border-bottom: 1px solid var(--color-primary);
+}
 header, .info {
 	text-align: center;
 	background-color: black;
@@ -778,21 +770,23 @@ header, .info {
 	height: 1em;
 }
 .symbolGrid {
-	margin-top: 8px;
 	grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
 	text-align: center;
 }
 .symbolGrid > div {
-	border: 4px solid var(--color-primary);
+	border: 0.1em solid var(--color-background);
-	border-radius: 36px;
+	border-radius: 1em;
 	background-color: var(--color-primary);
 }
 
 /*Sitewide text (bottom of the page)*/
-.text {
+.miniTitle {
 	text-align: center;
+	font-size: 1.2em;
+	padding-bottom: 0.125em;
 }
 .paragraph {
+	padding-bottom: 0.25em;
 	text-indent: 2em;
 }
 /*Donation buttons!*/