pyratestart

commit bd9bc961ea71787b2adf563d739acadbaaf9cb1b
parent 221d2c726ef076413d8c3193a3f567c41c73689c
Author: pyratebeard <root@pyratebeard.net>
Date:   Fri,  4 Sep 2020 17:35:40 +0100

updated colours. js to randomly change bg colour on window load

Diffstat:
M
index.html
 | 
21
+++++++++++++++++++++
M
static/css/style.css
 | 
39
+++++++++++++++++++++++++--------------

2 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
@@ -50,4 +50,25 @@
 		</div>
 	</div>
 </body>
+<script type='text/javascript'>
+	/* http://jsfiddle.net/jasonwilczak/t8kw2z6w/7/ */
+	var color = new Array();
+    color[0] = "#202f2c";
+    color[1] = "#362124";
+    color[2] = "#363145";
+
+	function changeColor() {
+		var lastColorIndex = localStorage.getItem('lastColorIndex') || -1;
+		var randomColor = -1;
+		while(lastColorIndex == randomColor || randomColor === -1) {
+			randomColor = Math.floor(Math.random() * color.length);
+			console.log('LastIndex: ' + lastColorIndex + ',RandomColor: ' + randomColor);
+		};
+		localStorage.setItem('lastColorIndex',randomColor);
+		//console.log(color[randomColor]);
+		document.getElementsByTagName("body")[0].style.backgroundColor=color[randomColor];
+	};
+	
+	window.onload = changeColor();  // do this in window.onload !!  window.onload(changeColor)
+</script>
 </html>
diff --git a/static/css/style.css b/static/css/style.css
@@ -16,17 +16,24 @@
     font-style: normal;
 }
 body {
-	background-color: #212021;
-	color: #fbf6f6;
+	background-color: #202f2c; /*green*/
+	/*background-color: #362124; /*red*/
+	/*background-color: #363145; /*purple*/
+	color: #bbbdbe;
 	font-family: "saxmono";
 	font-size: 16px
 }
 
 .container {
 	display: flex;
-	flex-wrap: wrap
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: auto;
 }
 .section {
+	background-color: #252627;
 	margin: auto;
 	width: 599px;
 }
@@ -58,12 +65,12 @@ h1,h2,h3,h4,h5 {
 }
 
 h1 {
-	color: #cfe063;
+	color: #6da398;
 	margin: 0px;
 }
 
 h2,h3,h4,h5 {
-	color: #888aa9;
+	color: #8398a1;
 }
 
 a {
@@ -81,10 +88,10 @@ ul {
 li {
 	width 100%;
     font-size: 16px;
-    color: #9c96ae;
+    color: #90baca;
 }
 li a {
-	color: #fbf6f6;
+	color: #bbbdbe;
 	font-weight: normal;
 	text-decoration: none;
     font-size: 16px;
@@ -92,7 +99,8 @@ li a {
 li a:hover,
 li a:focus {
 	outline: none;
-    color: #b6ce63;
+    color: #181819;
+	background-color: #a0a1a1;
 }
 
 #search {
@@ -107,8 +115,8 @@ input[type=text]:focus {
 input[type=text] {
 	outline: none;
 	border: none;
-    background-color: #4e495a;
-	color: #b8d680;
+    background-color: #181819;
+	color: #bbbdbe;
 	width: 50%;
 	height: 50px;
 	padding: 5px 0px 5px 15px;
@@ -118,22 +126,25 @@ input[type=text] {
 	-webkit-transition: all 0.30s ease-in-out;
 }
 input#find {
-    border: solid 3px #929eb5;
+    border: solid 2px #64777a;
     border-radius: 2px;
     max-width: 100%;
     font-family: 'envy';
 }
+::placeholder {
+	color: #bbbdbe;
+}
 ::-webkit-scrollbar {
-	background: #212021;
+	background: #181819;
 	border: 0;
 	border-radius: 0;
 }
 ::-webkit-scrollbar-track {
-	background: #212021;
+	background: #181819;
 	border: 0;
 	border-radius: 0;
 }
 ::-webkit-scrollbar-thumb {
-	background: #212021;
+	background: #181819;
 	border-radius: 0;
 }