From 0ccf250cae8dd87f6f4d07ecffb231987220d281 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Thu, 16 Jul 2020 21:59:05 +0200
Subject: [PATCH] make error page a bit more responsive

---
 templates/usr/share/nginx/html/error.html.j2 | 122 +++++++++----------
 1 file changed, 59 insertions(+), 63 deletions(-)
diff --git a/templates/usr/share/nginx/html/error.html.j2 b/templates/usr/share/nginx/html/error.html.j2
index 95b66d6..cfccf59 100644
--- a/templates/usr/share/nginx/html/error.html.j2
+++ b/templates/usr/share/nginx/html/error.html.j2
@@ -1,83 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="robots" content="noindex, nofollow" />
 
     <title>Oops! You're lost.</title>
 
     <style>
-      html,
-      body {
-        height: 100%;
-        min-height: 100%;
-        margin: 0;
-        padding: 0;
-      }
+        html,
+        body {
+            height: 100%;
+            min-height: 100%;
+            margin: 0;
+            padding: 0;
+        }
 
-      body {
-        cursor: default;
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
-          Roboto, "Helvetica Neue", Arial, sans-serif;
-        font-size: 0.875rem;
-        font-weight: normal;
-        line-height: 1.5;
-        color: #383e4b;
-        background-color: #f5f5f5;
-      }
+        body {
+            cursor: default;
+            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+                Roboto, "Helvetica Neue", Arial, sans-serif;
+            font-size: 1rem;
+            font-weight: normal;
+            line-height: 1.5;
+            color: #383e4b;
+            background-color: #f5f5f5;
+        }
 
-      h1 {
-        font-size: 4.5rem;
-        font-weight: 300;
-        line-height: 1.1;
-        float: left;
-        margin: 0 1.5rem;
-      }
-      h4 {
-        font-size: 1.5rem;
-        padding: 0.7rem 0 0 0;
-        margin: 0;
-      }
+        h1 {
+            font-size: 4.5rem;
+            font-weight: 300;
+            margin: 0 1.5rem 0 0;
+        }
+        h4 {
+            font-size: 1.5rem;
+            margin: 0;
+        }
 
-      p {
-        font-weight: 500;
-        line-height: 1.1;
-        color: #9da0a8;
-        padding: 0;
-        margin: 0;
-      }
+        p {
+            font-weight: 500;
+            line-height: 1;
+            color: #9da0a8;
+            padding: 0;
+            margin: 0;
+        }
 
-      .wrapper {
-        position: relative;
-        top: 50%;
-        -webkit-transform: translateY(-60%);
-        -ms-transform: translateY(-60%);
-        transform: translateY(-60%);
-      }
+        .container {
+            display: flex;
+            margin: 0;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            height: 100%;
+            min-width: 380px;
+        }
 
-      .container {
-        width: 550px;
-        margin: 0 auto;
-      }
+        .no-wrap {
+            flex-shrink: 0;
+        }
     </style>
-  </head>
+</head>
 
-  <body>
-    <div class="wrapper">
-      <div class="container">
-        <h1>
-          <!--# echo var="status" default="" -->
-        </h1>
-        <h4>Oops! You're lost.</h4>
-        <p>
-          <!--# echo var="status_text" default="Something goes wrong" -->
-        </p>
-      </div>
+<body>
+    <div class="container">
+        <div>
+            <h1><!--# echo var="status" default="" --></h1>
+        </div>
+        <div class="no-wrap">
+            <h4>Oops! You're lost.</h4>
+            <p><!--# echo var="status_text" default="Something goes wrong" --></p>
+        </div>
     </div>
-  </body>
+</body>
 </html>
