Fix gallery item size, other improvements

2 files changed, 12 insertions, 14 deletions

diff --git a/resources/css/style.css b/resources/css/style.css
index eb7f9f2..7e8f72d 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -58,8 +58,8 @@ input, .alert {
     min-width: 30%;
 }
 
-img, .text { width: 384px; }
-.heading { width: 364px; }
+img, .text { width: 400px; }
+.heading { width: 380px; }
 
 .heading {
     box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset,
@@ -83,19 +83,16 @@ img, .text { width: 384px; }
     padding: 1em;
 }
 
-/* .gallery { */
-/*     column-count: auto; */
-/*     column-width: 384px; */
-/*     column-fill: balance; */
-/* } */
+.gallery {
+    margin: auto;
+}
 .gallery img {
     transform-origin: center;
-    transform: perspective(800px) rotateY(2deg);
-    transition: 0.4s;
+    transition: 0.5s;
 }
-.gallery:hover img { opacity: 0.4; }
+.gallery:hover img { opacity: 0.5; }
 .gallery img:hover {
-    transform: perspective(800px) rotateY(0deg) scale(1.1);
+    transform: scale(1.1);
     box-shadow: var(--bg-active) 0px 20px 30px -10px;
     opacity: 1;
 }
diff --git a/resources/js/gallery.js b/resources/js/gallery.js
index 73e5458..f9be5e2 100644
--- a/resources/js/gallery.js
+++ b/resources/js/gallery.js
@@ -6,11 +6,13 @@
 // gutter  - the space (in px) between the columns and grid items
 
 // image width.
-const imgW = 384;
+const imgW = 400;
 
 const sizes = [
     { columns: 1, gutter: 30 },
-    { mq: ((imgW * 2.5) + 40) + "px", columns: 2, gutter: 40 },
+    { mq: ((imgW * 2.2) + 40) + "px", columns: 2, gutter: 35 },
+    { mq: ((imgW * 3.5) + 50) + "px", columns: 3, gutter: 50 },
+    { mq: ((imgW * 4.4) + 50) + "px", columns: 4, gutter: 50 },
     // { mq: '768px', columns: 2, gutter: 25 },
     // { mq: '1280px', columns: 3, gutter: 50 }
 ];
@@ -28,7 +30,6 @@ instance
 
 // start it up, when the DOM is ready. note that if images are in the
 // grid, you may need to wait for document.readyState === 'complete'.
-
 document.addEventListener('DOMContentLoaded', eve => {
     document.addEventListener('readystatechange', event => {
         if (event.target.readyState === 'complete') {