alert-tests on admin-demo-page and responsiveness fixes

templates/adminTest.hamlet

@@ -2,18 +2,17 @@
     <div .alert>
       <div .alert__content>
         UniWorkY ist noch nicht abgeschlossen.
-
     <div .alert .alert-success>
       <div .alert__content>
-        Die Korrektoren wurden aktualisiert!
+        Die Korrektoren wurden aktualisiert! (.alert-success)
 
     <div .alert .alert-warning>
       <div .alert__content>
-        Ich bin mir nicht ganz sicher ob das gerade gut war... willst dus nochmal probieren?
+        ... willst dus nochmal probieren? (.alert-warning)
 
     <div .alert .alert-danger>
       <div .alert__content>
-        Nicht so gut! Egal was das war. Es hat mir nicht gefallen!
+        Nicht so gut! Egal was das war. Es hat mir nicht gefallen! (.alert-error)
 
 <div .container>
   <h1>Uniworky - Admin Demopage

templates/standalone/alerts.lucius

@@ -4,13 +4,16 @@
   bottom: 5%;
   right: 0;
   z-index: 20;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
 }
 .alert {
   position: relative;
+  display: inline-block;
   background-color: var(--color-dark);
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
-  text-align: right;
   font-size: 1rem;
   color: #f3f3f3;
   z-index: 0;
@@ -19,8 +22,9 @@
   padding-left: 30px;
   margin-left: 20px;
   margin-right: 60px;
+  box-shadow: 0 0 7px var(--color-dark);
 
-  + .alert {
+  + .alert:not(.alert--invisible) {
     margin-top: 20px;
   }
 
@@ -35,8 +39,23 @@
   }
 }
 
+@media (min-width: 425px) {
+
+  .alert {
+    margin-left: 80px;
+  }
+}
+
 @media (min-width: 768px) {
 
+  .alert {
+    margin-left: 40px;
+    min-width: 400px;
+  }
+}
+
+@media (min-width: 1024px) {
+
   .alert {
     min-width: 400px;
   }
@@ -79,9 +98,9 @@
   cursor: pointer;
   text-align: right;
   position: absolute;
-  left: 20px;
+  left: 0px;
   top: 0;
-  width: 20px;
+  width: 60px;
   height: 100%;
   /* TODO: remove next line as soon as messagerenderer-error in julius gets resolved */
   color: var(--color-dark);
@@ -134,6 +153,7 @@
 .alert-warning {
   background-color: var(--color-warning);
   color: var(--color-dark);
+  box-shadow: 0 0 7px var(--color-warning);
 
   .alert__close {
     color: var(--color-warning);
@@ -161,6 +181,7 @@
 .alert-error {
   background-color: var(--color-error);
   color: var(--color-lightwhite);
+  box-shadow: 0 0 7px var(--color-error);
 
   .alert__close {
     color: var(--color-error);