upgrayedd

data/scripts/palettes/darkMode.js

@@ -1,11 +1,11 @@
-rootStyles.setProperty('--background-color', '#1c1c1c')
+rootStyles.setProperty('--background-color', '#121212')
-rootStyles.setProperty('--background-color-contrast', '#111')
+rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
-rootStyles.setProperty('--interactable-color', '#333')
+rootStyles.setProperty('--interactable-color', '#202020')
-rootStyles.setProperty('--interactable-selected-color', '#555')
+rootStyles.setProperty('--interactable-selected-color', '#2f2f2f')
 rootStyles.setProperty('--interactable-tiling', '100% 100%')
-rootStyles.setProperty('--input-color', '#3a3a3a')
+rootStyles.setProperty('--input-color', '#282828')
-rootStyles.setProperty('--input-font-color', '#fff')
+rootStyles.setProperty('--input-font-color', '#efefef')
-rootStyles.setProperty('--font-color', '#fff')
+rootStyles.setProperty('--font-color', '#efefef')
-rootStyles.setProperty('--font-color-contrast', '#eee')
+rootStyles.setProperty('--font-color-contrast', '#efefef')
 rootStyles.setProperty('--body-background', 'none')
 setCookie('colorPalette', 'darkMode')

data/scripts/palettes/dayRave.js

@@ -0,0 +1,61 @@
+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(images/lowpoly.png)')
+setCookie('colorPalette', 'dayRave')
+
+//Cycles through a rainbow!
+if (currentColorIndex == undefined) {
+	document.getElementById('inputColorPalette').addEventListener('change', function() {
+		clearInterval(raveMode)
+	})
+}
+var raveMode = setInterval(changeColor, 250)
+var regularAdjust = 0//60
+var lightAdjust = 64//100
+var lightLead = 255
+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) + ")" + ')')
+	currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
+}
+function indexToColor(colorIndex) {
+	var red = 0, green = 0, blue = 0
+	var realColorIndex = colorIndex - Math.floor(colorIndex / 1530) * 1530
+	var colorStage = Math.floor(realColorIndex / 255)
+	switch(colorStage) {
+		case 0:
+			green = 255
+			red = realColorIndex - Math.floor(realColorIndex / 255) * 255
+			break
+		case 1:
+			red = 255
+			green = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
+			break
+		case 2:
+			red = 255
+			blue = realColorIndex - Math.floor(realColorIndex / 255) * 255
+			break
+		case 3:
+			blue = 255
+			red = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
+			break
+		case 4:
+			blue = 255
+			green = realColorIndex - Math.floor(realColorIndex / 255) * 255
+			break
+		case 5:
+			green = 255
+			blue = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
+			break
+	}
+	return [red, green, blue]
+}

data/scripts/palettes/lightMode.js

@@ -1,11 +1,11 @@
-rootStyles.setProperty('--background-color', '#fafafa')
+rootStyles.setProperty('--background-color', '#f5f5f5')
-rootStyles.setProperty('--background-color-contrast', '#333')
+rootStyles.setProperty('--background-color-contrast', '#eaeaea')
-rootStyles.setProperty('--interactable-color', '#aaa')
+rootStyles.setProperty('--interactable-color', '#dfdfdf')
-rootStyles.setProperty('--interactable-selected-color', '#777')
+rootStyles.setProperty('--interactable-selected-color', '#cccccc')
 rootStyles.setProperty('--interactable-tiling', '100% 100%')
-rootStyles.setProperty('--input-color', '#ddd')
+rootStyles.setProperty('--input-color', '#dadada')
 rootStyles.setProperty('--input-font-color', '#000')
 rootStyles.setProperty('--font-color', '#000')
-rootStyles.setProperty('--font-color-contrast', '#eee')
+rootStyles.setProperty('--font-color-contrast', '#000')
 rootStyles.setProperty('--body-background', 'none')
 setCookie('colorPalette', 'lightMode')

data/scripts/palettes/nightRave.js

@@ -1,14 +1,14 @@
-rootStyles.setProperty('--background-color', '#1c1c1c')
+rootStyles.setProperty('--background-color', '#121212')
-rootStyles.setProperty('--background-color-contrast', '#111')
+rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
-rootStyles.setProperty('--interactable-color', '#333')
+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', '#fff')
+rootStyles.setProperty('--input-font-color', '#efefef')
 rootStyles.setProperty('--font-color', '#000')
-rootStyles.setProperty('--font-color-contrast', '#eee')
+rootStyles.setProperty('--font-color-contrast', '#efefef')
 rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
