diff options
| author | Andinus <andinus@nand.sh> | 2022-06-10 14:29:43 +0530 |
|---|---|---|
| committer | Andinus <andinus@nand.sh> | 2022-06-10 14:30:38 +0530 |
| commit | 483cb31907a34f5aea7c221fd1a22427bf3fa487 (patch) | |
| tree | 28943b80dc7de6e586c8bbd5d2e3e06a2dccd1d3 /resources | |
| parent | 8c46ba5ac96734296bef661058190d9f78ef5db2 (diff) | |
| download | crater-483cb31907a34f5aea7c221fd1a22427bf3fa487.tar.gz | |
Fix gallery item size, other improvements
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/css/style.css | 19 | ||||
| -rw-r--r-- | resources/js/gallery.js | 7 |
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') { |