diff --git a/index.html b/index.html index bcec3967..d1fd60e4 100644 --- a/index.html +++ b/index.html @@ -201,22 +201,20 @@ -
+
Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after.
- -
-
+
+
+
When selecting the card's color, use 'Second Color' for hybrid cards, and 'Third Color' for non-hybrid two-colored cards. -
- Check out some samples!
-
- - - +
+ Check out some samples!
+ + +
-
-
For Terms of Use and Disclaimer, see the Github page.
+
For Terms of Use and Disclaimer, see the Github page.
@@ -255,97 +253,88 @@ font-family: mplantini; src: url("data/fonts/mplantin-i.ttf"); } +* { + text-align: center; + font-family: belerenb; + font-size: 20px; + color: rgb(128, 128, 128); +} .title { text-align: center; color: rgb(128,255,128); font-family: belerenbsc; font-size: 60px; } -.info { - text-align: center; - color: rgb(96,96,96); - font-family: belerenbsc; - font-size: 16px; -} -.section { - border: 1px solid rgb(128, 255, 128); - background-color: rgba(0, 0, 0, 0.5); -} -.toggler { - text-align: center; - color: rgb(255, 255, 255); - font-family: belerenbsc; - font-size: 20px; - width: 100%; - padding: 5px; - -} -.toggler:hover { - color: rgb(128, 255, 128); -} -.togglee { - width: calc(100% - 12px); - padding: 5px; - border-width: 1px; - border-color: rgb(128, 255, 128); - border-style: dashed solid solid solid; - font-size: 20px; - color: rgb(255,255,255); - font-family: belerenbsc; - display: none; -} -.shown { - display: block; -} -.shown * { - font-family: mplantin; - font-size: 20px; -} -input[type="text"] { - width: 99%; -} -input[type="number"] { - width: 99%; -} -select { - width: 100%; -} -.column { - float: left; + +.row { + margin-bottom: 5; } .row:after{ content: ""; display: table; clear: both; } -.text { - padding: 10px; - color: rgb(128, 128, 128); - font-family: beleren; - font-size: 25px; - margin: auto; - text-align: center; -} -#symbolList { - margin: 5px; +.row * { + box-sizing: border-box; padding: 5px; - border: 1px solid rgb(128, 255, 128); + +} +.column { + float: left; +} + +.section { + border: 1px solid rgba(128, 255, 128, 0.1); background-color: rgba(0, 0, 0, 0.5); - white-space: normal; - display: inline-block; + padding: 0px; +} +.section * { + color: rgb(255, 255, 255); +} +.toggler { + width: 100%; +} +.toggler:hover { + color: rgb(128, 255, 128); +} +.togglee { + width: 100%; + text-align: left; + border-width: 1px; + border-color: rgba(128, 255, 128, 0.1); + border-style: dashed solid solid solid; + display: none; +} +.shown { + display: block; +} +input[type="text"], input[type="number"] { + text-align: left; + color: black; + width: 99%; +} +select, select * { + color: black; + width: 100%; +} + +#symbolList { + border: 1px solid rgba(128, 255, 128, 0.1); + background-color: rgba(0, 0, 0, 0.5); + padding-bottom: 10px; } #symbolList img { + padding: 0px; position: relative; top: 8px; width: 30px; - padding: 0px 0px 0px 0px !important; - margin: 1px; + /*padding: 0px 0px 0px 0px !important;*/ background-color: rgba(128,255,128, 0.1); } -body { - color: rgb(255,255,255); - font-family: mplantin; - font-size: 18px; +.info, .info * { + color: rgb(96,96,96); + font-family: belerenbsc; + font-size: 16px; } html { background:url(data/background.png) no-repeat center center fixed; @@ -354,30 +343,16 @@ html { -o-background-size: cover; background-size: cover; } -canvas { - float: left; - padding: 10px; -} -* { - box-sizing: border-box; -} -.clearfix::after { - content: ""; - clear: both; - display: table; -} + a:link { color: rgb(128,128,128); } - a:visited { color: rgb(128,128,128); } - a:hover { color: rgb(128,255,128); } - a:active { color: rgb(128,255,128); } @@ -1082,5 +1057,21 @@ function downloadCardImage(linkElement) { } linkElement.href = cardImageData } + +//Randomizes the sample cards at the bottom of the page. Runs it here too +randomizeSampleCards(6) +function randomizeSampleCards(count) { + var cardNumbers = [] + while (cardNumbers.length < 3) { + var randomNumber = Math.floor(Math.random() * count) + 1 + if (cardNumbers.indexOf(randomNumber) > -1) { + continue + } + cardNumbers[cardNumbers.length] = randomNumber + } + document.getElementById("sampleCardA").src = "sampleCards/sample-card-" + cardNumbers[0] + ".png" + document.getElementById("sampleCardB").src = "sampleCards/sample-card-" + cardNumbers[1] + ".png" + document.getElementById("sampleCardC").src = "sampleCards/sample-card-" + cardNumbers[2] + ".png" +} diff --git a/sampleCards/sample-card-4.png b/sampleCards/sample-card-4.png new file mode 100644 index 00000000..4d6a2ee6 Binary files /dev/null and b/sampleCards/sample-card-4.png differ diff --git a/sampleCards/sample-card-6.png b/sampleCards/sample-card-6.png index 4d6a2ee6..84449c80 100644 Binary files a/sampleCards/sample-card-6.png and b/sampleCards/sample-card-6.png differ