From 4d20834b36eb204c6454c23214cc96b03849361b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 11 Oct 2025 09:47:40 +0200
Subject: [PATCH] Refactoring

---
 .../logo-carousel.component.html              |   2 +-
 .../logo-carousel.component.scss              | 271 +++++++++---------
 2 files changed, 136 insertions(+), 137 deletions(-)

diff --git a/libs/ui/src/lib/logo-carousel/logo-carousel.component.html b/libs/ui/src/lib/logo-carousel/logo-carousel.component.html
index 6ce564f89..79b4ca11b 100644
--- a/libs/ui/src/lib/logo-carousel/logo-carousel.component.html
+++ b/libs/ui/src/lib/logo-carousel/logo-carousel.component.html
@@ -1,5 +1,5 @@
 <div class="logo-carousel-container overflow-hidden position-relative w-100">
-  <div class="d-flex logo-carousel-track">
+  <div class="align-items-center d-flex logo-carousel-track">
     @for (logo of logosRepeated; track $index) {
       <div class="logo-carousel-item">
         <a
diff --git a/libs/ui/src/lib/logo-carousel/logo-carousel.component.scss b/libs/ui/src/lib/logo-carousel/logo-carousel.component.scss
index f8cb378dc..3d2c91de9 100644
--- a/libs/ui/src/lib/logo-carousel/logo-carousel.component.scss
+++ b/libs/ui/src/lib/logo-carousel/logo-carousel.component.scss
@@ -47,123 +47,131 @@
         width: 30px;
       }
     }
