« get me outta code hell

css: fix image sizing inside grid items - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2023-07-31 11:50:43 -0300
committer(quasar) nebula <qznebula@protonmail.com>2023-07-31 11:50:43 -0300
commit1456a67ca58dc7c5d4da0509c57649b26d48aa78 (patch)
treec8e1297b2c78f2222f25d1c68c94c575e4219ac0
parentc4b6524d51447c388a635c55997d1b5b28ca1ced (diff)
css: fix image sizing inside grid items
-rw-r--r--src/content/dependencies/image.js2
-rw-r--r--src/static/site4.css7
2 files changed, 7 insertions, 2 deletions
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 45379629..24c91d0f 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -157,7 +157,7 @@ export default {
       let wrapped = content;
 
       wrapped =
-        html.tag('div', {class: 'image-container'},
+        html.tag('div', {class: ['image-container', !originalSrc && 'placeholder-image']},
           html.tag('div', {class: 'image-inner-area'},
             wrapped));
 
diff --git a/src/static/site4.css b/src/static/site4.css
index b4e23cf2..b92d088c 100644
--- a/src/static/site4.css
+++ b/src/static/site4.css
@@ -553,6 +553,11 @@ a.box img {
   height: auto;
 }
 
+a.box .image-container.placeholder-image {
+  width: 100%;
+  height: 100%;
+}
+
 h1 {
   font-size: 1.5em;
 }
@@ -871,7 +876,7 @@ img {
 
 .grid-item img {
   width: 100%;
-  height: 100%;
+  height: 100% !important;
   margin-top: auto;
   margin-bottom: auto;
 }