Error pages

src/pretix/base/templates/400.html

@@ -2,7 +2,8 @@
 {% load i18n %}
 {% block title %}{% trans "Bad Request" %}{% endblock %}
 {% block content %}
-    <i class="fa fa-frown-o big-icon"></i>
+    <i class="fa fa-frown-o fa-fw big-icon"></i>
+    <div class="error-details">
         <h1>{% trans "Bad Request" %}</h1>
         <p>{% trans "We were unable to parse your request." %}</p>
         <p>{{ exception }}</p>
@@ -10,4 +11,5 @@
             <a id='goback' href='#'>{% trans "Take a step back" %}</a>
             &middot; <a id='reload' href='#'>{% trans "Try again" %}</a>
         </p>
+    </div>
 {% endblock %}

src/pretix/base/templates/403.html

@@ -2,7 +2,8 @@
 {% load i18n %}
 {% block title %}{% trans "Permission denied" %}{% endblock %}
 {% block content %}
-    <i class="fa fa-lock big-icon"></i>
+    <i class="fa fa-fw fa-lock big-icon"></i>
+    <div class="error-details">
         <h1>{% trans "Permission denied" %}</h1>
         <p>{% trans "You do not have access to this page." %}</p>
         <p>{{ exception }}</p>
@@ -10,4 +11,5 @@
             <a id='goback' href='#'>{% trans "Take a step back" %}</a>
             &middot; <a id='reload' href='#'>{% trans "Try again" %}</a>
         </p>
+    </div>
 {% endblock %}

src/pretix/base/templates/404.html

@@ -2,11 +2,13 @@
 {% load i18n %}
 {% block title %}{% trans "Not found" %}{% endblock %}
 {% block content %}
-    <i class="fa fa-meh-o big-icon"></i>
+    <i class="fa fa-meh-o fa-fw big-icon"></i>
+    <div class="error-details">
         <h1>{% trans "Not found" %}</h1>
         <p>{% trans "I'm afraid we could not find the the resource you requested." %}</p>
         <p>{{ exception }}</p>
         <p class="links">
             <a id='goback' href='#'>{% trans "Take a step back" %}</a>
         </p>
+    </div>
 {% endblock %}

src/pretix/base/templates/500.html

@@ -2,7 +2,8 @@
 {% load i18n %}
 {% block title %}{% trans "Internal Server Error" %}{% endblock %}
 {% block content %}
-    <i class="fa fa-bolt big-icon"></i>
+    <i class="fa fa-bolt big-icon fa-fw"></i>
+    <div class="error-details">
         <h1>{% trans "Internal Server Error" %}</h1>
         <p>{% trans "We had trouble processing your request." %}</p>
         <p>{% trans "If this problem persists, please contact us." %}</p>
@@ -20,4 +21,5 @@
             <a id='goback' href='#'>{% trans "Take a step back" %}</a>
             &middot; <a id='reload' href='#'>{% trans "Try again" %}</a>
         </p>
+    </div>
 {% endblock %}

src/pretix/base/templates/csrffail.html

@@ -2,10 +2,12 @@
 {% load i18n %}
 {% block title %}{% trans "Verification failed" %}{% endblock %}
 {% block content %}
-    <i class="fa fa-frown-o big-icon"></i>
+    <i class="fa fa-frown-o big-icon fa-fw"></i>
+    <div class="error-details">
         <h1>{% trans "Verification failed" %}</h1>
         <p>{% blocktrans trimmed %}
-        We could not verify that this request really was sent from you. For security reasons, we therefore cannot process it.
+            We could not verify that this request really was sent from you. For security reasons, we therefore cannot
+            process it.
         {% endblocktrans %}</p>
         {% if no_referer %}
             <p>{{ no_referer1 }}</p>
@@ -15,10 +17,12 @@
             <p>{{ no_cookie2 }}</p>
         {% else %}
             <p>{% blocktrans trimmed %}
-            Please go back to the last page, refresh this page and then try again. If the problem persists, please get in touch with us.
+                Please go back to the last page, refresh this page and then try again. If the problem persists, please
+                get in touch with us.
             {% endblocktrans %}</p>
         {% endif %}
         <p class="links">
             <a id='goback' href='#'>{% trans "Take a step back" %}</a>
         </p>
+    </div>
 {% endblock %}

src/pretix/static/pretixbase/scss/error.scss

@@ -5,12 +5,35 @@
 
 
 body {
-    background: #ececec;
+    background: #fbf7fc;
-    text-align: center;
     padding: 50px 0;
 }
 
 .big-icon {
     font-size: 200px;
-    color: $brand-primary;
+    color: $navbar-inverse-bg;
+    display: block;
+    float: left;
+}
+
+.error-details {
+    margin-left: 260px;
+}
+
+.container {
+    width: 90%;
+    max-width: 800px;
+}
+
+@media(max-width: 600px) {
+    body {
+        text-align: center;
+    }
+    .big-icon {
+        margin: auto;
+        float: none;
+    }
+    .error-details {
+        margin-left: 0;
+    }
 }