fixes

askScryfallStyles.css

@@ -6,28 +6,22 @@
     justify-items: center;
 }
 .urzaCard {
-    width: 360pt;
+    width: 90vw;
     text-align: center;
     grid-column: 1 / span 3;
 }
 .urzaCard > img {
-    width: 360pt;
+    width: 100%;
     height: auto;
 }
 .askScryfallGrid > * {
     /*border: 1px solid red;*/
 }
 .askScryfallButton {
-    width: auto;
+    height: auto;
-    height: 60pt;
+    width: 22vw;
     transition: 0.25s;
 }
-.askScryfallButton:hover {
-    height: 80pt;
-}
-.askScryfallButton:active {
-    height: 90pt !important;
-}
 #askScryfallResult {
     grid-column: 1 / span 3;
     padding: 2rem;
@@ -35,12 +29,12 @@
     background: var(--background-color-contrast);
     color: var(--font-color-contrast);
     border-radius: 1rem;
-    font: 2rem belerenb;
+    font: 1.5rem belerenb;
 }
 @media screen and (min-width: 864pt) {
     .askScryfallGrid {
         grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
-        grid-template-rows: 90pt auto !important;
+        grid-template-rows: 92pt auto !important;
     }
     .urzaCard {
         grid-column: 1;
@@ -50,3 +44,19 @@
         grid-column: 2 / span 3 !important;
     }
 }
+@media screen and (min-width: 380pt) {
+    .urzaCard {
+        width: 360pt;
+    }
+    .askScryfallButton {
+        height: auto;
+        width: 100pt;
+        transition: 0.25s;
+    }
+    .askScryfallButton:hover {
+        width: 110pt;
+    }
+    .askScryfallButton:active {
+        width: 120pt !important;
+    }
+}

data/scripts/main.js

@@ -117,9 +117,7 @@ class cardPlaceholder {
 		} else {
 			mainContext.globalAlpha = 1
 		}
-        console.log(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
         mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
-//        breaks here
 	}
 	cardMasterElement() {
 		var temporaryElement = document.createElement('div')
@@ -223,7 +221,6 @@ function drawCardObjects() {
 	mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
 	mainContext.globalCompositeOperation = 'destination-over'
     mainContext.drawImage(cardArt, scaleX(cardMasterList[0].x), scaleY(cardMasterList[0].y), scaleX(cardMasterList[0].width) * cardMasterList[0].zoom, scaleY(cardMasterList[0].height) * cardMasterList[0].zoom)
-    //breaks here
 	mainContext.globalCompositeOperation = 'destination-out'
 	//draw the corner cutters
 	mainContext.drawImage(cornerCutout, 0, 0, scaleX(59/1500), scaleX(59/1500))

data/scripts/palettes/darkMode.js

@@ -1,8 +1,7 @@
-rootStyles.setProperty('--background-color', '#141414')
+rootStyles.setProperty('--background-color', '#181818')
 rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
 rootStyles.setProperty('--interactable-color', '#202020')
 rootStyles.setProperty('--interactable-selected-color', '#2f2f2f')
-rootStyles.setProperty('--interactable-tiling', '100% 100%')
 rootStyles.setProperty('--input-color', '#282828')
 rootStyles.setProperty('--input-font-color', '#efefef')
 rootStyles.setProperty('--font-color', '#efefef')

data/scripts/palettes/dayRave.js

@@ -2,12 +2,11 @@ rootStyles.setProperty('--background-color', '#eaeaea')
 rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
 rootStyles.setProperty('--interactable-color', '#f5f5f5')
 rootStyles.setProperty('--interactable-selected-color', '#eaeaea')
-rootStyles.setProperty('--interactable-tiling', '100% 100%')
 rootStyles.setProperty('--input-color', '#efefef')
 rootStyles.setProperty('--input-font-color', '#000')
 rootStyles.setProperty('--font-color', '#000')
 rootStyles.setProperty('--font-color-contrast', '#000')
-rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png)')
+rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
 setCookie('colorPalette', 'dayRave')
 
 //Cycles through a rainbow!
@@ -24,7 +23,7 @@ var currentColorIndex = 0
 function changeColor() {
 	var colors = indexToColor(currentColorIndex)
 	var lightColors = indexToColor(currentColorIndex + lightLead)
-	rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ')')
+	rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
 	currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
 }
 function indexToColor(colorIndex) {

data/scripts/palettes/lightMode.js

@@ -1,8 +1,7 @@
 rootStyles.setProperty('--background-color', '#f5f5f5')
-rootStyles.setProperty('--background-color-contrast', '#eaeaea')
+rootStyles.setProperty('--background-color-contrast', '#e4e4e4')
 rootStyles.setProperty('--interactable-color', '#dfdfdf')
 rootStyles.setProperty('--interactable-selected-color', '#cccccc')
-rootStyles.setProperty('--interactable-tiling', '100% 100%')
 rootStyles.setProperty('--input-color', '#dadada')
 rootStyles.setProperty('--input-font-color', '#000')
 rootStyles.setProperty('--font-color', '#000')

data/scripts/palettes/nightRave.js

@@ -2,12 +2,11 @@ rootStyles.setProperty('--background-color', '#121212')
 rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
 rootStyles.setProperty('--interactable-color', '#202020')
 rootStyles.setProperty('--interactable-selected-color', '#555')
-rootStyles.setProperty('--interactable-tiling', '100% 100%')
 rootStyles.setProperty('--input-color', '#3a3a3a')
 rootStyles.setProperty('--input-font-color', '#efefef')
 rootStyles.setProperty('--font-color', '#000')
 rootStyles.setProperty('--font-color-contrast', '#efefef')
-rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png)')
+rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
 setCookie('colorPalette', 'nightRave')
 
 //Cycles through a rainbow!
