Horizontal Date Menu

diff --git a/scripts/dom.js b/scripts/dom.js
index edaf1d93e8d724916410fbbb0f8e6817ce9afb47..c1df230337d13d73cba2d362f3b8c3eadbfb8820 100644 (file)
--- a/scripts/dom.js
+++ b/scripts/dom.js
@@ -64,20 +64,15 @@ var DOM = (dom => {
                e.id = h;
                dom.thumb_layer.appendChild(e);
 
-               let d = document.createElement("div");
-               d.classList.add("section-holder");
-               e.appendChild(d);
-
                let t = document.createElement("div");
                t.innerText = n;
                t.classList.add("section-text");
-               d.appendChild(t);
+               e.appendChild(t);
 
                let u = document.createElement("ul");
                u.classList.add("section-list");
                u.id = h + "-list";
-               d.appendChild(u);
-               // 2em+1vh + n *
+               e.appendChild(u);
 
                let g = document.createElement("div");
                g.classList.add("grid");
@@ -87,11 +82,10 @@ var DOM = (dom => {
 
        dom.finishSections = (l) =>
        {
-               for (let section of document.getElementsByClassName("section-holder")) {
-                       let height = section.offsetHeight;
+               for (let section of document.getElementsByClassName("section")) {
                        let list = section.childNodes[1];
                        let name = section.childNodes[0].innerText;
-                       for (let n of l) {
+                       for (let n of l.reverse()) {
                                let h = n.toLowerCase().replace(" ","-");
                                let l = document.createElement("li");
                                list.appendChild(l);
@@ -102,10 +96,8 @@ var DOM = (dom => {
                                l.appendChild(a);
 
                                if (n === name) {
-                                       console.log("Setting <" + n + "> top to: -" + height + "px");
-                                       list.style.top = "-" + height + "px";
+                                       a.style.color = "var(--fg-col)";
                                }
-                               height += a.offsetHeight;
                        }
                }
        }

diff --git a/styles/main.css b/styles/main.css
index c58867c2e32d8107ad06e5ff4527ee0a906d70c4..bd0dc2b0fde7a91050ad639124069d19bf15aa0e 100644 (file)
--- a/styles/main.css
+++ b/styles/main.css
@@ -17,12 +17,14 @@
        --gutter-width: calc(10px + 7vw);
 }
 
+html {
+       scroll-behavior: smooth;
+}
 
 body {
        background-color: var(--bg-col);
        color: var(--fg-col);
        margin: 5%;
-       font-size: calc(2em + 0.5vw);
        font-family: sans-serif;
 }
 
@@ -34,7 +36,7 @@ body {
 
 #logo {
        display: flex;
-       padding-bottom: 3vh;
+       margin-bottom: 3vh;
        justify-content: center;
 }
 
@@ -44,15 +46,15 @@ body {
 }
 
 .section {
-       display: flex;
-       padding-bottom: 3vh;
-       justify-content: center;
+       background-color: var(--bg-lite-col);
+       border-radius: 1vw;
+       margin-bottom: 3vh;
 }
 
 .section-text {
-       background-color: var(--bg-lite-col);
-       border-radius: 2vw;
-       padding: 1vw;
+       font-size: calc(2em + 0.5vw);
+       padding-top: .75vw;
+       padding-bottom: .25vw;
        text-align: center;
        visibility: visible;
        opacity: 1;
@@ -60,13 +62,11 @@ body {
 }
 
 .section-list {
-       background-color: var(--bg-lite-col);
-       border-radius: 2vw;
-       position: relative;
        text-align: center;
-       list-style: none;
        margin: 0;
-       padding: 1vw;
+       padding-left: 0;
+       padding-bottom: .5vw;
+       overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: visibility 300ms, opacity 300ms;
@@ -74,23 +74,23 @@ body {
 
 .section-list a {
        text-decoration: none;
-       color: var(--fg-col);
-       display: block;
-       padding: .3vw;
+       font-size: 12pt;
+       color: var(--fg-mute-col);
+       white-space: nowrap;
 }
 
-.section-holder {
-       height: calc(2em + 1vh);
-       
+.section-list a:hover {
+       color: var(--fg-emph-col);
+       transition: color 500ms;
 }
 
-.section-holder:hover .section-text {
-       visibility: hidden;
-       opacity: 0;
-       transition: visibility 300ms, opacity 300ms;
+.section-list li {
+       display: inline;
+       padding-left: 1vw;
+       padding-right: 1vw;
 }
 
-.section-holder:hover .section-list {
+.section:hover .section-list {
        visibility: visible;
        opacity: 1;
        transition: visibility 500ms, opacity 500ms;
@@ -98,7 +98,7 @@ body {
 
 .grid {
        display: flex;
-       padding-bottom: 3vh;
+       margin-bottom: 3vh;
        flex-wrap: wrap;
        justify-content: center;
 }