alerts now slide in and -unimportant- ones hide automatically

templates/standalone/alerts.julius

@@ -11,6 +11,13 @@
       alertEl.classList.add('alert--invisible');
     });
     alertEl.insertBefore(closeEl, alertEl.children[0]);
+
+    // auto-hide info and success-alerts after 3 seconds
+    if (!alertEl.matches('.alert-danger, .alert-warning')) {
+      window.setTimeout(function() {
+        alertEl.classList.add('alert--invisible');
+      }, 3000);
+    }
   }
 
 })();

templates/standalone/alerts.lucius

@@ -8,6 +8,14 @@
   display: flex;
   flex-direction: column;
 }
+
+@media (min-width: 768px) {
+
+  .alerts {
+    top: 150px;
+  }
+}
+
 .alert {
   position: relative;
   display: inline-block;
@@ -23,6 +31,7 @@
   margin-left: 20px;
   margin-right: 60px;
   box-shadow: 0 0 7px var(--color-dark);
+  animation: slide-in-alert .2s ease-out forwards;
 
   + .alert:not(.alert--invisible) {
     margin-top: 20px;
@@ -39,6 +48,15 @@
   }
 }
 
+@keyframes slide-in-alert {
+  from {
+    left: 120%;
+  }
+  to {
+    left: 0;
+  }
+}
+
 @media (min-width: 425px) {
 
   .alert {