From 2b9e17ea0c426237e7ffa4568bcca63917e3d4d6 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Fri, 24 Jul 2020 17:15:43 -0700 Subject: [PATCH] restyle --- .../site/backgrounds/lowpolyDarkBlue.svg | 8 ++ .../site/backgrounds/lowpolyDarkGreen.svg | 72 +----------------- .../site/backgrounds/lowpolyDarkRed.svg | 8 ++ .../site/backgrounds/lowpolyLightGray.svg | 12 +++ .../site/backgrounds/lowpolyLightGreen.svg | 12 +++ data/scripts/cookies.js | 4 +- data/scripts/footer.js | 7 +- data/scripts/palettes/darkMode.js | 14 +--- data/scripts/palettes/dayRave.js | 72 ++++++------------ data/scripts/palettes/lightMode.js | 1 + data/scripts/palettes/lowpolyBlue.js | 9 +++ .../palettes/{lowpoly.js => lowpolyGreen.js} | 3 +- data/scripts/palettes/lowpolyRed.js | 9 +++ data/scripts/palettes/nightRave.js | 73 ++++++------------- data/styles/main.css | 31 +++++--- 15 files changed, 139 insertions(+), 196 deletions(-) create mode 100644 data/images/site/backgrounds/lowpolyDarkBlue.svg create mode 100644 data/images/site/backgrounds/lowpolyDarkRed.svg create mode 100644 data/images/site/backgrounds/lowpolyLightGray.svg create mode 100644 data/images/site/backgrounds/lowpolyLightGreen.svg create mode 100644 data/scripts/palettes/lowpolyBlue.js rename data/scripts/palettes/{lowpoly.js => lowpolyGreen.js} (85%) create mode 100644 data/scripts/palettes/lowpolyRed.js diff --git a/data/images/site/backgrounds/lowpolyDarkBlue.svg b/data/images/site/backgrounds/lowpolyDarkBlue.svg new file mode 100644 index 00000000..4a3af7c1 --- /dev/null +++ b/data/images/site/backgrounds/lowpolyDarkBlue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/data/images/site/backgrounds/lowpolyDarkGreen.svg b/data/images/site/backgrounds/lowpolyDarkGreen.svg index 6ca04c4e..90dfa6a9 100644 --- a/data/images/site/backgrounds/lowpolyDarkGreen.svg +++ b/data/images/site/backgrounds/lowpolyDarkGreen.svg @@ -1,74 +1,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - + diff --git a/data/images/site/backgrounds/lowpolyDarkRed.svg b/data/images/site/backgrounds/lowpolyDarkRed.svg new file mode 100644 index 00000000..47324a8e --- /dev/null +++ b/data/images/site/backgrounds/lowpolyDarkRed.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/data/images/site/backgrounds/lowpolyLightGray.svg b/data/images/site/backgrounds/lowpolyLightGray.svg new file mode 100644 index 00000000..430458f6 --- /dev/null +++ b/data/images/site/backgrounds/lowpolyLightGray.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/data/images/site/backgrounds/lowpolyLightGreen.svg b/data/images/site/backgrounds/lowpolyLightGreen.svg new file mode 100644 index 00000000..7affb09d --- /dev/null +++ b/data/images/site/backgrounds/lowpolyLightGreen.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/data/scripts/cookies.js b/data/scripts/cookies.js index 28a3f2d7..81248009 100644 --- a/data/scripts/cookies.js +++ b/data/scripts/cookies.js @@ -28,7 +28,9 @@ function checkCookies() { setTimeout(function() { document.getElementById('inputColorPalette').value = getCookie('colorPalette') }, 1000) - } + } else { + loadScript('/data/scripts/palettes/lowpolyGreen.js') + } } checkCookies() diff --git a/data/scripts/footer.js b/data/scripts/footer.js index 29324a73..bb2eac3b 100644 --- a/data/scripts/footer.js +++ b/data/scripts/footer.js @@ -13,11 +13,16 @@ document.getElementById('footer').innerHTML = `
diff --git a/data/scripts/palettes/darkMode.js b/data/scripts/palettes/darkMode.js index a7936875..8b6490cd 100644 --- a/data/scripts/palettes/darkMode.js +++ b/data/scripts/palettes/darkMode.js @@ -1,19 +1,9 @@ rootStyles.setProperty('--site-background', '#3a3838') +rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--layer-background', '#242424') rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-selected', '#99ee99') rootStyles.setProperty('--font-color', '#efefef') rootStyles.setProperty('--body-background', 'none') -setCookie('colorPalette', 'darkMode') - -// rootStyles.setProperty('--background-color', '#3a3838') -// rootStyles.setProperty('--background-color-contrast', '#242424') -// rootStyles.setProperty('--interactable-color', '#2b2b2b') -// rootStyles.setProperty('--interactable-selected-color', '#1d1d1d') -// rootStyles.setProperty('--input-color', '#2b2b2b') -// rootStyles.setProperty('--input-font-color', '#efefef') -// rootStyles.setProperty('--font-color', '#efefef') -// rootStyles.setProperty('--font-color-contrast', '#efefef') -// rootStyles.setProperty('--body-background', 'none') -// setCookie('colorPalette', 'darkMode') +setCookie('colorPalette', 'darkMode') \ No newline at end of file diff --git a/data/scripts/palettes/dayRave.js b/data/scripts/palettes/dayRave.js index c815b63e..02205caf 100644 --- a/data/scripts/palettes/dayRave.js +++ b/data/scripts/palettes/dayRave.js @@ -1,58 +1,30 @@ -rootStyles.setProperty('--site-background', '#f5f5f5') -rootStyles.setProperty('--layer-background', '#e4e4e4') +rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--site-background-filter', 'none') +rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background-selected', '#cccccc') rootStyles.setProperty('--interactable-unselected', '#aaaaaa') rootStyles.setProperty('--interactable-selected', '#00aa00') rootStyles.setProperty('--font-color', '#000000') -rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed') +rootStyles.setProperty('--body-background', 'none') 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('--site-background', '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) { - 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 +//Shifts the hue +var colorCycle = setInterval(shiftHue, 100) +var currentHueRotation = 0 + +function shiftHue() { + rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)') + currentHueRotation += 1 + if (currentHueRotation == 360) { + currentHueRotation = 0 } - return [red, green, blue] } + +//Stops the hue shift when another palette is loaded +document.getElementById('inputColorPalette').addEventListener('change', removeEventListener, false) + +function removeEventListener() { + console.log('cleared') + clearInterval(colorCycle) + document.getElementById('inputColorPalette').removeEventListener('change', removeEventListener, false) +} \ No newline at end of file diff --git a/data/scripts/palettes/lightMode.js b/data/scripts/palettes/lightMode.js index b65a211d..ea949257 100644 --- a/data/scripts/palettes/lightMode.js +++ b/data/scripts/palettes/lightMode.js @@ -1,4 +1,5 @@ rootStyles.setProperty('--site-background', '#f5f5f5') +rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--layer-background', '#e4e4e4') rootStyles.setProperty('--layer-background-selected', '#cccccc') rootStyles.setProperty('--interactable-unselected', '#aaaaaa') diff --git a/data/scripts/palettes/lowpolyBlue.js b/data/scripts/palettes/lowpolyBlue.js new file mode 100644 index 00000000..1700ea11 --- /dev/null +++ b/data/scripts/palettes/lowpolyBlue.js @@ -0,0 +1,9 @@ +rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkBlue.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--site-background-filter', 'none') +rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--layer-background-selected', '#1d1d1d') +rootStyles.setProperty('--interactable-unselected', '#666666') +rootStyles.setProperty('--interactable-selected', '#99ee99') +rootStyles.setProperty('--font-color', '#efefef') +rootStyles.setProperty('--body-background', 'none') +setCookie('colorPalette', 'lowpolyBlue') \ No newline at end of file diff --git a/data/scripts/palettes/lowpoly.js b/data/scripts/palettes/lowpolyGreen.js similarity index 85% rename from data/scripts/palettes/lowpoly.js rename to data/scripts/palettes/lowpolyGreen.js index d028a9f0..1bae7477 100644 --- a/data/scripts/palettes/lowpoly.js +++ b/data/scripts/palettes/lowpolyGreen.js @@ -1,8 +1,9 @@ rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-selected', '#99ee99') rootStyles.setProperty('--font-color', '#efefef') rootStyles.setProperty('--body-background', 'none') -setCookie('colorPalette', 'lowpoly') \ No newline at end of file +setCookie('colorPalette', 'lowpolyGreen') \ No newline at end of file diff --git a/data/scripts/palettes/lowpolyRed.js b/data/scripts/palettes/lowpolyRed.js new file mode 100644 index 00000000..91be9e62 --- /dev/null +++ b/data/scripts/palettes/lowpolyRed.js @@ -0,0 +1,9 @@ +rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkRed.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--site-background-filter', 'none') +rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--layer-background-selected', '#1d1d1d') +rootStyles.setProperty('--interactable-unselected', '#666666') +rootStyles.setProperty('--interactable-selected', '#99ee99') +rootStyles.setProperty('--font-color', '#efefef') +rootStyles.setProperty('--body-background', 'none') +setCookie('colorPalette', 'lowpolyRed') \ No newline at end of file diff --git a/data/scripts/palettes/nightRave.js b/data/scripts/palettes/nightRave.js index ee394323..c6f51e80 100644 --- a/data/scripts/palettes/nightRave.js +++ b/data/scripts/palettes/nightRave.js @@ -1,59 +1,30 @@ -rootStyles.setProperty('--site-background', '#3a3838') -rootStyles.setProperty('--layer-background', '#242424') +rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed') +rootStyles.setProperty('--site-background-filter', 'none') +rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-selected', '#99ee99') rootStyles.setProperty('--font-color', '#efefef') -rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed') +rootStyles.setProperty('--body-background', 'none') setCookie('colorPalette', 'nightRave') -console.log('oh no') -//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('--site-background', '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) { - 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 +//Shifts the hue +var colorCycle = setInterval(shiftHue, 100) +var currentHueRotation = 0 + +function shiftHue() { + rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)') + currentHueRotation += 1 + if (currentHueRotation == 360) { + currentHueRotation = 0 } - return [red, green, blue] } + +//Stops the hue shift when another palette is loaded +document.getElementById('inputColorPalette').addEventListener('change', removeEventListener, false) + +function removeEventListener() { + console.log('cleared') + clearInterval(colorCycle) + document.getElementById('inputColorPalette').removeEventListener('change', removeEventListener, false) +} \ No newline at end of file diff --git a/data/styles/main.css b/data/styles/main.css index 26cd8b4a..cd0c524b 100644 --- a/data/styles/main.css +++ b/data/styles/main.css @@ -41,23 +41,35 @@ } :root { - --site-background: #f5f5f5; - --layer-background: #e4e4e4; - --layer-background-selected: #ccc; - --interactable-unselected: #aaa; - --interactable-selected: #00aa00; - --font-color: #000; + --site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed; + --site-background-filter: none; + --layer-background: #242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed; + --layer-background-selected: #1d1d1d; + --interactable-unselected: #666666; + --interactable-selected: #99ee99; + --font-color: #efefef; --body-background: none; } html { font: 12pt georgia; - background: var(--site-background); color: var(--font-color); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + +} +html::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--site-background); + filter: var(--site-background-filter); + z-index: -1; } html, body { margin: 0; @@ -77,10 +89,6 @@ a:hover { text-decoration: underline; } -/*.ad { - margin: 0; - padding: 0; -}*/ .adGrid { width: 100%; display: grid; @@ -88,6 +96,7 @@ a:hover { grid-auto-rows: min-content; justify-items: center; align-items: center; + margin: 1rem 0; } .adGrid > div { width: 100%;