-setCookie('colorPalette', 'raveMode')
+setCookie('colorPalette', 'nightRave')
 
 //Cycles through a rainbow!
 if (currentColorIndex == undefined) {

data/site/askScryfallStyles.css

@@ -1,58 +1,52 @@
 .askScryfallGrid {
-            display: grid;
+    display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
-            grid-template-rows: auto 90pt auto;
+    grid-template-rows: auto 90pt auto;
-            align-items: center;
+    align-items: center;
-            justify-items: center;
+    justify-items: center;
-        }
+}
-        .urzaCard {
+.urzaCard {
-            width: 360pt;
+    width: 360pt;
-            text-align: center;
+    text-align: center;
-            grid-column: 1 / span 3;
+    grid-column: 1 / span 3;
-        }
+}
-        .urzaCard > img {
+.urzaCard > img {
-            position: relative;
+    width: 360pt;
-            left: -2rem;
+    height: auto;
-            width: 360pt;
+}
-            height: auto;
+.askScryfallGrid > * {
-        }
+    /*border: 1px solid red;*/
-        img {
+}
-            position: relative;
+.askScryfallButton {
-            left: -1rem;
+    width: auto;
-        }
+    height: 60pt;
-        .askScryfallGrid > * {
+    transition: 0.25s;
-            /*border: 1px solid red;*/
+}
-        }
+.askScryfallButton:hover {
-        .askScryfallButton {
+    height: 80pt;
-            width: auto;
+}
-            height: 60pt;
+.askScryfallButton:active {
-            transition: 0.25s;
+    height: 90pt !important;
-        }
+}
-        .askScryfallButton:hover {
+#askScryfallResult {
-            height: 80pt;
+    grid-column: 1 / span 3;
-        }
+    padding: 2rem;
-        .askScryfallButton:active {
+    margin: 1rem;
-            height: 90pt !important;
+    background: var(--background-color-contrast);
-        }
+    color: var(--font-color-contrast);
-        #askScryfallResult {
+    border-radius: 1rem;
-            grid-column: 1 / span 3;
+    font: 2rem belerenb;
-            padding: 2rem;
+}
-            margin: 1rem;
+@media screen and (min-width: 864pt) {
-            background: var(--background-color-contrast);
+    .askScryfallGrid {
-            color: var(--font-color-contrast);
+        grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
-            border-radius: 1rem;
+        grid-template-rows: 90pt auto !important;
-            font: 2rem belerenb;
+    }
-        }
+    .urzaCard {
-        @media screen and (min-width: 864pt) {
+        grid-column: 1;
-            .askScryfallGrid {
+        grid-row: 1 / span 2 !important;
-                grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
+    }
-                grid-template-rows: 90pt auto !important;
+    #askScryfallResult {
-            }
+        grid-column: 2 / span 3 !important;
-            .urzaCard {
+    }
-                grid-column: 1;
+}
-                grid-row: 1 / span 2 !important;
-            }
-            #askScryfallResult {
-                grid-column: 2 / span 3 !important;
-            }
-        }

data/site/styles.css

