planes

data/borders/plane/border.js

@@ -0,0 +1,85 @@
+//============================================//
+//              Miniplane Border              //
+//============================================//
+//Change canvas size
+changeCanvasSize(1050, 750)
+imgFrame.load("none")
+//General Booleans
+cardData.miracle = false
+cardData.nyx = false
+cardData.legendary = false
+cardData.creature = false
+cardData.rulesBox = false
+cardData.titleTypeBoxes = false
+cardData.rareStamp = false
+//Specific Values
+cardData.manaSymbolDirection = "none"
+cardData.titleAlignment = "center"
+cardData.titleX = cardWidth / 2
+cardData.titleY = cheight(105)
+cardData.titleFontSize = cwidth(25)
+cardData.titleRight = cwidth(700)
+cardData.typeAlignment = "center"
+cardData.typeX = cardWidth / 2
+cardData.typeY = cheight(739)
+cardData.typeFontSize = cwidth(18)
+cardData.textX = cwidth(90)
+cardData.textY = cheight(790)
+document.getElementById("inputTextSize").value = 27
+cardData.textRight = cwidth(669)
+cardData.setSymbolY = cheight(727)
+cardData.setSymbolWidth = cwidth(55)
+cardData.setSymbolHeight = cheight(33)
+cardData.setSymbolX = cwidth(582)
+cardData.watermarkWidth = cwidth(660)
+cardData.watermarkHeight = cheight(210)
+cardData.watermarkY = cheight(870)
+cardData.cardArtX = cwidth(23)
+cardData.cardArtY = cheight(46)
+cardData.bottomInfoFunction = "bottomInfoPlanechase"
+cardData.horizontal = true
+//Images
+imgArtMask.load("data/borders/plane/imgArtMask.png")
+imgFrameMask.load("data/borders/plane/imgFrameMask.png")
+imgBorderMask.load("data/borders/plane/imgBorderMask.png")
+imgRulesMask.load("data/borders/plane/imgRulesMask.png")
+imgTypeMask.load("data/borders/plane/imgTypeMask.png")
+imgTitleMask.load("data/borders/plane/imgTitleMask.png")
+//Loads the Colors
+loadColors("white-Regular,high-High,mid-Middle,low-Low,none-Single")
+//Runs the things!
+sectionTextFunction()
+sectionFrameFunction()
+sectionOtherFunction()
+
+function bottomInfoPlanechase() {
+	var infoNumber = document.getElementById("inputInfoNumber").value
+	var infoRarity = document.getElementById("inputInfoRarity").value
+	var infoSet = document.getElementById("inputInfoSet").value
+	var infoLanguage = document.getElementById("inputInfoLanguage").value
+	var infoArtist = document.getElementById("inputInfoArtist").value
+	var infoCopyright = "CC \u2014 " + document.getElementById("inputInfoCopyright").value
+	if (infoCopyright == "CC \u2014 secretcode") {
+		var date = new Date()
+		var year = date.getFullYear()
+		infoCopyright = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
+	} else if (infoCopyright == "CC \u2014 ") {
+		infoCopyright = ""
+	}
+	var infoNumberSetLanguage = infoNumber + " " + infoSet + " \u00b7 " + infoLanguage + " "
+	textContext.fillStyle = "white"
+	textContext.font = cheight(18) + "px gothammedium"
+	var infoNumberSetLanguageWidth = textContext.measureText(infoNumberSetLanguage).width
+	textContext.font = cheight(19) + "px mplantin"
+	var infoCopyrightWidth = textContext.measureText(infoCopyright).width
+	var bottomLineStart = cardWidth / 2 - (infoNumberSetLanguageWidth + infoCopyrightWidth) / 2
+	textContext.fillText(infoCopyright, bottomLineStart + infoNumberSetLanguageWidth, cheight(1028))
+	textContext.font = cheight(18) + "px gothammedium"
+	textContext.fillText(infoNumberSetLanguage, bottomLineStart, cheight(1028))
+	textContext.font = cheight(19) + "px belerenbsc"
+	var infoArtistStart = cardWidth / 2 - (textContext.measureText(infoArtist).width + cheight(21)) / 2
+	imgArtistBrush.load("none", infoArtistStart, cheight(992), cheight(21), cheight(13))
+	textContext.mask(imgArtistBrush, "none", textContext.fillStyle)
+	textContext.fillText(infoArtist, infoArtistStart + cheight(21), cheight(1004))
+	drawCard()
+}

