release beta4

src/Jotunheimr/UserBundle/Resources/public/css/layout.css

@@ -99,6 +99,52 @@ header section .form-input:hover {
     box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
 }
 
+header section .failure {
+    background: #f00;
+    position: relative;
+    border: 3px solid #fff;
+    font: bold 16px 'Rajdhani', sans-serif;
+    color: #FFFFFF;
+    padding: 10px;
+    margin: 30px 0 10px 0;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+header section .failure:after,
+header section .failure:before {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 50px;
+    height: 0;
+    width: 0;
+    border: solid transparent;
+    pointer-events: none;
+}
+
+header section .failure:after {
+    border-color: rgba(0, 0, 0, 0);
+    border-bottom-color: #f00;
+    border-width: 20px;
+    margin-left: -20px;
+}
+
+header section .failure:before {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+    border-width: 26px;
+    margin-left: -26px;
+}
+
+header section .failure ul {
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    margin: 0 10px 0 0;
+}
+
 header section h3.or {
     font: bold 16px 'Rajdhani', sans-serif;
     text-transform: uppercase;
@@ -165,6 +211,19 @@ header section div.buttons > a.slack-login:hover {
     color: #5c3a58;
 }
 
+header section .failure-main {
+    background: #f00;
+    max-width: 500px;
+    border: 3px solid #fff;
+    font: bold 16px 'Rajdhani', sans-serif;
+    color: #FFFFFF;
+    padding: 10px;
+    margin: 0 0 20px 0;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
 @media screen and (max-width: 1100px) {
     header section .form-input,
     header section .form-check {