restyle

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()
 

data/scripts/footer.js

@@ -13,11 +13,16 @@ document.getElementById('footer').innerHTML = `
         <hr>
         <div>
             <select id='inputColorPalette' onchange='loadScript("/data/scripts/palettes/" + this.value + ".js")'>
+                <option disabled>Bare Bones</option>
                 <option value='lightMode'>Light Mode</option>
                 <option value='darkMode'>Dark Mode</option>
+                <option disabled>Lowpoly</option>
+                <option value='lowpolyRed'>Red</option>
+                <option value='lowpolyGreen' selected='selected'>Green</option>
+                <option value='lowpolyBlue'>Blue</option>
+                <option disabled>Color-Changing</option>
                 <option value='dayRave'>Day Rave</option>
                 <option value='nightRave'>Night Rave</option>
-                <option value='lowpoly'>Lowpoly</option>
             </select>
         </div>
     </div>

data/scripts/palettes/darkMode.js

@@ -1,4 +1,5 @@
 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')
@@ -6,14 +7,3 @@ 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')

data/scripts/palettes/dayRave.js

@@ -1,58 +1,30 @@
-rootStyles.setProperty('--site-background', '#f5f5f5')
+rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed')
-rootStyles.setProperty('--layer-background', '#e4e4e4')
+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!
+//Shifts the hue
-if (currentColorIndex == undefined) {
+var colorCycle = setInterval(shiftHue, 100)
-	document.getElementById('inputColorPalette').addEventListener('change', function() {
+var currentHueRotation = 0
-		clearInterval(raveMode)
+
-	})
+function shiftHue() {
-}
+	rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
-var raveMode = setInterval(changeColor, 250)
+	currentHueRotation += 1
-var regularAdjust = 0//60
+	if (currentHueRotation == 360) {
-var lightAdjust = 64//100
+		currentHueRotation = 0
-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
 	}
-	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)
 }

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')

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')

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')
+setCookie('colorPalette', 'lowpolyGreen')

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')

data/scripts/palettes/nightRave.js

@@ -1,59 +1,30 @@
-rootStyles.setProperty('--site-background', '#3a3838')
+rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
-rootStyles.setProperty('--layer-background', '#242424')
+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!
+//Shifts the hue
-if (currentColorIndex == undefined) {
+var colorCycle = setInterval(shiftHue, 100)
-	document.getElementById('inputColorPalette').addEventListener('change', function() {
+var currentHueRotation = 0
-		clearInterval(raveMode)
+
-	})
+function shiftHue() {
-}
+	rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
-var raveMode = setInterval(changeColor, 250)
+	currentHueRotation += 1
-var regularAdjust = 0//60
+	if (currentHueRotation == 360) {
-var lightAdjust = 64//100
+		currentHueRotation = 0
-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
 	}
-	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)
 }

data/styles/main.css

@@ -41,23 +41,35 @@
 }
 
 :root {
-	--site-background: #f5f5f5;
+	--site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed;
-	--layer-background: #e4e4e4;
+	--site-background-filter: none;
-	--layer-background-selected: #ccc;
+	--layer-background: #242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed;
-	--interactable-unselected: #aaa;
+	--layer-background-selected: #1d1d1d;
-	--interactable-selected: #00aa00;
+	--interactable-unselected: #666666;
-	--font-color: #000;
+	--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%;