Add retro LED footer marquee

2026-03-08 07:14:27 +01:00
parent bd3417207c
commit 212b78527b
3 changed files with 271 additions and 3 deletions
@@ -495,6 +495,138 @@ html[lang="ar"] {
    opacity: 0.92;
    pointer-events: none;
  }
+
+  .retro-led-panel {
+    position: relative;
+    overflow: hidden;
+    --retro-led-dot-size: 0.12rem;
+    --retro-led-grid-gap: 0.16rem;
+    --retro-led-pad-x: 0.5rem;
+    --retro-led-pad-y: 0.36rem;
+    width: calc(
+      var(--retro-led-visible-columns) * var(--retro-led-dot-size) +
+        (var(--retro-led-visible-columns) - 1) * var(--retro-led-grid-gap) + 2 * var(--retro-led-pad-x)
+    );
+    max-width: 100%;
+    border-radius: 0.75rem;
+    padding: var(--retro-led-pad-y) var(--retro-led-pad-x);
+    background: linear-gradient(180deg, hsl(228 38% 7%), hsl(232 42% 5%));
+  }
+
+  .retro-led-viewport {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    min-height: calc(
+      var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
+        (var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
+    );
+  }
+
+  .retro-led-background {
+    position: absolute;
+    inset: var(--retro-led-pad-y) var(--retro-led-pad-x);
+    display: grid;
+    grid-template-columns: repeat(var(--retro-led-visible-columns), var(--retro-led-dot-size));
+    grid-template-rows: repeat(var(--retro-led-visible-rows), var(--retro-led-dot-size));
+    gap: var(--retro-led-grid-gap);
+  }
+
+  .retro-led-track {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    display: flex;
+    width: max-content;
+    align-items: center;
+    animation: retro-led-marquee 16s linear infinite;
+    will-change: transform;
+  }
+
+  .retro-led-message {
+    flex: none;
+    display: grid;
+    grid-template-columns: repeat(var(--retro-led-message-columns), var(--retro-led-dot-size));
+    grid-template-rows: repeat(var(--retro-led-visible-rows), var(--retro-led-dot-size));
+    column-gap: var(--retro-led-grid-gap);
+    row-gap: var(--retro-led-grid-gap);
+    width: calc(
+      var(--retro-led-message-columns) * var(--retro-led-dot-size) +
+        (var(--retro-led-message-columns) - 1) * var(--retro-led-grid-gap)
+    );
+    height: calc(
+      var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
+        (var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
+    );
+  }
+
+  .retro-led-dot {
+    height: var(--retro-led-dot-size);
+    width: var(--retro-led-dot-size);
+    border-radius: 9999px;
+  }
+
+  .retro-led-background-dot {
+    background-color: hsl(228 18% 22%);
+  }
+
+  .retro-led-active-dot,
+  .retro-led-dot.is-lit {
+    background-color: hsl(var(--primary));
+  }
+
+  .retro-led-spacer {
+    flex: none;
+    width: calc(
+      var(--retro-led-repeat-gap-columns) * var(--retro-led-dot-size) +
+        (var(--retro-led-repeat-gap-columns) - 1) * var(--retro-led-grid-gap)
+    );
+    height: calc(
+      var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
+        (var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
+    );
+  }
+
+  .dark .retro-led-panel {
+    background: linear-gradient(180deg, hsl(228 38% 7%), hsl(232 42% 5%));
+  }
+
+  @keyframes retro-led-marquee {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      transform: translate3d(
+        calc(
+          -1 * (
+            var(--retro-led-message-columns) * var(--retro-led-dot-size) +
+              (var(--retro-led-message-columns) - 1) * var(--retro-led-grid-gap) +
+              var(--retro-led-repeat-gap-columns) * var(--retro-led-dot-size) +
+              (var(--retro-led-repeat-gap-columns) - 1) * var(--retro-led-grid-gap)
+          )
+        ),
+        0,
+        0
+      );
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .retro-led-track {
+      animation: none;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .retro-led-panel {
+      --retro-led-dot-size: 0.11rem;
+      --retro-led-grid-gap: 0.12rem;
+      --retro-led-pad-x: 0.42rem;
+      --retro-led-pad-y: 0.3rem;
+    }
+  }
 }

@media (min-width: 640px) {