From ae4cd65238cfc35d2c8db8c43e885234c946e7e0 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Mon, 30 Mar 2020 20:42:41 -0700 Subject: [PATCH] fixes --- askScryfallStyles.css | 34 ++++++++++++++++++---------- data/scripts/main.js | 3 --- data/scripts/palettes/darkMode.js | 3 +-- data/scripts/palettes/dayRave.js | 5 ++-- data/scripts/palettes/lightMode.js | 3 +-- data/scripts/palettes/nightRave.js | 5 ++-- data/scripts/palettes/scholarMode.js | 7 +++--- index.html | 2 +- styles.css | 19 ++-------------- 9 files changed, 34 insertions(+), 47 deletions(-) diff --git a/askScryfallStyles.css b/askScryfallStyles.css index 23235818..bd7e39b1 100644 --- a/askScryfallStyles.css +++ b/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: 60pt; + height: auto; + 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; @@ -49,4 +43,20 @@ #askScryfallResult { 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; + } } \ No newline at end of file diff --git a/data/scripts/main.js b/data/scripts/main.js index 813eb9bf..01fda043 100644 --- a/data/scripts/main.js +++ b/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)) diff --git a/data/scripts/palettes/darkMode.js b/data/scripts/palettes/darkMode.js index 2ecd57ce..edd2f905 100644 --- a/data/scripts/palettes/darkMode.js +++ b/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') diff --git a/data/scripts/palettes/dayRave.js b/data/scripts/palettes/dayRave.js index ab1e3022..a5a431ac 100644 --- a/data/scripts/palettes/dayRave.js +++ b/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) { diff --git a/data/scripts/palettes/lightMode.js b/data/scripts/palettes/lightMode.js index 2960911a..850935db 100644 --- a/data/scripts/palettes/lightMode.js +++ b/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') diff --git a/data/scripts/palettes/nightRave.js b/data/scripts/palettes/nightRave.js index e1fc6330..466a231e 100644 --- a/data/scripts/palettes/nightRave.js +++ b/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) { diff --git a/data/scripts/palettes/scholarMode.js b/data/scripts/palettes/scholarMode.js index 2522502e..5d0f1906 100644 --- a/data/scripts/palettes/scholarMode.js +++ b/data/scripts/palettes/scholarMode.js @@ -1,11 +1,10 @@ -rootStyles.setProperty('--background-color', 'none') -rootStyles.setProperty('--background-color-contrast', 'url(data/site/images/palettes/canvasPaper.png)') +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) 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') diff --git a/index.html b/index.html index 311cef38..b7e03013 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - @@ -242,6 +241,7 @@ +