Change Color Scheme

diff --git a/index.html b/index.html
index a8337fe4ed150926639985821ae63b720bcc8a84..ecc9affed110588d8c4b943337d2eacca14d5c7c 100644 (file)
--- 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 09ac22a0ffb0e59e7ccba964aa8d9961f61997b8..3e75ea223de3f76e784c14f48ad4ccab3b245f8e 100644 (file)
--- 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 2c84c3b7a93ae1dbd868739631136abc87610b31..7fbd2a824f095ce8cd1a12e38cdb167078fee589 100644 (file)
--- 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 {