attempting to remove white backgrounds

Author: its-d

_data/skills.json

@@ -1,9 +1,9 @@
 [
-  { "name": "AWS", "icon": "/images/blog/skills/aws.png" },
-  { "name": "Terraform", "icon": "/images/blog/skills/terraform.jpg" },
-  { "name": "Python", "icon": "/images/blog/skills/python.png" },
-  { "name": "Docker", "icon": "/images/blog/skills/docker.jpg" },
+  { "name": "AWS", "icon": "/images/blog/skills/aws.png", "whiteBg": true },
+  { "name": "Terraform", "icon": "/images/blog/skills/terraform.jpg", "whiteBg": true },
+  { "name": "Python", "icon": "/images/blog/skills/python.png", "whiteBg": true },
+  { "name": "Docker", "icon": "/images/blog/skills/docker.jpg", "whiteBg": true },
   { "name": "GitHub", "icon": "/images/blog/skills/github.jpg" },
-  { "name": "Linux", "icon": "/images/blog/skills/linux.jpg" },
-  { "name": "SQL", "icon": "/images/blog/skills/sql.jpg" }
+  { "name": "Linux", "icon": "/images/blog/skills/linux.jpg", "whiteBg": true },
+  { "name": "SQL", "icon": "/images/blog/skills/sql.jpg", "whiteBg": true }
 ]

_includes/partials/skills.njk

@@ -6,7 +6,7 @@
     <div class="skill-item">
       <div class="skill-icon-wrap">
         {% if skill.icon %}
-        <img src="{{ skill.icon | url | absoluteUrl }}" alt="" class="skill-icon-img" loading="lazy">
+        <img src="{{ skill.icon | url | absoluteUrl }}" alt="" class="skill-icon-img{% if skill.whiteBg %} skill-icon-img--multiply{% endif %}" loading="lazy">
         {% else %}
         <span class="skill-icon" aria-hidden="true">{{ skillName[0] }}</span>
         {% endif %}

css/style.css

@@ -401,6 +401,11 @@ section {
   object-fit: contain;
 }
 
+/* Burn white to black so colored logos sit on dark; skip for dark icons (e.g. GitHub) */
+.skill-icon-wrap .skill-icon-img--multiply {
+  mix-blend-mode: multiply;
+}
+
 .skill-icon-wrap .skill-icon {
   font-size: 1.5rem;
   color: var(--text);