From 35c525b764af56fb75f492906616d98c0f2082a2 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sat, 25 Jul 2020 10:28:40 -0700
Subject: [PATCH] restyle

---
 data/scripts/footer.js                | 4 ++--
 data/scripts/palettes/darkMode.js     | 7 +++----
 data/scripts/palettes/dayRave.js      | 4 ++--
 data/scripts/palettes/lightMode.js    | 7 +++----
 data/scripts/palettes/lowpolyBlue.js  | 5 ++---
 data/scripts/palettes/lowpolyGreen.js | 3 +--
 data/scripts/palettes/lowpolyRed.js   | 5 ++---
 data/scripts/palettes/nightRave.js    | 4 ++--
 data/styles/main.css                  | 3 ++-
 9 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/data/scripts/footer.js b/data/scripts/footer.js
index bb2eac3b..86690ae5 100644
--- a/data/scripts/footer.js
+++ b/data/scripts/footer.js
@@ -13,10 +13,10 @@ document.getElementById('footer').innerHTML = `
         <hr>
         <div>
             <select id='inputColorPalette' onchange='loadScript("/data/scripts/palettes/" + this.value + ".js")'>
-                <option disabled>Bare Bones</option>
+                <option disabled>Grayscale</option>
                 <option value='lightMode'>Light Mode</option>
                 <option value='darkMode'>Dark Mode</option>
-                <option disabled>Lowpoly</option>
+                <option disabled>Colored</option>
                 <option value='lowpolyRed'>Red</option>
                 <option value='lowpolyGreen' selected='selected'>Green</option>
                 <option value='lowpolyBlue'>Blue</option>
diff --git a/data/scripts/palettes/darkMode.js b/data/scripts/palettes/darkMode.js
index c3a158ed..5e1b0c09 100644
--- a/data/scripts/palettes/darkMode.js
+++ b/data/scripts/palettes/darkMode.js
@@ -1,7 +1,6 @@
-var currentPalette = 'darkMode'
-rootStyles.setProperty('--site-background', '#3a3838')
-rootStyles.setProperty('--site-background-filter', 'none')
-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', 'grayscale(100) hue-rotate(0deg)')
+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')
diff --git a/data/scripts/palettes/dayRave.js b/data/scripts/palettes/dayRave.js
index 79362616..a87b52c4 100644
--- a/data/scripts/palettes/dayRave.js
+++ b/data/scripts/palettes/dayRave.js
@@ -1,5 +1,5 @@
 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('--site-background-filter', 'grayscale(0) hue-rotate(0deg)')
 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')
@@ -27,7 +27,7 @@ var colorCycle = setInterval(shiftHue, 200)
 var currentHueRotation = 0
 
 function shiftHue() {
-	rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
+	rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(' + currentHueRotation + 'deg)')
 	currentHueRotation += 1
 	if (currentHueRotation == 360) {
 		currentHueRotation = 0
diff --git a/data/scripts/palettes/lightMode.js b/data/scripts/palettes/lightMode.js
index 3f1cd9b6..132ab72a 100644
--- a/data/scripts/palettes/lightMode.js
+++ b/data/scripts/palettes/lightMode.js
@@ -1,7 +1,6 @@
-var currentPalette = 'lightMode'
-rootStyles.setProperty('--site-background', '#f5f5f5')
-rootStyles.setProperty('--site-background-filter', 'none')
-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', 'grayscale(100) hue-rotate(0deg)')
+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')
diff --git a/data/scripts/palettes/lowpolyBlue.js b/data/scripts/palettes/lowpolyBlue.js
index 1295f8b4..e268b07f 100644
--- a/data/scripts/palettes/lowpolyBlue.js
+++ b/data/scripts/palettes/lowpolyBlue.js
@@ -1,6 +1,5 @@
-var currentPalette = 'lowpolyBlue'
-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('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
+rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(90deg)')
 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')
diff --git a/data/scripts/palettes/lowpolyGreen.js b/data/scripts/palettes/lowpolyGreen.js
index 66d027cf..34bef4f6 100644
--- a/data/scripts/palettes/lowpolyGreen.js
+++ b/data/scripts/palettes/lowpolyGreen.js
@@ -1,6 +1,5 @@
-var currentPalette = 'lowpolyGreen'
 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('--site-background-filter', 'grayscale(0) hue-rotate(0deg)')
 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')
diff --git a/data/scripts/palettes/lowpolyRed.js b/data/scripts/palettes/lowpolyRed.js
index 7a38ad81..b6df2ea1 100644
--- a/data/scripts/palettes/lowpolyRed.js
+++ b/data/scripts/palettes/lowpolyRed.js
@@ -1,6 +1,5 @@
-var currentPalette = 'lowpolyRed'
-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('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
+rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(245deg)')
 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')
diff --git a/data/scripts/palettes/nightRave.js b/data/scripts/palettes/nightRave.js
index 4fa93014..e00d15d4 100644
--- a/data/scripts/palettes/nightRave.js
+++ b/data/scripts/palettes/nightRave.js
@@ -1,5 +1,5 @@
 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('--site-background-filter', 'grayscale(0) hue-rotate(0deg)')
 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')
@@ -27,7 +27,7 @@ var colorCycle = setInterval(shiftHue, 200)
 var currentHueRotation = 0
 
 function shiftHue() {
-	rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
+	rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(' + currentHueRotation + 'deg)')
 	currentHueRotation += 1
 	if (currentHueRotation == 360) {
 		currentHueRotation = 0
diff --git a/data/styles/main.css b/data/styles/main.css
index 40a20610..6986ed7e 100644
--- a/data/styles/main.css
+++ b/data/styles/main.css
@@ -69,6 +69,7 @@ html::before {
 	height: 100%;
 	background: var(--site-background);
 	filter: var(--site-background-filter);
+	transition: 2s;
 	z-index: -1;
 }
 html, body {
@@ -78,7 +79,7 @@ html, body {
 	overflow-x: hidden;
 }
 body {
-	background: var(--body-background);
+	/*background: var(--body-background);*/
 }
 a {
 	font: inherit;