Refactoring

libs/ui/src/lib/logo-carousel/logo-carousel.component.scss

@@ -138,10 +138,14 @@
             mask-image: url('/assets/images/logo-selfh-st.svg');
             max-height: 1.25rem;
           }
-          
+
           &.logo-selfhostedhub {
-            mask-image: url('/assets/images/logo-selfhostedhub.svg');
-            max-height: 1.25rem; 
+            background-image: url('/assets/images/logo-selfhostedhub.svg');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            filter: grayscale(1);
+            opacity: 0.5;
           }
 
           &.logo-sourceforge {
@@ -199,20 +203,14 @@
       );
     }
 
-    .logo {
-      &.logo-alternative-to,
-      &.logo-dev-community,
-      &.logo-hacker-news,
-      &.logo-openalternative,
-      &.logo-privacy-tools,
-      &.logo-reddit,
-      &.logo-sackgeld,
-      &.logo-selfh-st,
-      &.logo-selfhostedhub,
-      &.logo-sourceforge,
-      &.logo-umbrel,
-      &.logo-unraid,{
-        background-color: rgba(var(--light-primary-text));
+    .logo-carousel-track {
+      .logo-carousel-item {
+        .logo {
+          &.mask {
+            background-color: rgba(var(--light-secondary-text));
+          }
+        }
+      }
     }
   }
 }

libs/ui/src/lib/logo-carousel/logo-carousel.component.ts

@@ -84,9 +84,8 @@ export class GfLogoCarouselComponent {
     },
     {
       className: 'logo-selfhostedhub',
-      isMask: true,  
       name: 'SelfhostedHub',
-      title: 'SelfhostedHub – Discover self-hosted software solutions',
+      title: 'SelfhostedHub — Discover best self-hosted software',
       url: 'https://selfhostedhub.com'
     },
     {