Templating: Improved error templates

resources/assets/themes/base.less

@@ -1,4 +1,5 @@
 @import "../../../node_modules/bootstrap/less/bootstrap";
+@import "error";
 
 body {
   padding-top: 50px;
@@ -17,7 +18,7 @@ body {
   display: block;
   font-size: 30px;
   line-height: 30px;
-  margin: 0px;
+  margin: 0;
 }
 
 .icon-icon_angel {
@@ -135,7 +136,7 @@ table a > .icon-icon_angel {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-itmes: stretch;
+  align-items: stretch;
   width: 100%;
 
   .lane {

resources/assets/themes/error.less

@@ -0,0 +1,33 @@
+/* =============================================================
+	Error page
+   ============================================================= */
+
+.error-big {
+  text-align: center;
+
+  h2 {
+    font-size: 10em;
+    font-weight: bold;
+
+    small {
+      display: block;
+      font-size: 0.3em;
+    }
+
+    @keyframes error-page-pulse {
+      from {
+        opacity: 0.3;
+      }
+      to {
+        opacity: 1.0;
+      }
+    }
+    .pulse {
+      animation-name: error-page-pulse;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+      animation-direction: alternate;
+    }
+  }
+}

resources/views/errors/403.twig

@@ -0,0 +1,5 @@
+{% extends "errors/default.twig" %}
+
+{% block title %}{{ __("Forbidden") }}{% endblock %}
+
+{% block content_headline_text %}{{ __("You are not allowed to access this page") }}{% endblock %}

resources/views/errors/404.twig

@@ -0,0 +1,18 @@
+{% extends "errors/default.twig" %}
+
+{% block title %}{{ __("Page not found") }}{% endblock %}
+
+{% block content_container %}
+    <div class="row">
+        <div class="col-sm-6 col-sm-offset-3 error-big">
+            <h2>
+                4<span class="pulse">:</span>{{ status|slice(1, 2) }}
+                <small>{{ __("No sleep found") }}</small>
+            </h2>
+
+            {% block content_text %}
+                {{ content }}
+            {% endblock %}
+        </div>
+    </div>
+{% endblock %}

resources/views/errors/default.twig

@@ -1,7 +1,21 @@
 {% extends "layouts/app.twig" %}
 
-{% block title %}{% if status == 404 %}{{ __("Page not found") }}{% else %}Error {{ status }}{% endif %}{% endblock %}
+{% block title %}Error {{ status }}{% endblock %}
 
 {% block content %}
-    <div class="alert alert-info">{{ content }}</div>
+    <div class="container">
+        {% block content_container %}
+            <div class="alert alert-info">
+
+                {% block content_headline %}
+                    <h2>{% block content_headline_text %}Error {{ status }}{% endblock %}</h2>
+                {% endblock %}
+
+                {% block content_text %}
+                    {{ content }}
+                {% endblock %}
+
+            </div>
+        {% endblock %}
+    </div>
 {% endblock %}