@@ -24,7 +23,7 @@ var currentColorIndex = 0
 function changeColor() {
 	var colors = indexToColor(currentColorIndex)
 	var lightColors = indexToColor(currentColorIndex + lightLead)
-	rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ')')
+	rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
 	currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
 }
 function indexToColor(colorIndex) {

data/scripts/palettes/scholarMode.js

@@ -1,11 +1,10 @@
-rootStyles.setProperty('--background-color', 'none')
+rootStyles.setProperty('--background-color', 'url(data/site/images/palettes/darkWood.png) left/cover no-repeat fixed')
-rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png)')
+rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png) left/cover no-repeat')
 rootStyles.setProperty('--interactable-color', 'url(data/site/images/palettes/whitePaperTileable.png)')
 rootStyles.setProperty('--interactable-selected-color', 'url(data/site/images/palettes/whitePaperHighlightedTileable.png)')
-rootStyles.setProperty('--interactable-tiling', 'auto')
 rootStyles.setProperty('--input-color', 'url(data/site/images/palettes/whitePaperTileable.png)')
 rootStyles.setProperty('--input-font-color', '#000')
 rootStyles.setProperty('--font-color', '#eee')
 rootStyles.setProperty('--font-color-contrast', '#000')
-rootStyles.setProperty('--body-background', 'url(data/site/images/palettes/darkWood.png)')
+rootStyles.setProperty('--body-background', 'none')
 setCookie('colorPalette', 'scholarMode')

index.html

@@ -2,7 +2,6 @@
 <html>
 <head>
 	<script async src="data/scripts/cookies.js"></script>
-	<!-- <script async src="data/scripts/palettes/dayRave.js"></script> -->
 	<link rel="stylesheet" href="styles.css">
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -242,6 +241,7 @@
 	<script defer src="data/scripts/sortable.js"></script>
 	<script defer src="data/scripts/main.js"></script>
 	<script defer src="data/scripts/versions/versionM15.js"></script>
+	<!-- <script async src="data/scripts/palettes/nightRave.js"></script> -->
 </body>
 <footer class='footer'>
 	<div>

styles.css

@@ -38,10 +38,9 @@
 
 :root {
 	--background-color: #f5f5f5;
-	--background-color-contrast: #eaeaea;
+	--background-color-contrast: #e4e4e4;
 	--interactable-color: #dfdfdf;
 	--interactable-selected-color: #cccccc;
-	--interactable-tiling: 100% 100%;
 	--input-color: #dadada;
 	--input-font-color: #000;
 	--font-color: #000;
@@ -53,7 +52,6 @@ html {
 	font: 12pt georgia;
 	background: var(--background-color);
 	color: var(--font-color);
-	background-attachment: fixed;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -63,14 +61,10 @@ html, body {
 	margin: 0;
     border: 0;
     padding: 0;
-	/*overflow-x: hidden;*/
+	overflow-x: hidden;
 }
 body {
 	background: var(--body-background);
-	background-position: left;
-    background-repeat: no-repeat;
-	background-attachment: fixed;
-	background-size: cover;
 }
 a {
 	font: inherit;
@@ -83,7 +77,6 @@ a:hover {
 
 .title {
 	text-align: center;
-	/*color: var(--font-color);*/
 	font: 2.5rem 'belerenbsc';
 	padding: 1rem 0;
 }
@@ -99,7 +92,6 @@ a:hover {
     align-items: center;
     background: var(--interactable-color);
     color: var(--input-font-color);
-    background-size: var(--interactable-tiling);
     cursor: pointer;
 }
 .cardMasterElement > .handle {
@@ -166,7 +158,6 @@ img {
 #maskPicker > div, #framePicker > div {
 	background: var(--interactable-color);
 	color: var(--input-font-color);
-	background-size: var(--interactable-tiling);
     cursor: pointer;
 }
 #maskPicker > div {
@@ -185,7 +176,6 @@ img {
 	font: 1rem belerenbsc;
 	background: var(--interactable-color);
 	color: var(--input-font-color);
-	background-size: var(--interactable-tiling);
 	padding: 0.5rem;
     cursor: pointer;
 }
@@ -223,7 +213,6 @@ textarea {
 	padding: 0.5rem 0;
 	background: var(--interactable-color);
 	color: var(--input-font-color);
-	background-size: var(--interactable-tiling);
     cursor: pointer;
 }
 .tabPicker > div.tabOptionSelected {
@@ -267,13 +256,11 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	to {position: relative; left: 0px;}
 }
 .layerTitle {
-	/*color: inherit;*/
 	text-align: center;
 	font: 2rem 'belerenbsc';
 }
 .darkLayer {
 	background: var(--background-color-contrast);
-	background-size: 100% 100%;
 	color: var(--font-color-contrast);
 }
 .layer > div {
@@ -398,7 +385,6 @@ canvas {
 .footer {
 	padding: 1rem;
 	background: var(--background-color-contrast);
-	background-size: 100% 100%;
 	color: var(--font-color-contrast);
 	font: 0.6rem arial;
 	display: grid;
@@ -412,7 +398,6 @@ canvas {
     .mainGrid {
 		grid-template-columns: 750px auto;
 		justify-items: stretch;
-		/*padding: 0 1rem 1rem 1rem;*/
 	}
 }
 @media screen and (min-width: 800pt) { /*Screen is wide enough for cardLayerGrids to display side by side, and for more padding*/