Fix text wrap (#841)

* Fix overflow search

* Make animation infinite

pages/index.vue

@@ -13,6 +13,7 @@
             >
               {{ projectType.display }}s <br />
             </strong>
+            <strong class="main-header-strong">mods</strong>
           </span>
         </div>
       </h1>
@@ -992,6 +993,11 @@ export default {
               background: var(--landing-card-bg);
               box-shadow: var(--landing-card-shadow);
 
+              img {
+                width: 4rem;
+                height: 4rem;
+              }
+
               .notif-header {
                 margin: 0;
                 font-weight: 600;
@@ -1256,29 +1262,36 @@ export default {
 
   @keyframes slide {
     0%,
-    12% {
+    13% {
       top: 0;
     }
-    15%,
+    17%,
-    27% {
+    30% {
       top: -1.2em;
     }
-    30%,
+    33%,
-    42% {
+    46% {
       top: -2.4em;
     }
-    45%,
+    50%,
-    57% {
+    63% {
       top: -3.6em;
     }
-    60%,
+    66%,
-    72% {
+    79% {
       top: -4.8em;
     }
-    75%,
+    83%,
-    83% {
+    96% {
       top: -6em;
     }
+    99.99997%,
+    99.99998% {
+      top: -7.2em;
+    }
+    99.99999% {
+      top: 0;
+    }
   }
 }
 
@@ -1318,6 +1331,15 @@ export default {
               }
             }
           }
+
+          .notifs-demo {
+            .notifications .notification {
+              img {
+                width: 5rem;
+                height: 5rem;
+              }
+            }
+          }
         }
       }
     }