New and improved in sveltekit

2025-10-29 16:50:12 +00:00 · 2023-05-22 22:29:43 +02:00
parent 4c5ede45a1
commit 23d4b727e6
78 changed files with 6148 additions and 648 deletions
--- a/src/lib/components/Livestream.svelte
+++ b/src/lib/components/Livestream.svelte
@@ -0,0 +1,52 @@
+<div class="livestream-container">
+  <img src="https://i.imgur.com/T4fCMI5.png" alt="livestream" />
+
+  <div class="pulse"></div>
+</div>
+
+<style lang="scss" module="scoped">
+.livestream-container {
+  position: relative;
+  border-radius: 1rem;
+  border: 0.5rem solid var(--background);
+  transition: border-color var(--color-transition-duration) ease-in-out;
+  display: inline-block;
+  height: fit-content;
+
+  img {
+    border-radius: 0.5rem;
+    width: 100%;
+    max-width: 860px;
+  }
+
+  .pulse {
+    position: absolute;
+    top: 1.2rem;
+    left: 1.2rem;
+    border-radius: 50%;
+    background-color: rgba(255, 82, 82, 1);
+    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
+    height: 1.7rem;
+    width: 1.7rem;
+    transform: scale(1);
+    animation: pulse-red 2s infinite;
+
+    @keyframes pulse-red {
+      0% {
+        transform: scale(0.9);
+        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
+      }
+      
+      70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 12px rgba(255, 82, 82, 0);
+      }
+      
+      100% {
+        transform: scale(0.9);
+        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
+      }
+    }
+  }
+}
+</style>