fix wordwrapping bug and added notification elements

dist/ef19487056b129c8f3eda17f9543ab70.css

@@ -10,43 +10,45 @@ body {
 main {
   z-index: 980;
   position: relative;
-  top: 5.5em; }
+  top: 5.5em;
+  width: 100%;
+  word-break: break-all; }
 
 h1 {
-  margin: 10px; }
+  margin: 0; }
 
 h2 {
-  margin: 10px; }
+  margin: 0; }
 
 h3 {
-  margin: 10px; }
+  margin: 0; }
 
 h4 {
-  margin: 10px; }
+  margin: 0; }
 
 h5 {
-  margin: 10px; }
+  margin: 0; }
 
 h6 {
-  margin: 10px; }
+  margin: 0; }
 
 h7 {
-  margin: 10px; }
+  margin: 0; }
 
 h8 {
-  margin: 10px; }
+  margin: 0; }
 
 h9 {
-  margin: 10px; }
+  margin: 0; }
 
 h10 {
-  margin: 10px; }
+  margin: 0; }
 
 h11 {
-  margin: 10px; }
+  margin: 0; }
 
 h12 {
-  margin: 10px; }
+  margin: 0; }
 
 .dev {
   border: 1px solid black; }
@@ -89,9 +91,65 @@ h12 {
   padding: 1rem;
   color: white; }
 
+.notification-primary {
+  width: 100%;
+  display: flex; }
+
+.notification-primary h2 {
+  border-right: 0.3rem solid #3498db;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-danger {
+  width: 100%;
+  display: flex; }
+
+.notification-danger h2 {
+  border-right: 0.3rem solid #e74c3c;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-warning {
+  width: 100%;
+  display: flex; }
+
+.notification-warning h2 {
+  border-right: 0.3rem solid #f1c40f;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-success {
+  width: 100%;
+  display: flex; }
+
+.notification-success h2 {
+  border-right: 0.3rem solid #2ecc71;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-body {
+  line-height: 30pt;
+  font-size: 15pt;
+  word-wrap: break-word; }
+
 div[class^="col-"] {
-  padding: 1rem 0;
-  text-align: center; }
+  padding: 1rem 0; }
 
 .row {
   display: flex;

dist/ef19487056b129c8f3eda17f9543ab70.js

@@ -149,7 +149,7 @@ function Module() {
 module.bundle.Module = Module;
 
 if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
-  var ws = new WebSocket('ws://localhost:63342/');
+  var ws = new WebSocket('ws://localhost:50893/');
   ws.onmessage = function(event) {
     var data = JSON.parse(event.data);
 

dist/index.html

@@ -31,6 +31,26 @@
                 <div class="alert-warning"> test </div>
                 <div class="alert-success"> test </div>
                 <br>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="notification-primary"> 
+                    <h2 class="notification-primary-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2 class="notification-danger-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2 class="notification-warning-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2 class="notification-success-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
                 <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>