diff --git a/data/scripts/main.js b/data/scripts/main.js index 7e9c25ef..a2089930 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -357,7 +357,7 @@ function createBorder() { } //COLOR IDENTITY if (document.getElementById("checkboxIdentity").checked == true) { - var identityList = document.getElementById("inputIdentity").value.split(" ") + var identityList = document.getElementById("inputIdentity").value.toLowerCase().split(" ") var angleSize = Math.PI * 2 / identityList.length var identityRadius = 14 var identityX = typeX + 8 @@ -494,7 +494,7 @@ function drawWatermark() { function drawManaCost() { //the symbols string splits the mana cost input into an array of strings which is then put into a for loop that draws the appropriate set symbol then adjusts the xShift so the set symbols are spaced properly card.fillStyle = "Black" - var symbols = document.getElementById("inputCost").value.split(" ") + var symbols = document.getElementById("inputCost").value.toLowerCase().split(" ") var xShift = 0 for (n = symbols.length; n > -1; n--) { if (manaSymbolCode.indexOf(symbols[n]) != -1) { @@ -689,8 +689,9 @@ function drawText(text, xCoord, yCoord) { x += 58 } else { //It's an image (mana symbol, tap, etc...) - card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize * 0.77, textSize * 0.77) + card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17 + parseInt(document.getElementById("inputSymbolDown").value), textSize * 0.77, textSize * 0.77) textXShift += textSize * 0.84 + console.log(y + textSize * 0.17) } if (megaSplit[1] != "") { plainWord = megaSplit[1] + " " @@ -741,16 +742,11 @@ function toggleSection(target) { } //Resizes anything that may need to be resized function resizeThings() { - if (window.innerWidth > 809 + 300 && cardWidth <= 749) { - document.getElementById("optionsColumn").style = "width: calc(100% - 769px)" - } else { - document.getElementById("optionsColumn").style = "width: 100%" - } var symbolList = "" - var rowCount = Math.ceil(manaSymbolCode.length / Math.floor((window.innerWidth - 30) / 130)) + var rowCount = Math.ceil(manaSymbolCode.length / Math.floor((window.innerWidth - 30) / 150)) for (var i = 0; i < manaSymbolCode.length; i++) { if (i%rowCount == 0) { - symbolList += "
" + symbolList += "
" } symbolList += manaSymbolCode[i] + "\u2192" + "
" if (i%rowCount == rowCount - 1) { diff --git a/index.html b/index.html index e8d801b8..5ac885d9 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,8 @@
-
-
+
+
Card Border
@@ -172,6 +172,9 @@
Shift All Text Down +
+ Shift All Mana Symbols Down +
@@ -216,7 +219,7 @@
@@ -314,11 +317,11 @@
Check out some samples!
- - - + + +
-
For Terms of Use and Disclaimer, see the Github page.
+
For Terms of Use and Disclaimer, see the Github page.
@@ -373,44 +376,32 @@ * { text-align: center; font-family: belerenb; - font-size: 24px; + font-size: 25px; color: var(--main-text-color); user-select: none; + box-sizing: border-box; } -.row { - margin-bottom: 5; -} -.row:after{ +.row::after{ content: ""; - display: table; + display: block; clear: both; } -.row * { - box-sizing: border-box; - padding: 5px; -} -.column { +[class*="column-"] { + width: 100%; float: left; -} -.sampleImage { - width: 33.33%; + padding: 0.2em; } /*Style for sections, togglers, and togglees*/ .section { - border: 1px solid var(--section-border-color); + border: 0.04em solid var(--section-border-color); background-color: var(--section-background-color); - padding: 0px; -} -.toggler { - width: 100%; } .toggler:hover { color: var(--hover-text-color); } .togglee { - width: 100%; text-align: left; - border-width: 1px; + border-width: 0.04em; border-color: var(--section-border-color); border-style: dashed solid solid solid; display: none; @@ -420,7 +411,7 @@ } /*Specific input element styles*/ .input { - border-radius: 10px; + border-radius: 0.25em; text-align: left; border: none; background-color: var(--section-border-color); @@ -460,7 +451,7 @@ input[type="color"] { .checkbox div { white-space: pre; position: absolute; - top: -9px; + top: -5px; left: 18px; } /*Custom select box (dropdown)*/ @@ -496,10 +487,9 @@ input[type="color"] { } /*List of all mana symbols and their associated codes*/ #symbolList img { - padding: 0px; position: relative; - top: 8px; - width: 30px; + top: 0.25em; + width: 1.2em; /*padding: 0px 0px 0px 0px !important;*/ } /*Other*/ @@ -509,10 +499,10 @@ input[type="color"] { font-family: belerenbsc; font-size: 60px; } -.info, .info * { +.info { color: var(--dark-text-color); font-family: belerenbsc; - font-size: 16px; + font-size: 0.75rem; } html { background:url(data/background.png) no-repeat center center fixed; @@ -534,6 +524,24 @@ a:hover { a:active { color: var(--hover-text-color); } +/*Adjustments For Desktop*/ +@media only screen and (min-width: 850px) { + /*Nothing for now :)*/ +} +@media only screen and (min-width: 1150px) { + .column-1 { + width: 769px; + } + .column-2 { + width: calc(100% - 769px); + } + .column-3 { + width: 33.33%; + } + .column-4 { + + } +}