From d24b7c2668cf48868b661408bf78169ef8030878 Mon Sep 17 00:00:00 2001
From: Matthew Kousoulas <shaman.kous@gmail.com>
Date: Sun, 27 Jun 2021 21:35:23 -0400
Subject: [PATCH] Change Color Scheme

---
 index.html      | 11 ++++---
 scripts/dom.js  |  8 ++---
 styles/main.css | 84 +++++++++++++++++++------------------------------
 3 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/index.html b/index.html
index a8337fe..ecc9aff 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>MadKous Photography</title>
 		<link rel="stylesheet" type="text/css" href="styles/main.css"></script>
-		<link rel="icon" href="/favicon.ico?=v2"></script>
 		<!-- util must be first; driver must be last -->
 		<script type="text/javascript" src="scripts/util.js"></script>
 		<script type="text/javascript" src="scripts/photo.js"></script>
@@ -18,13 +17,15 @@
 			<div id="sidebar">
 				<div class="float">
 					<div id="logo">
-						<img src="/media/logo_cl.svg" alt="MadKous">
+						<a href="/">
+							<img src="/media/logo_ng.svg" alt="MadKous">
+						</a>
 					</div>
 					<div class="menu">
 						<ul id="methods">
-							<li id="loc"><div>Location</div></li>
-							<li id="sub"><div>Subject</div></li>
-							<li id="date"><div>Date</div></li>
+							<li id="loc"><a>Location</a></li>
+							<li id="sub"><a>Subject</a></li>
+							<li id="date"><a>Date</a></li>
 						</ul>
 					</div>
 				</div>
