From: Matthew Kousoulas <shaman.kous@gmail.com>
Date: Mon, 4 Oct 2021 00:26:57 +0000 (-0400)
Subject: Masonry Layout
X-Git-Url: http://gitweb.madkous.net/?a=commitdiff_plain;h=e646d109b464fc6de9d9e58f49ca7917877e91cd;p=photo-site.git

Masonry Layout
---

diff --git a/scripts/dom.js b/scripts/dom.js
index c83f8ad..59ffbe4 100644
--- a/scripts/dom.js
+++ b/scripts/dom.js
@@ -50,12 +50,16 @@ var DOM = (dom => {
 	dom.addSection = (n) =>
 	{
 		let e = document.createElement("div");
-		e.innerText = n;
-		CLASS.section(e);
+		e.classList.add("section");
 		document.body.appendChild(e);
 
+		let t = document.createElement("div");
+		t.innerText = n;
+		t.classList.add("section-text");
+		e.appendChild(t);
+
 		let g = document.createElement("div");
-		CLASS.grid(g);
+		g.classList.add("grid");
 		document.body.appendChild(g);
 		dom.thumb_grid = g;
 
diff --git a/styles/main.css b/styles/main.css
index 5aac2df..8b858ee 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,8 +1,7 @@
 :root {
 	/* tan */
 	--bg-col: #CCBFA8;
-	--bg-lite-col: #CEC2A6;
-	--main-bd-col: #EEE2CF;
+	--bg-lite-col: #DED3BF;
 
 	/* purple */
 	--fg-col: #615E71;
@@ -26,11 +25,6 @@ body {
 	font-family: sans-serif;
 }
 
-#sidebar {
-	/* background-color: blue; */
-	/* width: auto; */
-}
-
 .float {
 	position: fixed;
 	width: var(--menu-width);
@@ -48,80 +42,70 @@ body {
 	filter: hue-rotate(10deg) saturate(150%) drop-shadow(5px 5px 5px var(--shadow-col));
 }
 
-@keyframes text_press {
-	0% {
-	}
-	100% {
-	}
-}
-
 .section {
 	display: flex;
 	padding-bottom: 3vh;
 	justify-content: center;
 }
 
+.section-text {
+	background-color: var(--bg-lite-col);
+	border-radius: 2vw;
+	padding: 1vw;
+}
+
 .grid {
-	display: grid;
-	grid-row-gap: 1vw;
-	grid-column-gap: 1vw;
-	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	display: flex;
 	padding-bottom: 3vh;
-	/* background-color: green; */
+	flex-wrap: wrap;
 }
 
 .grid > div {
-	/* background-color: red; */
-	display: flex;
-	height: 160px;
-	width: 160px;
-	justify-content: center;
-	align-items: center;
+	flex-grow: 1;
+	margin: .3vw;
+	overflow: hidden;
+	border-radius: .5vw;
 }
 
 .grid > div > img {
 	display: block;
-	max-height: 160px;
-	max-width: 160px;
-	border: medium outset var(--main-bd-col);
-	box-shadow: 5px 5px 5px var(--shadow-col);
+	min-width: 100%;
+	height: 200px;
+	object-fit: cover;
 }
 
-.grid > div > img:hover {
-	animation-name: box_bounce;
+.grid > div:hover {
+	animation-name: box_hover;
 	animation-timing-function: ease-in-out;
-	animation-duration: 300ms;
-	box-shadow: 10px 10px 10px var(--shadow-col);
-	transform: translate(0px, -2.5px);
+	animation-duration: 800ms;
+	transform: scale(1.1);
+	box-shadow: 0px 0px 20px 10px var(--shadow-col);
 }
 
-.grid > div > img:active {
-	animation-name: box_press;
-	animation-timing-function: ease-in-out;
-	animation-duration: 100ms;
-	box-shadow: 2px 2px 2px var(--shadow-col);
-	transform: translate(0px, 1px);
-}
-
-@keyframes box_press {
+@keyframes box_hover {
 	0% {
-		box-shadow: 10px 10px 10px var(--shadow-col);
-		transform: translate(0px, -2.5px);
+		transform: scale(1.0);
+		box-shadow: 0px 0px 0px var(--shadow-col);
 	}
 	100% {
-		box-shadow: 2px 2px 2px var(--shadow-col);
-		transform: translate(0px, 1px);
+		transform: scale(1.1);
+		box-shadow: 0px 0px 20px 10px var(--shadow-col);
 	}
 }
 
-@keyframes box_bounce {
+.grid > div:active {
+	animation-name: box_active;
+	animation-timing-function: ease-in-out;
+	animation-duration: 500ms;
+	transform: scale(0.95);
+}
+
+@keyframes box_active {
 	0% {
-		box-shadow: 5px 5px 5px var(--shadow-col);
-		transform: translate(0px, 0px);
+		transform: scale(1.1);
 	}
 	100% {
-		box-shadow: 10px 10px 10px var(--shadow-col);
-		transform: translate(0px, -2.5px);
+		transform: scale(0.95);
 	}
 }