From d24448ffdce075afd05606eb3d05ba109319e6db Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Fri, 9 Nov 2018 16:55:29 -0800 Subject: [PATCH] css magic --- data/scripts/main.js | 25 +++++----------- index.html | 69 ++++++++++++++++++++------------------------ 2 files changed, 40 insertions(+), 54 deletions(-) diff --git a/data/scripts/main.js b/data/scripts/main.js index a2089930..76c92de7 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -6,7 +6,7 @@ //============================================// //The following bits of code are run immediatly to initialize the program while allowing the variables to remain global. //Setup viewport! -var minimumWidth = 769 +var minimumWidth = 783 var viewport = document.createElement("meta") viewport.setAttribute("name", "viewport") if (screen.width < minimumWidth) { @@ -105,6 +105,13 @@ randomizeSampleCards(7) //Set up the initial clock! var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value) +//It's easier to generate the mana symbol list via js, so do it here +var symbolList = "" + for (var i = 0; i < manaSymbolCode.length; i++) { + symbolList += "
" + manaSymbolCode[i] + "\u2192" + "
" + } +document.getElementById("symbolList").innerHTML = symbolList + //============================================// // Card clock and changing frames! // @@ -166,7 +173,6 @@ function finishTemplate() { canvas.height = cardHeight borderCanvas.width = cardWidth borderCanvas.height = cardHeight - resizeThings() document.getElementById("colorSelection").value = "white" imgMultiMask.src = borderPath + "multiMask.png" imgFrameMask.src = borderPath + "frameMask.png" @@ -740,21 +746,6 @@ function toggleSection(target) { } target.parentElement.childNodes[3].classList.toggle("shown") } -//Resizes anything that may need to be resized -function resizeThings() { - var symbolList = "" - 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 += manaSymbolCode[i] + "\u2192" + "
" - if (i%rowCount == rowCount - 1) { - symbolList += "
" - } - } - document.getElementById("symbolList").innerHTML = symbolList -} //Randomizes the sample cards at the bottom of the page. Runs it here too function randomizeSampleCards(count) { var cardNumbers = [] diff --git a/index.html b/index.html index 5ac885d9..df7dbdd5 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ - +
@@ -173,7 +173,7 @@ Shift All Text Down
- Shift All Mana Symbols Down + Shift Mana Symbols Down
@@ -372,7 +372,7 @@ --section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/ --solid-border-color: rgb(39, 71, 39); /*Opaque Border*/ } -/*Applies to most elements (with rows and columns)*/ +/*General style things*/ * { text-align: center; font-family: belerenb; @@ -381,20 +381,23 @@ user-select: none; box-sizing: border-box; } +/*Applies to most elements (with rows and columns)*/ .row::after{ content: ""; display: block; clear: both; + margin-bottom: 5px; } [class*="column-"] { width: 100%; float: left; - padding: 0.2em; + padding: 5px; } /*Style for sections, togglers, and togglees*/ .section { border: 0.04em solid var(--section-border-color); background-color: var(--section-background-color); + width: 100%; } .toggler:hover { color: var(--hover-text-color); @@ -412,6 +415,7 @@ /*Specific input element styles*/ .input { border-radius: 0.25em; + padding-left: 0.25em; text-align: left; border: none; background-color: var(--section-border-color); @@ -419,7 +423,7 @@ width: 100%; } input[type="color"] { - border-radius: 10px; + border-radius: 0.25em; border: none; background-color: var(--section-border-color); padding-top: 0px; @@ -427,15 +431,15 @@ input[type="color"] { } /*Custom checkboxes!*/ .checkbox { - padding-top: 12px; - top: 7px; + height: 1em; + margin: 5px 0px; position: relative; } .checkbox label { display: inline-block; - width: 20px; - height: 20px; - border-radius: 33%; + width: 1em; + height: 1em; + border-radius: 0.25em; position: absolute; top: 0px; left: 0px; @@ -450,21 +454,21 @@ input[type="color"] { } .checkbox div { white-space: pre; - position: absolute; - top: -5px; - left: 18px; + position: relative; + top: -0.1em; + left: 1.1em; } /*Custom select box (dropdown)*/ .dropdown { position: relative; display: inline-block; width: 100%; - padding: 0px; } .dropdown select { - border-radius: 10px; + border-radius: 0.25em; + padding-left: 0.25em; width: inherit; - background-color: var(--section-border-color); + background-color: var(--section-border-color); color: var(--title-text-color); border: none; -moz-appearance: none; @@ -472,25 +476,24 @@ input[type="color"] { appearance: none; } .dropdown select option { - border-radius: 10px; + border-radius: 0.25em; color: var(--title-text-color); background-color: var(--solid-border-color); } .dropdown::after { content: "\25BC"; - font-size: 10px; + font-size: 0.5em; position: absolute; pointer-events: none; color: var(--title-text-color); - right: 10px; - top: 38%; + right: 0.65em; + top: 0.65em; } /*List of all mana symbols and their associated codes*/ #symbolList img { position: relative; top: 0.25em; - width: 1.2em; - /*padding: 0px 0px 0px 0px !important;*/ + height: 1.2em; } /*Other*/ .title { @@ -525,22 +528,14 @@ a:active { color: var(--hover-text-color); } /*Adjustments For Desktop*/ -@media only screen and (min-width: 850px) { - /*Nothing for now :)*/ +/*Chrome's JS Debugger gives a width 1.1 times greater than it should be*/ +@media only screen and (orientation: landscape) { + .column-3 {width: 33.33%;} } -@media only screen and (min-width: 1150px) { - .column-1 { - width: 769px; - } - .column-2 { - width: calc(100% - 769px); - } - .column-3 { - width: 33.33%; - } - .column-4 { - - } +@media only screen and (min-width: 1130px) { + /*The card manipulator menu can be side-by-side with the card*/ + .column-1 {width: 769px;} + .column-2 {width: calc(100% - 769px);} }