From: Matthew Kousoulas <shaman.kous@gmail.com>
Date: Fri, 4 Mar 2022 19:34:55 +0000 (-0500)
Subject: Horizontal Date Menu
X-Git-Url: http://gitweb.madkous.net/?a=commitdiff_plain;h=349d9bf3cf6f7a894f1a9c61df158d1e85ea6099;p=photo-site.git

Horizontal Date Menu
---

diff --git a/scripts/dom.js b/scripts/dom.js
index edaf1d9..c1df230 100644
--- 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 c58867c..bd0dc2b 100644
--- 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;
 }