configuration pocketbase terminé (#5)

# Conflicts: # .gitignore
2025-08-21 18:41:52 +02:00
parent 1dc1109482
commit 4fb600b0cb
179 changed files with 23970 additions and 15135 deletions
--- a/src/app/routes/home/home.component.scss
+++ b/src/app/routes/home/home.component.scss
@@ -1,46 +1,67 @@
-#container {
-  color:#999;
-  text-transform: uppercase;
-  font-size:36px;
-  font-weight:bold;
-  display:block;
-}
-
-#flip {
-  margin-top: 10px;
-  height:50px;
-  overflow:hidden;
-}
-
-#flip > div > div {
-  color:#fff;
-  padding:4px 12px;
-  height:45px;
-  margin-bottom:45px;
-  display:inline-block;
-}
-
-#flip div:first-child {
-  animation: show 10s linear infinite;
-}
-
-#flip div div {
-  background:#42c58a;
-}
-#flip div:first-child div {
-  background:#4ec7f3;
-}
-#flip div:last-child div {
-  background:#DC143C;
-}
-
-@keyframes show {
-  0% {margin-top:-270px;}
-  5% {margin-top:-180px;}
-  33% {margin-top:-180px;}
-  38% {margin-top:-90px;}
-  66% {margin-top:-90px;}
-  71% {margin-top:0px;}
-  99.99% {margin-top:0px;}
-  100% {margin-top:-270px;}
-}
+h1 {
+  .word-animation {
+    overflow: hidden;
+
+    span {
+      color: #4ec7f3;
+      display: block;
+      text-transform: capitalize;
+      animation: rotateSpin 10s infinite;
+
+      &.red {
+        color: red;
+      }
+
+      &.orange {
+        color: orange;
+      }
+
+      &.blue {
+        color: blue;
+      }
+    }
+  }
+}
+
+@keyframes rotateSpin {
+  10% {
+    -webkit-transform-style: translateY(-102%);
+    transform: translateY(-102%);
+  }
+
+  25% {
+    -webkit-transform-style: translateY(-100%);
+    transform: translateY(-100%);
+  }
+
+  35% {
+    -webkit-transform-style: translateY(-202%);
+    transform: translateY(-202%);
+  }
+
+  50% {
+    -webkit-transform-style: translateY(-200%);
+    transform: translateY(-200%);
+  }
+
+  60% {
+    -webkit-transform-style: translateY(-302%);
+    transform: translateY(-302%);
+  }
+
+  75% {
+    -webkit-transform-style: translateY(-300%);
+    transform: translateY(-300%);
+  }
+
+  85% {
+    -webkit-transform-style: translateY(-402%);
+    transform: translateY(-402%);
+  }
+
+  100% {
+    -webkit-transform-style: translateY(-400%);
+    transform: translateY(-400%);
+  }
+
+}