Masonry Layout

diff --git a/scripts/dom.js b/scripts/dom.js
index c83f8ade181338ed5089dbb877bab076769964d2..59ffbe4202cf414b1505b0107effca7f5150ef22 100644 (file)
--- 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 5aac2dfae8513246e340310150d07670b241991b..8b858eef308805dee1bfd8d8b3e3380636dea868 100644 (file)
--- 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);
        }
 }