diff --git a/scripts/dom.js b/scripts/dom.js
index 09ac22a..3e75ea2 100644
--- a/scripts/dom.js
+++ b/scripts/dom.js
@@ -17,7 +17,7 @@ var DOM = (dom => {
 		let e = document.createElement("div");
 
 		t.alt = p.desc;
-		t.src = `pictures/${p.name}_thm.jpg`;
+		t.src = `/media/pictures/${p.name}_thm.jpg`;
 
 		e.appendChild(t);
 		e.addEventListener("click", () => {
@@ -31,17 +31,17 @@ var DOM = (dom => {
 		let e = document.createElement("img");
 
 		e.alt = p.desc;
-		e.src = `pictures/${p.name}_sm.jpg`;
+		e.src = `/media/pictures/${p.name}_sm.jpg`;
 		e.addEventListener("click", () => {
 			event.stopPropagation();
-			window.open(`pictures/${p.name}.jpg`);
+			window.open(`/media/pictures/${p.name}.jpg`);
 		});
 		return e;
 	}
 
 	dom.makeCategory = (s, m) => {
 		let e = document.createElement("li");
-		let d = document.createElement("div");
+		let d = document.createElement("a");
 		d.innerText = s;
 		e.appendChild(d);
 		e.id = s;
diff --git a/styles/main.css b/styles/main.css
index 2c84c3b..7fbd2a8 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,13 +1,21 @@
 :root {
-	--bg-col: #151515;
-	--bg-lite-col: #212121;
-	--fg-col: #c3c3c3;
-	--fg-emph-col: #e8e8e8;
-	--fg-mute-col: #797979;
-	--shadow-col: #050505;
+	/* tan */
+	--bg-col: #DDCFB8;
+	--bg-lite-col: #CEC2A6;
+	--main-bd-col: #EEE2CF;
+
+	/* purple */
+	--fg-col: #716E81;
+	--fg-emph-col: #5D5E7A;
+	--fg-mute-col: #716E8144;
+	--shadow-col: #35343CB3;
+	--frame-bd-col: #D4D1E5;
+
+	/* sage */
+	--button-col: #94ACA7;
 
 	--menu-width: calc(100px + 10vw);
-	--gutter-width: calc(10px + 4vw);
+	--gutter-width: calc(10px + 7vw);
 }
 
 body {
@@ -43,23 +51,24 @@ body {
 	align-items: center;
 }
 
-#logo > img {
+#logo > a > img {
 	height: calc(7px + 7vw);
-	box-shadow: 5px 5px 5px var(--shadow-col);
+	filter: hue-rotate(10deg) saturate(150%) drop-shadow(5px 5px 5px var(--shadow-col));
 }
 
 .menu {
 	display: inline grid;
 	width: 100%;
-	overflow-y: scroll;
-	max-height: 70vh;
 }
 
 .menu > ul {
 	cursor: pointer;
 	background-color: var(--bg-lite-col);
 	width: 100%;
-	box-shadow: 5px 5px 5px inset var(--shadow-col);
+	border: medium inset var(--main-bd-col);
+	overflow-y: scroll;
+	max-height: 70vh;
+	/* box-shadow: 5px 5px 5px inset var(--shadow-col); */
 }
 
 ul {
@@ -69,8 +78,9 @@ ul {
 }
 
 
-li > div {
-	text-shadow: 3px 3px 3px var(--shadow-col);
+li > a {
+	font-weight: bold;
+	/* text-shadow: 3px 3px 3px var(--shadow-col); */
 }
 
 li {
@@ -81,29 +91,14 @@ li > div:active {
 	animation-name: text_press;
 	animation-timing-function: ease-in-out;
 	animation-duration: 100ms;
-	text-shadow: 1px 1px 1px var(--shadow-col);
-	transform: translate(0px, 1px);
+	/* text-shadow: 1px 1px 1px var(--shadow-col); */
+	/* transform: translate(0px, 1px); */
 }
 
 @keyframes text_press {
 	0% {
-		text-shadow: 3px 3px 3px var(--shadow-col);
-		/* transform: translate(0px, -2.5px); */
 	}
 	100% {
-		text-shadow: 1px 1px 1px var(--shadow-col);
-		transform: translate(0px, 1px);
-	}
-}
-
-@keyframes text_bounce {
-	0% {
-		text-shadow: 3px 3px 3px var(--shadow-col);
-		transform: translate(0px, 0px);
-	}
-	100% {
-		text-shadow: 5px 5px 5px var(--shadow-col);
-		transform: translate(0px, -2.5px);
 	}
 }
 
@@ -129,9 +124,8 @@ li > div:active {
 	display: block;
 	max-height: 160px;
 	max-width: 160px;
-	/* border-radius: 10px; */
+	border: medium outset var(--main-bd-col);
 	box-shadow: 5px 5px 5px var(--shadow-col);
-	/* margin: auto; */
 }
 
 .thumb-grid > div > img:hover {
@@ -191,14 +185,14 @@ li > div:active {
 
 .photo-frame > img {
 	max-width: 90vw;
-	max-height: 90vh;
+	max-height: 84vh;
 	margin-left: auto;
 	margin-right: auto;
-	margin-top: 5vh;
+	margin-top: 7vh;
 	margin-bottom: auto;
 	display: block;
-	border: medium solid;
-	box-shadow: 0px 0px 5vmax 5vmax var(--shadow-col);
+	border: thick solid var(--frame-bd-col);
+	box-shadow: 0px 0px 6vmax 5vmax #0D0D0DC2;
 }
 
 .center {
@@ -208,33 +202,21 @@ li > div:active {
 }
 
 .arrow-sym {
-	/* border: solid var(--fg-mute-col); */
-	/* border-width: 0 1vw 1vw 0; */
-	/* display: inline-block; */
-	/* padding: 1vw; */
-	/* margin-left: auto; */
-	/* margin-right: auto; */
-	/* width: 0; */
-	/* height: 0; */
-	/* margin: 0; */
 	position: absolute;
 	top: 50%;
 	transform: translateY(-50%);
-	/* text-align: center; */
 }
 
 .arrow-left {
-	/* transform: rotate(135deg); */
 	border-top: 2vw solid transparent;
 	border-bottom: 2vw solid transparent;
-	border-right: 2vw solid var(--fg-mute-col);
+	border-right: 2vw solid var(--button-col);
 }
 
 .arrow-right {
-	/* transform: rotate(-45deg); */
 	border-top: 2vw solid transparent;
 	border-bottom: 2vw solid transparent;
-	border-left: 2vw solid var(--fg-mute-col);
+	border-left: 2vw solid var(--button-col);
 }
 
 .arrow-bar {
-- 
2.45.3