fix: renaming rht-art-direction to rht-picture

Author: markcaron

static/js/art-direction.js renamed to static/js/rht-picture.js

@@ -1,18 +1,18 @@
 document.addEventListener('DOMContentLoaded', function() {
     const body = document.querySelector('body');
-    const artDirectionEls = document.querySelectorAll('rht-art-direction');
+    const pictureEls = document.querySelectorAll('rht-picture');
 
     var observer = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {
         if (mutation.type === "attributes") {
           let styleAttr = mutation.target.getAttribute('style');
 
           if (styleAttr.includes('color-scheme: dark')) {
-            artDirectionEls.forEach((art) => {
+            pictureEls.forEach((art) => {
               art.classList.add('dark');
             });
           } else {
-            artDirectionEls.forEach((art) => {
+            pictureEls.forEach((art) => {
               art.classList.remove('dark');
             });
           }

static/styles/main.css

@@ -230,7 +230,7 @@
 
       [slot="header"],
       [slot="image"] {
-        rht-art-direction {
+        rht-picture {
           display: grid;
           grid-template-columns: 1fr;
           align-content: center;
@@ -319,7 +319,7 @@
 }
 
 @layer pseudo-components {
-  rht-art-direction {
+  rht-picture {
     .img-on-dark {
       display: none;
     }

templates/index.html

@@ -26,10 +26,10 @@ <h2 id="h-featured" class="visually-hidden">Featured projects</h2>
                 {% for feature in featured %}
                 <rh-card>
                     <a href="{{ feature.github }}" slot="header">
-                        <rht-art-direction>
+                        <rht-picture>
                             <img class="img-{{ feature.logo }} img-on-light" src="img/new-logo-{{ feature.logo }}.png" alt="{{ feature.name }}">
                             <img class="img-{{ feature.logo }} img-on-dark" src="img/new-logo-{{ feature.logo }}-on-dark.png" alt="{{ feature.name }}">
-                        </rht-art-direction>
+                        </rht-picture>
                     </a>
 
                     <p>{{feature.description}}</p>
@@ -117,7 +117,7 @@ <h3 class="header">{{ elem.heading }}</h3>
 {% include "partials/_footer.html" %}
 
 <script src="/js/table-search.js"></script>
-<script src="/js/art-direction.js"></script>
+<script src="/js/rht-picture.js"></script>
 
 </body>
 </html>