« get me outta code hell

content, css: select .image instead of img - 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>2024-01-11 08:52:42 -0400
committer(quasar) nebula <qznebula@protonmail.com>2024-01-11 18:07:59 -0400
commitd27ceb4165cd41ae5caec663514d00e74d50302e (patch)
treebb177ef485a3e966e1c647e32743a02774b5a53d
parent3b3b16c0a0a2c4a244ed21f12592097324b05bdf (diff)
content, css: select .image instead of img
-rw-r--r--src/content/dependencies/image.js2
-rw-r--r--src/static/site6.css14
2 files changed, 9 insertions, 7 deletions
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 2876bad3..6d58bd23 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -127,6 +127,8 @@ export default {
     const willSquare = slots.square;
 
     const imgAttributes = html.attributes([
+      {class: 'image'},
+
       slots.alt && {alt: slots.alt},
       slots.width && {width: slots.width},
       slots.height && {height: slots.height},
diff --git a/src/static/site6.css b/src/static/site6.css
index f8fac719..772ebc47 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -659,7 +659,7 @@ p .current {
   border-top-color: var(--deep-color);
 }
 
-#cover-art img {
+#cover-art .image {
   display: block;
   width: 100%;
   height: 100%;
@@ -726,7 +726,7 @@ a.box:focus:not(:focus-visible) {
   outline: none;
 }
 
-a.box img {
+a.box .image {
   display: block;
   max-width: 100%;
   height: auto;
@@ -1128,7 +1128,7 @@ img.pixelate {
   height: 100%;
 }
 
-.reveal img {
+.reveal .image {
   filter: blur(20px);
   opacity: 0.4;
 }
@@ -1173,7 +1173,7 @@ img.pixelate {
   opacity: 0.8;
 }
 
-.reveal.revealed img {
+.reveal.revealed .image {
   filter: none;
   opacity: 1;
 }
@@ -1225,7 +1225,7 @@ img.pixelate {
   box-shadow: none;
 }
 
-.grid-item img {
+.grid-item .image {
   width: 100%;
   height: 100% !important;
   margin-top: auto;
@@ -1421,7 +1421,7 @@ html[data-url-key="localized.home"] .carousel-container {
   padding: 0;
 }
 
-.carousel-item img {
+.carousel-item .image {
   width: 100%;
   height: 100%;
   margin-top: auto;
@@ -1719,7 +1719,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   border-radius: 1.75px;
 }
 
-.content-sticky-heading-cover img {
+.content-sticky-heading-cover .image {
   display: block;
   width: 100%;
   height: 100%;