@@ -37,20 +37,20 @@
 }
 
 :root {
-	--background-color: #fafafa;
+	--background-color: #f5f5f5;
-	--background-color-contrast: #333;
+	--background-color-contrast: #eaeaea;
-	--interactable-color: #aaa;
+	--interactable-color: #dfdfdf;
-	--interactable-selected-color: #777;
+	--interactable-selected-color: #cccccc;
 	--interactable-tiling: 100% 100%;
-	--input-color: #ddd;
+	--input-color: #dadada;
 	--input-font-color: #000;
 	--font-color: #000;
-	--font-color-contrast: #eee;
+	--font-color-contrast: #000;
 	--body-background: none;
 }
 
 html {
-	font: 20pt georgia;
+	font: 12pt georgia;
 	background: var(--background-color);
 	color: var(--font-color);
 	background-attachment: fixed;
@@ -194,9 +194,6 @@ img {
 	background: var(--interactable-selected-color);
 }
 
-canvas {
-	/*background: var(--interactable-color);*/
-}
 textarea {
 	resize: vertical;
 	min-height: 4rem;
@@ -212,12 +209,7 @@ textarea {
 
 
 
-.mainGrid {
+
-	display: grid;
-	grid-template-columns: 750px auto;
-	grid-gap: 1rem;
-	padding: 0 1rem 1rem 1rem;
-}
 
 .tabPicker {
 	display: grid;
@@ -275,9 +267,6 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	from {position: relative; left: 100vw;}
 	to {position: relative; left: 0px;}
 }
-.layer {
-	padding: 5rem;
-}
 .layerTitle {
 	/*color: inherit;*/
 	text-align: center;
@@ -304,21 +293,13 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	animation: slide-from-right 1.5s;
 }
 
-.footer {
+
-	padding: 2rem;
-	background: var(--background-color-contrast);
-	background-size: 100% 100%;
-	color: var(--font-color-contrast);
-	font: 0.6rem arial;
-	display: grid;
-	grid-template-columns: auto auto auto;
-}
 
 .fiveSampleCards {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 	margin-top: 1rem;
-	margin-bottom: 3rem;
+	margin-bottom: 2rem;
 }
 .fiveSampleCards > div > img {
 	position: relative;
@@ -378,17 +359,94 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	text-indent: 2em;
 }
 
+.truncate {
+    word-break: break-word;
+}
+
+.justify {
+	text-align: justify;
+}
+
+
+
+
+
+/*ANYTHING THAT CHANGES BASED ON SCREEN WIDTH GOES HERE*/
+.mainGrid {
+	display: grid;
+	grid-template-columns: auto;
+	justify-items: center;
+	grid-gap: 1rem;
+	padding: 1rem 0;
+}
+.layer {
+	padding: 2rem;
+}
 .cardLayerGrid {
 	display: grid;
-	grid-template-columns: auto auto;
+	grid-template-columns: auto;
 	grid-gap: 1rem;
 	justify-items: center;
 	align-items: center;
 }
 .cardLayerGrid > img {
-	width: 300pt;
+	width: 100%;
 	height: auto;
 }
-.truncate {
+canvas {
-    word-break: break-word;
+	width: 100%;
+}
+.footer {
+	padding: 1rem;
+	background: var(--background-color-contrast);
+	background-size: 100% 100%;
+	color: var(--font-color-contrast);
+	font: 0.6rem arial;
+	display: grid;
+	grid-template-columns: auto;
+	grid-row-gap: 1rem;
+}
+.footer > div > select {
+	width: auto !important;
+}
+@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
+    .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*/
+    .cardLayerGrid {
+		grid-template-columns: auto auto;
+    }
+    .layer {
+    	padding: 4rem;
+    }
+}
+@media screen and (min-width: 618pt) { /*Screen is wide enough for padding*/
+    .mainGrid {
+		padding: 1rem 1rem;
+	}
+}
+@media screen and (min-width: 768px) { /*Screen is wide enough for the card image to be 750px wide. Scrollbar is 18 pixels?*/
+    canvas {
+		width: 750px;
+	}
+}
+@media screen and (min-width: 450pt) { /*Screen is wide enough for the footer to display horizontally*/
+	.footer {
+		padding: 2rem;
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+}
+@media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/
+	.cardLayerGrid > img {
+		width: 300pt;
+	}
+}
+@media screen and (min-width: 300pt) { /*Screen is wide enough for larger text*/
+	html {
+		font: 20pt georgia;
+	}
 }

index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
 	<script async src="data/scripts/cookies.js"></script>
+	<!-- <script async src="data/scripts/palettes/dayRave.js"></script> -->
 	<link rel="stylesheet" href="data/site/styles.css">
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,7 +13,7 @@
 </head>
 <body>
 	<title>Card Conjurer</title>
-	<div class='title'>Card Conjurer</div>
+	<div class='title darklayer'>Card Conjurer</div>
 	<script>
 		var cardWidth = 1500, cardHeight = 2100
 		if (window.location.search != "") {
@@ -184,7 +185,7 @@
 				<div class='layerTitle'>
 					Choose From A Variety Of Card Frames
 				</div>
-				<div>
+				<div class="justify">
 					Card Conjurer offers more card frame options than any other web-based Magic card maker
 				</div>
 			</div>
@@ -196,7 +197,7 @@
 				<div class='layerTitle'>
 					Customize To Your Heart's Content
 				</div>
-				<div>
+				<div class="justify">
 					With Card Conjurer's level of customization, you'll have endless options when designing your dream cards
 				</div>
 			</div>
@@ -210,7 +211,7 @@
 				<div class='layerTitle'>
 					Or Bling Out Existing Favorites
 				</div>
-				<div>
+				<div class="justify">
 					Easily import vital information from existing cards, then redesign them
 				</div>
 			</div>
@@ -222,8 +223,8 @@
 				<div class='layerTitle'>
 					Have Any Questions?
 				</div>
-				<div class='paragraph'>
+				<div class='justify'>
-					If you have a question, a request, or even just want to share that cool card you made, please don't hesitate to email me at <label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>!
+					If you have a question, a request, or even just want to share a cool card you made, please don't hesitate to email me at <label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>!
 				</div>
 			</div>
 		</div>
@@ -233,7 +234,7 @@
 			<div class='layerTitle'>
 				The Proxy Factory
 			</div>
-			<div class="paragraph">
+			<div class="justify">
 				If you'd like to delve deeper into making custom Magic: The Gathering cards, check out The Proxy Factory! They're a community full of individuals interested in creating custom cards, and are very welcoming to new members. Take a look at their <a style='color: #ff4500;' href='https://www.reddit.com/r/TheProxyFactory/' target='_blank'>Reddit</a>, or join their <a style='color: #738adb;' href='https://discordapp.com/invite/xBCQprM' target='_blank'>Discord</a>. Happy proxying!
 			</div>
 		</div>
@@ -248,7 +249,8 @@
 		<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
 	        <option value='lightMode'>Light Mode</option>
 	        <option value='darkMode'>Dark Mode</option>
-	        <option value='raveMode'>Rave Mode</option>
+	        <option value='dayRave'>Day Rave</option>
+	        <option value='nightRave'>Night Rave</option>
 	        <option value='scholarMode'>Scholar Mode</option>
       	</select>
     </div>