data/main.js

@@ -2,21 +2,31 @@
 //       Card Conjurer, by Kyle Burton        //
 //============================================//
 //Hi there :D
-window.onscroll = function() {scrollFunction()};
+//changeme new location
+window.onscroll = function() {scrollFunction()}
 window.onresize = function() {scrollFunction()}
 
 function scrollFunction() {
-	if (window.innerWidth > 900) {
+	var titleHeight = parseInt(window.innerWidth * 141 / 1236 - 10);
-		if (document.body.scrollTop < 70) {
+	if (window.innerWidth >= 750) {
-    		document.getElementById("header").style.maxHeight =  100 - document.body.scrollTop + "px";
+		if (window.innerWidth >= 970) {
+			titleHeight = 100
+		}
+		if (document.body.scrollTop < titleHeight - 30) {
+    		document.getElementById("header").style.maxHeight =  titleHeight - document.body.scrollTop
   		} else {
-    		document.getElementById("header").style.maxHeight = "30px";
+    		document.getElementById("header").style.maxHeight = "30px"
   		}
+  		document.getElementsByClassName("mainGrid")[0].style.marginTop = titleHeight + 10
 	} else {
-		document.getElementById("header").style.maxHeight = "80px";
+		document.getElementsByClassName("mainGrid")[0].style.marginTop = 0
+		document.getElementById("header").style.maxHeight = titleHeight
 	}
 }
-scrollFunction()
+
+
+
+
 
 //============================================//
 //     Anything I Like to Change Often :)     //
@@ -45,12 +55,16 @@ var defaultCardData = {
 	miracle:true, nyx:true, legendary:true, creature:true, rulesBox:true, pinline:true, rareStamp:true, titleTypeBoxes:true,
 	transparency:false,
 	specialImageA:false, specialImageB:false,
-	bottomInfoFunction:"bottomInfoM15"
+	bottomInfoFunction:"bottomInfoM15",
+	horizontal:false
 }
 var cardData = {}
 Object.assign(cardData, defaultCardData)
 //Function that restores image values for various things :)
 function backToDefault(version) {
+	if (cardWidth != 750 || cardHeight != 1050) {
+		changeCanvasSize(750, 1050)
+	}
 	//Default image values
 	imgLegendary.load("none", cwidth(20), cheight(20), cwidth(714), cheight(186))
 	imgLegendaryRight.load("none", cwidth(20), cheight(20), cwidth(714), cheight(186))
@@ -83,24 +97,26 @@ function backToDefault(version) {
 }
 
 //Set up canvases
-var cardCanvas = document.getElementById("cardCanvas")
+var canvas = document.getElementById("canvas")
-cardCanvas.width = cardWidth
+var context = canvas.getContext("2d")
-cardCanvas.height = cardHeight
+var canvasList = ["card", "mask", "frame", "text", "other", "transparent", "crop", "specialA", "specialB"]
-var card = cardCanvas.getContext("2d")
+for (var i = 0; i < canvasList.length; i ++) {
-function newCanvas(name) {
+	window[(canvasList[i] + "Canvas")] = document.createElement("canvas")
-	window[(name + "Canvas")] = document.createElement("canvas")
+	window[(canvasList[i] + "Context")] = window[(canvasList[i] + "Canvas")].getContext("2d")
-	window[(name + "Context")] = window[(name + "Canvas")].getContext("2d")
+	window[(canvasList[i] + "Canvas")].width = cardWidth
-	window[(name + "Canvas")].width = cardWidth
+	window[(canvasList[i] + "Canvas")].height = cardHeight
-	window[(name + "Canvas")].height = cardHeight
+}
+function changeCanvasSize(width, height) {
+	cardWidth = width
+	cardHeight = height
+	for (var i = 0; i < canvasList.length; i ++) {
+		window[(canvasList[i] + "Canvas")].width = cardWidth
+		window[(canvasList[i] + "Canvas")].height = cardHeight
+	}
+	imgCornerMask.load("none")
+	imgWhite.load("none")
+	imgBlank.load("none")
 }
-newCanvas("mask")
-newCanvas("frame")
-newCanvas("text")
-newCanvas("other")
-newCanvas("transparent")
-newCanvas("crop")
-newCanvas("specialA")
-newCanvas("specialB")
 
 //============================================//
 //          Custom Canvas Functions           //
@@ -131,6 +147,7 @@ CanvasRenderingContext2D.prototype.mask = function(image, masks, color, maskOpac
 
     if (image != "none") {
     	maskContext.drawImage(image, image.xVal, image.yVal, image.wVal, image.hVal)
+    	// console.log(image.yVal)
     }
     //If a color is provided, fill that in too.
     if (color != undefined && color != "none") {
@@ -234,10 +251,18 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
 						} else if (possibleCodeLower.slice(0, 6) == "{right" && possibleCodeLower.charAt(possibleCodeLower.length - 1) == "}") {
 							currentX += parseInt(possibleCodeLower.slice(6, possibleCodeLower.length - 1))
 							x += parseInt(possibleCodeLower.slice(6, possibleCodeLower.length - 1))
+						} else if (possibleCodeLower == "{plane}") {
+							this.drawImage(manaSymbolImageList[56], currentX + cheight(5), currentY - cheight(25), cheight(67), cheight(60))
+							currentX += cheight(85)
+							x += cheight(85)
 						} else if (manaSymbolCodeList.includes((possibleCodeLower.replace("{", "").replace("}", "")))) {
 							//It's a mana symbol! Draw it.
-							this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.replace("{", "").replace("}", ""))], currentX + textFontSize * 0.054, currentY - textFontSize * 0.7, textFontSize * 0.77, textFontSize * 0.77)
+							var extraWidth = 1
-							currentX += textFontSize * 0.84
+							if (possibleCodeLower.replace("{", "").replace("}", "") == "chaos") {
+								extraWidth = 1.15
+							}
+							this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.replace("{", "").replace("}", ""))], currentX + textFontSize * 0.054, currentY - textFontSize * 0.7, textFontSize * 0.77 * extraWidth, textFontSize * 0.77)
+							currentX += textFontSize * 0.77 * extraWidth + textFontSize * 0.07
 						} else {
 							//It's not a code. treat it like a regular word.
 							wordToWrite = possibleCode
@@ -416,6 +441,7 @@ function createImage(name, section) {
 	window[name].yVal = 0
 	window[name].wVal = cardWidth
 	window[name].hVal = cardHeight
+	window[name].name = name
 	if (section != undefined) {
 		window[name].cardSection = section
 	} else {
@@ -427,8 +453,14 @@ function createImage(name, section) {
 		this.loadingStatus = false
 		if (this.cardSection != "none") {
 			window[this.cardSection] -= 1
+			if (this.cardSection == "sectionFrame") {
+				//console.log("Finished loading. Current total: " + window[this.cardSection] + " " + this.name)
+			}
 			if (window[this.cardSection] <= 0) {
 				//Once all the images under a certain section have loaded, that section's function will be run
+				if (this.cardSection == "sectionFrame") {
+					//console.log("We're all done loading!\n\n\n\n\n")
+				}
 				window[this.cardSection + "Function"]()
 			}
 		}
@@ -440,14 +472,17 @@ Image.prototype.load = function(source, x, y, w, h) {
 	if (source != "none") {
 		if (this.loadingStatus != true && this.cardSection != "none") {
 			window[this.cardSection] += 1
+			if (this.cardSection == "sectionFrame") {
+				//console.log("Starting to load. Current total: " + window[this.cardSection] + " " + this.name)
+			}
 		}
 		this.loadingStatus = true
 		this.src = source
 	}
-	if (x != undefined) {this.xVal = x} else if (this.xVal == undefined) {this.xVal = 0}
+	if (x != undefined) {this.xVal = x} else /*if (this.xVal == undefined)*/ {this.xVal = 0}
-	if (y != undefined) {this.yVal = y} else if (this.yVal == undefined) {this.yVal = 0}
+	if (y != undefined) {this.yVal = y} else /*if (this.yVal == undefined)*/ {this.yVal = 0}
-	if (w != undefined) {this.wVal = w} else if (this.wVal == undefined) {this.wVal = cardWidth}
+	if (w != undefined) {this.wVal = w} else /*if (this.wVal == undefined)*/ {this.wVal = cardWidth}
-	if (h != undefined) {this.hVal = h} else if (this.hVal == undefined) {this.hVal = cardHeight}
+	if (h != undefined) {this.hVal = h} else /*if (this.hVal == undefined)*/ {this.hVal = cardHeight}
 }
 
 //Loads images via URL
@@ -720,28 +755,36 @@ function sectionOtherFunction() {
 
 function drawCard() {
 	//Clears the card
-	// card.clearRect(0, 0, cardWidth, cardHeight)
+	cardContext.mask(imgWhite, "none", document.getElementById("inputBorderColor").value)
-	card.mask(imgWhite, "none", document.getElementById("inputBorderColor").value)
 	//Draws the card art
-	card.drawImage(imgCardArt, parseInt(document.getElementById("inputCardArtX").value) + cardData.cardArtX, parseInt(document.getElementById("inputCardArtY").value) + cardData.cardArtY, imgCardArt.width * document.getElementById("inputCardArtZoom").value / 100, imgCardArt.height * document.getElementById("inputCardArtZoom").value / 100)
+	cardContext.drawImage(imgCardArt, parseInt(document.getElementById("inputCardArtX").value) + cardData.cardArtX, parseInt(document.getElementById("inputCardArtY").value) + cardData.cardArtY, imgCardArt.width * document.getElementById("inputCardArtZoom").value / 100, imgCardArt.height * document.getElementById("inputCardArtZoom").value / 100)
 	//Might do something special? Usually the ability lines for planeswalkers
 	if (cardData.specialImageA == true) {
-		card.drawImage(specialACanvas, 0, 0, cardWidth, cardHeight)
+		cardContext.drawImage(specialACanvas, 0, 0, cardWidth, cardHeight)
 	}
 	//Draws the card frame
-	card.drawImage(frameCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawImage(frameCanvas, 0, 0, cardWidth, cardHeight)
 	//Might do something special? Usually the ability icons for planeswalkers
 	if (cardData.specialImageB == true) {
-		card.drawImage(specialBCanvas, 0, 0, cardWidth, cardHeight)
+		cardContext.drawImage(specialBCanvas, 0, 0, cardWidth, cardHeight)
 	}
 	//Draws the card text
-	card.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
 	//Draws the other stuff
-	card.drawImage(otherCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawImage(otherCanvas, 0, 0, cardWidth, cardHeight)
 	//Erase anything if needed
-	card.globalCompositeOperation = "destination-out"
+	cardContext.globalCompositeOperation = "destination-out"
-	card.mask(imgCornerMask)
+	cardContext.mask(imgCornerMask)
-	card.globalCompositeOperation = "source-over"
+	cardContext.globalCompositeOperation = "source-over"
+	//Draws the card onto the visible canvas
+	context.clearRect(0, 0, canvas.width, canvas.height)
+	if (cardData.horizontal) {
+		context.rotate(-90 * Math.PI / 180)
+		context.drawImage(cardCanvas, -canvas.height, 0, canvas.height, canvas.width)
+		context.rotate(90 * Math.PI / 180)
+	} else {
+		context.drawImage(cardCanvas, 0, 0, canvas.width, canvas.height)
+	}
 }
 
 //============================================//
@@ -910,12 +953,14 @@ function loadNyxImages() {
 	}
 }
 function changePowerToughnessColor() {
+	if (cardData.creature) {
 		if (document.getElementById("inputCheckboxFrameRight").checked) {
 			imgPowerToughness.load(document.getElementById("inputFrameRightColor").value + 'pt.png')
 		} else {
 			imgPowerToughness.load(document.getElementById("inputFrameColor").value + 'pt.png')
 		}
 	}
+}
 for (var i = 0; i < document.getElementsByClassName("changesFrame").length; i++) {
 	document.getElementsByClassName("changesFrame")[i].addEventListener("change", function() {loadLegendaryImages(); loadRareStampImages(); loadNyxImages(); loadMiracleImages(); changePowerToughnessColor()}, false)
 }
@@ -980,12 +1025,12 @@ function checkCookies() {
             alert("Thanks for using Card Conjurer! Unfortunately different browsers treat custom fonts differently and it appears that you are using a browser other than Chrome. Everything may work perfectly, but if you notice that the text looks odd try switching to Chrome.")
         }
         setCookie("visited", "true")
-        setCookie("cookieUpdated3", "true")
+        setCookie("cookieUpdated4", "true")
 	} else {
 		console.log("Welcome back to Card Conjurer!")
-		if (getCookie("cookieUpdated3") != "true") {
+		if (getCookie("cookieUpdated4") != "true") {
-			alert("Card Conjurer has been updated since your last visit. After reworking the system I haven't had time to add all the old border styles back, but feel free to contact me at CardConjurerMTG@gmail.com if you would like to request a border style or have any questions. \r\n\r\nNewest border style: Tokens")
+			alert("Card Conjurer has been updated since your last visit. After reworking the system I haven't had time to add all the old border styles back, but feel free to contact me at CardConjurerMTG@gmail.com if you would like to request a border style or have any questions. \r\n\r\nNewest border style: Plane")
-   	    	setCookie("cookieUpdated3", "true")
+   	    	setCookie("cookieUpdated4", "true")
 		} else {
 			console.log("There are no new updates since your last visit.")
 			if (getCookie("donationRequest") != "true") {
@@ -1013,13 +1058,14 @@ function cheight(originalValue = 1050, originalCardHeight = 1050) {
 setTimeout(function(){checkCookies()}, 1005)
 backToDefault("m15")
 loadScript("data/other/setCodeList.js")
+scrollFunction()
 //changeme
 setTimeout(function(){sectionTextFunction()}, 250)
 setTimeout(function(){sectionTextFunction()}, 500)
 setTimeout(function(){sectionTextFunction()}, 1000)
 // Only for working on frames n' stuff :)
 // setTimeout(function(){
-// 	document.getElementById("inputCardVersion").value = "tokenTextless"
+// 	document.getElementById("inputCardVersion").value = "plane"
 // 	document.getElementById("inputCardVersion").onchange()
 // }, 500)
 

index.html

@@ -14,7 +14,7 @@
 	<meta name="theme-color" content="#64ca2f">
 	<!-- Other things -->
 	<meta charset="UTF-8">
-	<meta id="pageViewport" name="viewport" content="user-scalable=no,width=780">
+<!-- 	<meta id="pageViewport" name="viewport" content="user-scalable=no,width=780"> -->
 	<PageMap>
     	<DataObject type="thumbnail">
       		<Attribute name="src" value="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png"/>
@@ -23,14 +23,14 @@
    		</DataObject>
   	</PageMap>
 	<meta name="thumbnail" content="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png">
-	<script>
+<!-- 	<script>
 		window.onload = function() {
 		    if (screen.width > 780) {
 		        var myViewPort = document.getElementById("pageViewport");
 		        myViewPort.setAttribute("content", "width=device-width, initial-scale=1");
 		    }
 		}
-	</script>
+	</script> -->
 	<!-- Here is the stuff that does things? -->
 	<script type='application/ld+json'>
 	{
@@ -69,7 +69,7 @@
 <body>
 	<div class="grid mainGrid">
 		<div class="canvasContainer">
-			<canvas id="cardCanvas"></canvas>
+			<canvas id="canvas" width="750" height="1050"></canvas>
 		</div>
 		<div class="cmmArea noVerticalPadding">
 			<div class="grid selectionGrid">
@@ -89,13 +89,14 @@
 					<span class="dropdown">
 						<select onchange="backToDefault(this.value)" id="inputCardVersion">
 							<option value="m15">M15</option>
+							<option value="planeswalker">Planeswalker (M15)</option>
 							<option value="tokenTextless">Token (Textless)</option>
 							<option value="tokenText">Token (Regular)</option>
 							<option value="tokenTall">Token (Tall)</option>
-							<option value="miniPlane">Mini-Plane</option>
-							<option value="planeswalker">Planeswalker (M15)</option>
 							<option value="fullArtLandM15">Full Art Land (M15)</option>
 							<option value="fullArtLandUnstable">Full Art Land (Unstable)</option>
+							<option value="plane">Plane</option>
+							<option value="miniPlane">Mini-Plane</option>
 						</select>
 					</span>
 					<br><br>
@@ -382,9 +383,9 @@
 				</div> -->
 			</div>
 		</div>
-		<div class="adspace">
+		<!-- <div class="adspace">
 			Ads?
-		</div>
+		</div> -->
 		<div class="tutorialArea noVerticalPadding">
 			<div class="grid selectionGrid">
 				<div onclick="toggleView('about', 'extras')">About</div>
@@ -399,18 +400,18 @@
 						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, planeswalkers, miracle and nyx borders, and so much more.
+						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="text">
 						About Me
 					</div>
 					<div class="paragraph">
-						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.
+						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="text">
-						Donate?
+						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?
@@ -425,7 +426,7 @@
 					</div>
 				</div>
 				<div class="extras" id="extras-symbolList">
-					Each of the following codes must include '{' before each code and '}' after.
+					Each of the following codes must be sandwhiched between curly brackets (e.g., '{t}')
 					<div class="symbolGrid grid" id="symbolList">
 						
 					</div>
@@ -454,9 +455,9 @@
 				</div>
 			</div>
 		</div>
-		<div class="adspace">
+		<!-- <div class="adspace">
 			Ads?
-		</div>
+		</div> -->
 		<div class="sampleGrid grid text">
 			Check out some samples<br>
 			<div class="noBorder">
@@ -528,14 +529,12 @@
 /*Page-wide styling*/
 * {
 	font-family: belerenb;
-	font-size: 6vw;
+	font-size: 32px;
 	user-select: none;
 	color: #eee;
-	-webkit-transition: 0.3333s;
-  	transition: 0.3333s;
 }
 html {
-	background: #333;
+	background-color: #333;
 }
 body {
 	margin: 0;
@@ -550,7 +549,6 @@ body {
 	border-color: var(--color-border-main);
 	border-width: 1px 1px 0px 1px;
 	width: calc(100% - 2px);
-	
 }
 .mainGrid > div:not(.noVerticalPadding) {
 	padding: 8px 0px;
@@ -561,14 +559,21 @@ body {
 .mainGrid > div:nth-child(even) {
 	background: var(--color-gray-darker);
 }
-.mainGrid > div.canvasContainer {
-	text-align: center;
-	width: calc(100% - 1px);
-}
 .selectionGrid {
 	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
 	text-align: center;
 }
+.mainGrid > div.canvasContainer {
+	padding: 0;
+	text-align: center;
+}
+#canvas {
+	display: block;
+	max-width:750px;
+	width: 100%;
+	height: auto;
+	margin: 0px auto;
+}
 
 /*Card manipulation menu grid*/
 .selectionGrid > div {
@@ -578,6 +583,8 @@ body {
 	padding: 3px;
 	border: 1px solid var(--color-border-selection-grid);
 	background-color: var(--color-gray);
+	-webkit-transition: 0.3333s;
+  	transition: 0.3333s;
 }
 .selectionGrid > div:hover {
 	border: 4px solid var(--color-hover-grid);
@@ -646,6 +653,8 @@ body {
 	top: 0px;
 	left: 0px;
 	cursor: pointer;
+	-webkit-transition: 0.5s;
+  	transition: 0.5s;
 }
 .checkbox input:checked ~ label {
 	background: var(--color-hover-grid);
@@ -681,18 +690,50 @@ a:link, a:visited {
 a:hover, a:active {
 	color: #999;
 }
+a {
+	-webkit-transition: 0.3333s;
+  	transition: 0.3333s;
+}
 
 .adspace {
 	display: none;
 }
 
 /*Desktop*/
-@media only screen and (min-width: 1195px) {
+@media only screen and (min-width: 750px) {
-	.canvasContainer {
+	html {
+		background: url("images/background.png") no-repeat center center fixed;
+	  	-webkit-background-size: cover;
+	  	-moz-background-size: cover;
+	 	-o-background-size: cover;
+	 	background-size: cover;
+	}
+	* {
+		font-size: 28px;
+	}
+	header {
+		top: 0;
+	}
+	footer {
+		bottom: 0;
+	}
+	header, footer {
+		position: fixed;
+		width: 100%;
+		z-index: 1000;
+	}
+	#header {
+		max-height: 100px;
 		width: auto;
 	}
+	.mainGrid {
+		margin-top: 110px;
+		margin-bottom: 1.1em;
+	}
+}
+@media only screen and (min-width: 1175px) {
 	.mainGrid:not(.plane) {
-		grid-template-columns: calc(750px + 0.7em) auto;
+		grid-template-columns: 750px auto;
 	}
 	.adspace {
 		grid-column: 1 / span 2;
@@ -709,50 +750,12 @@ a:hover, a:active {
 	.mainGrid.plane > .canvasContainer {
 		grid-column: 1 / span 2;
 	}
-	header {
-		top: 0;
-	}
-	footer {
-		bottom: 0;
-	}
-	header, footer {
-		position: fixed;
-		width: 100%;
-		z-index: 1000;
-	}
-	#header {
-		-webkit-transition: 0s;
-  		transition: 0s;
-		max-height: 100px;
-		width: auto;
-	}
-	.mainGrid {
-		margin-top: 110px;
-		margin-bottom: 1.1em;
-	}
-}
-@media only screen and (min-width: 1455px) {
-	.mainGrid.plane {
-		grid-template-columns: calc(1050px + 0.7em) auto;
-	}
 }
 @media only screen and (orientation: landscape) {
 	.sampleCard {
 		width: 32.8%;
 	}
 }
-@media only screen and (min-width: 781px) {
-	html {
-		background: url("images/background.png") no-repeat center center fixed;
-	  	-webkit-background-size: cover;
-	  	-moz-background-size: cover;
-	 	-o-background-size: cover;
-	 	background-size: cover;
-	}
-	* {
-		font-size: 28px;
-	}
-}
 
 /*Text and stuff :)*/
 .info > * {
@@ -764,13 +767,13 @@ a:hover, a:active {
 
 /*Title*/
 #header {
-	max-height: 80px;
+	/*max-height: 80px;*/
 	width: auto;
 }
 header, .info {
 	text-align: center;
 	background-color: black;
-	padding: 5px;
+	padding: 5px 0px;
 }
 
 /*symbol grid*/