-  }
-
-  .logo-carousel-track {
-    align-items: center;
-    animation: scroll 60s linear infinite;
-    width: fit-content;
-
-    &:hover {
-      animation-play-state: paused;
-    }
-  }
-
-  .logo-carousel-item {
-    flex-shrink: 0;
-    min-width: 200px;
-    padding: 0 2rem;
-
-    @media (max-width: 768px) {
-      min-width: 150px;
-      padding: 0.75rem 1.5rem;
-    }
-
-    @media (max-width: 576px) {
-      min-width: 120px;
-      padding: 0.5rem 1rem;
-    }
-  }
-
-  .logo {
-    height: 3rem;
-    transition:
-      opacity 0.3s ease,
-      transform 0.3s ease;
-    width: 7.5rem;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &.mask {
-      background-color: rgba(var(--dark-secondary-text));
-      mask-position: center;
-      mask-repeat: no-repeat;
-      mask-size: contain;
-    }
-
-    &.logo-alternative-to {
-      mask-image: url('/assets/images/logo-alternative-to.svg');
-    }
-
-    &.logo-awesome {
-      background-image: url('/assets/images/logo-awesome.png');
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      filter: grayscale(1);
-    }
-
-    &.logo-dev-community {
-      mask-image: url('/assets/images/logo-dev-community.svg');
-    }
-
-    &.logo-hacker-news {
-      mask-image: url('/assets/images/logo-hacker-news.svg');
-    }
-
-    &.logo-openalternative {
-      mask-image: url('/assets/images/logo-openalternative.svg');
-    }
-
-    &.logo-privacy-tools {
-      mask-image: url('/assets/images/logo-privacy-tools.svg');
-    }
-
-    &.logo-product-hunt {
-      background-image: url('/assets/images/logo-product-hunt.png');
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      filter: grayscale(1);
-    }
-
-    &.logo-reddit {
-      mask-image: url('/assets/images/logo-reddit.svg');
-      max-height: 1rem;
-    }
 
-    &.logo-sackgeld {
-      mask-image: url('/assets/images/logo-sackgeld.png');
-    }
-
-    &.logo-selfh-st {
-      mask-image: url('/assets/images/logo-selfh-st.svg');
-      max-height: 1.25rem;
-    }
-
-    &.logo-sourceforge {
-      mask-image: url('/assets/images/logo-sourceforge.svg');
-    }
-
-    &.logo-umbrel {
-      mask-image: url('/assets/images/logo-umbrel.svg');
-      max-height: 1.5rem;
-    }
+    .logo-carousel-track {
+      animation: scroll 60s linear infinite;
+      width: fit-content;
 
-    &.logo-unraid {
-      mask-image: url('/assets/images/logo-unraid.svg');
-    }
+      &:hover {
+        animation-play-state: paused;
+      }
 
-    @media (max-width: 768px) {
-      height: 2.5rem;
-      width: 6rem;
-    }
+      .logo-carousel-item {
+        flex-shrink: 0;
+        min-width: 200px;
+        padding: 0 2rem;
+
+        @media (max-width: 768px) {
+          min-width: 150px;
+          padding: 0.75rem 1.5rem;
+        }
+
+        @media (max-width: 576px) {
+          min-width: 120px;
+          padding: 0.5rem 1rem;
+        }
+
+        .logo {
+          height: 3rem;
+          transition:
+            opacity 0.3s ease,
+            transform 0.3s ease;
+          width: 7.5rem;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          &.mask {
+            background-color: rgba(var(--dark-secondary-text));
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+          }
+
+          &.logo-alternative-to {
+            mask-image: url('/assets/images/logo-alternative-to.svg');
+          }
+
+          &.logo-awesome {
+            background-image: url('/assets/images/logo-awesome.png');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            filter: grayscale(1);
+          }
+
+          &.logo-dev-community {
+            mask-image: url('/assets/images/logo-dev-community.svg');
+          }
+
+          &.logo-hacker-news {
+            mask-image: url('/assets/images/logo-hacker-news.svg');
+          }
+
+          &.logo-openalternative {
+            mask-image: url('/assets/images/logo-openalternative.svg');
+          }
+
+          &.logo-privacy-tools {
+            mask-image: url('/assets/images/logo-privacy-tools.svg');
+          }
+
+          &.logo-product-hunt {
+            background-image: url('/assets/images/logo-product-hunt.png');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            filter: grayscale(1);
+          }
+
+          &.logo-reddit {
+            mask-image: url('/assets/images/logo-reddit.svg');
+            max-height: 1rem;
+          }
+
+          &.logo-sackgeld {
+            mask-image: url('/assets/images/logo-sackgeld.png');
+          }
+
+          &.logo-selfh-st {
+            mask-image: url('/assets/images/logo-selfh-st.svg');
+            max-height: 1.25rem;
+          }
+
+          &.logo-sourceforge {
+            mask-image: url('/assets/images/logo-sourceforge.svg');
+          }
+
+          &.logo-umbrel {
+            mask-image: url('/assets/images/logo-umbrel.svg');
+            max-height: 1.5rem;
+          }
+
+          &.logo-unraid {
+            mask-image: url('/assets/images/logo-unraid.svg');
+          }
+
+          @media (max-width: 768px) {
+            height: 2.5rem;
+            width: 6rem;
+          }
+
+          @media (max-width: 576px) {
+            height: 2rem;
+            width: 5rem;
+          }
+        }
+      }
 
-    @media (max-width: 576px) {
-      height: 2rem;
-      width: 5rem;
+      @keyframes scroll {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(-50%);
+        }
+      }
     }
   }
 }
@@ -185,30 +193,21 @@
         rgba(var(--palette-background-background-dark), 0) 100%
       );
     }
-  }
 
-  .logo {
-    &.logo-alternative-to,
-    &.logo-dev-community,
-    &.logo-hacker-news,
-    &.logo-openalternative,
-    &.logo-privacy-tools,
-    &.logo-reddit,
-    &.logo-sackgeld,
-    &.logo-selfh-st,
-    &.logo-sourceforge,
-    &.logo-umbrel,
-    &.logo-unraid {
-      background-color: rgba(var(--light-primary-text));
+    .logo {
+      &.logo-alternative-to,
+      &.logo-dev-community,
+      &.logo-hacker-news,
+      &.logo-openalternative,
+      &.logo-privacy-tools,
+      &.logo-reddit,
+      &.logo-sackgeld,
+      &.logo-selfh-st,
+      &.logo-sourceforge,
+      &.logo-umbrel,
+      &.logo-unraid {
+        background-color: rgba(var(--light-primary-text));
+      }
     }
   }
 }
-
-@keyframes scroll {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}