Make error pages responsive design

fced4b6e · Takuya Noguchi · f4804d5b · fced4b6e · fced4b6e · fced4b6e
Commit fced4b6e authored Jun 30, 2016 by Takuya Noguchi
6 changed files
--- a/public/404.html
+++ b/public/404.html
 <!DOCTYPE html>
 <html>
 <head>
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  <title>The page you're looking for could not be found (404)</title>
  <style>
      body {
        color: #666;
        text-align: center;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        margin: 0;
-        width: 800px;
        margin: auto;
        font-size: 14px;
      }
@@ -34,11 +33,20 @@
      }
      hr {
-        margin: 18px 0;
+        max-width: 800px;
+        margin: 18px auto;
        border: 0;
        border-top: 1px solid #EEE;
        border-bottom: 1px solid white;
      }
+      img {
+        max-width: 40vw;
+      }
+      .container {
+        margin: auto 20px;
+      }
  </style>
 </head>
@@ -47,9 +55,11 @@
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDIxMCAyMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTVsMzguNjQtMTE4LjkyMWgtNzcuMjhsMzguNjQgMTE4LjkyMXoiIGZpbGw9IiNlMjQzMjkiLz4KICA8cGF0aCBkPSJNMTA1LjA2MTQgMjAzLjY1NDhsLTM4LjY0LTExOC45MjFoLTU0LjE1M2w5Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTIuMjY4NSA4NC43MzQxbC0xMS43NDIgMzYuMTM5Yy0xLjA3MSAzLjI5Ni4xMDIgNi45MDcgMi45MDYgOC45NDRsMTAxLjYyOSA3My44MzgtOTIuNzkzLTExOC45MjF6IiBmaWxsPSIjZmNhMzI2Ii8+CiAgPHBhdGggZD0iTTEyLjI2ODUgODQuNzM0Mmg1NC4xNTNsLTIzLjI3My03MS42MjVjLTEuMTk3LTMuNjg2LTYuNDExLTMuNjg1LTcuNjA4IDBsLTIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTQ4bDM4LjY0LTExOC45MjFoNTQuMTUzbC05Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTk3Ljg1NDQgODQuNzM0MWwxMS43NDIgMzYuMTM5YzEuMDcxIDMuMjk2LS4xMDIgNi45MDctMi45MDYgOC45NDRsLTEwMS42MjkgNzMuODM4IDkyLjc5My0xMTguOTIxeiIgZmlsbD0iI2ZjYTMyNiIvPgogIDxwYXRoIGQ9Ik0xOTcuODU0NCA4NC43MzQyaC01NC4xNTNsMjMuMjczLTcxLjYyNWMxLjE5Ny0zLjY4NiA2LjQxMS0zLjY4NSA3LjYwOCAwbDIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+Cjwvc3ZnPgo=" /><br />
    404
  </h1>
-  <h3>The page you're looking for could not be found.</h3>
+  <div class="container">
-  <hr/>
+    <h3>The page you're looking for could not be found.</h3>
-  <p>Make sure the address is correct and that the page hasn't moved.</p>
+    <hr/>
-  <p>Please contact your GitLab administrator if you think this is a mistake.</p>
+    <p>Make sure the address is correct and that the page hasn't moved.</p>
+    <p>Please contact your GitLab administrator if you think this is a mistake.</p>
+  </div>
 </body>
 </html>
--- a/public/422.html
+++ b/public/422.html
 <!DOCTYPE html>
 <html>
 <head>
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  <title>The change you requested was rejected (422)</title>
  <style>
    body {
      color: #666;
       text-align: center;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-       margin: 0;
-       width: 800px;
       margin: auto;
       font-size: 14px;
     }
@@ -34,11 +33,20 @@
     }
     hr {
-       margin: 18px 0;
+       max-width: 800px;
+       margin: 18px auto;
       border: 0;
       border-top: 1px solid #EEE;
       border-bottom: 1px solid white;
     }
+     img {
+       max-width: 40vw;
+     }
+     .container {
+       margin: auto 20px;
+     }
   </style>
 </head>
@@ -47,9 +55,11 @@
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDIxMCAyMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTVsMzguNjQtMTE4LjkyMWgtNzcuMjhsMzguNjQgMTE4LjkyMXoiIGZpbGw9IiNlMjQzMjkiLz4KICA8cGF0aCBkPSJNMTA1LjA2MTQgMjAzLjY1NDhsLTM4LjY0LTExOC45MjFoLTU0LjE1M2w5Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTIuMjY4NSA4NC43MzQxbC0xMS43NDIgMzYuMTM5Yy0xLjA3MSAzLjI5Ni4xMDIgNi45MDcgMi45MDYgOC45NDRsMTAxLjYyOSA3My44MzgtOTIuNzkzLTExOC45MjF6IiBmaWxsPSIjZmNhMzI2Ii8+CiAgPHBhdGggZD0iTTEyLjI2ODUgODQuNzM0Mmg1NC4xNTNsLTIzLjI3My03MS42MjVjLTEuMTk3LTMuNjg2LTYuNDExLTMuNjg1LTcuNjA4IDBsLTIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTQ4bDM4LjY0LTExOC45MjFoNTQuMTUzbC05Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTk3Ljg1NDQgODQuNzM0MWwxMS43NDIgMzYuMTM5YzEuMDcxIDMuMjk2LS4xMDIgNi45MDctMi45MDYgOC45NDRsLTEwMS42MjkgNzMuODM4IDkyLjc5My0xMTguOTIxeiIgZmlsbD0iI2ZjYTMyNiIvPgogIDxwYXRoIGQ9Ik0xOTcuODU0NCA4NC43MzQyaC01NC4xNTNsMjMuMjczLTcxLjYyNWMxLjE5Ny0zLjY4NiA2LjQxMS0zLjY4NSA3LjYwOCAwbDIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+Cjwvc3ZnPgo=" /><br />
    422
  </h1>
-  <h3>The change you requested was rejected.</h3>
+  <div class="container">
-  <hr />
+    <h3>The change you requested was rejected.</h3>
-  <p>Make sure you have access to the thing you tried to change.</p>
+    <hr />
-  <p>Please contact your GitLab administrator if you think this is a mistake.</p>
+    <p>Make sure you have access to the thing you tried to change.</p>
+    <p>Please contact your GitLab administrator if you think this is a mistake.</p>
+  </div>
 </body>
 </html>
--- a/public/500.html
+++ b/public/500.html
 <!DOCTYPE html>
 <html>
 <head>
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  <title>Something went wrong (500)</title>
  <style>
     body {
       color: #666;
       text-align: center;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-       margin: 0;
-       width: 800px;
       margin: auto;
       font-size: 14px;
     }
@@ -34,11 +33,20 @@
     }
     hr {
-      margin: 18px 0;
+      max-width: 800px;
+      margin: 18px auto;
      border: 0;
      border-top: 1px solid #EEE;
      border-bottom: 1px solid white;
    }
+    img {
+      max-width: 40vw;
+    }
+    .container {
+      margin: auto 20px;
+    }
  </style>
 </head>
 <body>
@@ -46,9 +54,11 @@
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDIxMCAyMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTVsMzguNjQtMTE4LjkyMWgtNzcuMjhsMzguNjQgMTE4LjkyMXoiIGZpbGw9IiNlMjQzMjkiLz4KICA8cGF0aCBkPSJNMTA1LjA2MTQgMjAzLjY1NDhsLTM4LjY0LTExOC45MjFoLTU0LjE1M2w5Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTIuMjY4NSA4NC43MzQxbC0xMS43NDIgMzYuMTM5Yy0xLjA3MSAzLjI5Ni4xMDIgNi45MDcgMi45MDYgOC45NDRsMTAxLjYyOSA3My44MzgtOTIuNzkzLTExOC45MjF6IiBmaWxsPSIjZmNhMzI2Ii8+CiAgPHBhdGggZD0iTTEyLjI2ODUgODQuNzM0Mmg1NC4xNTNsLTIzLjI3My03MS42MjVjLTEuMTk3LTMuNjg2LTYuNDExLTMuNjg1LTcuNjA4IDBsLTIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTQ4bDM4LjY0LTExOC45MjFoNTQuMTUzbC05Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTk3Ljg1NDQgODQuNzM0MWwxMS43NDIgMzYuMTM5YzEuMDcxIDMuMjk2LS4xMDIgNi45MDctMi45MDYgOC45NDRsLTEwMS42MjkgNzMuODM4IDkyLjc5My0xMTguOTIxeiIgZmlsbD0iI2ZjYTMyNiIvPgogIDxwYXRoIGQ9Ik0xOTcuODU0NCA4NC43MzQyaC01NC4xNTNsMjMuMjczLTcxLjYyNWMxLjE5Ny0zLjY4NiA2LjQxMS0zLjY4NSA3LjYwOCAwbDIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+Cjwvc3ZnPgo=" /><br />
    500
  </h1>
-  <h3>Whoops, something went wrong on our end.</h3>
+  <div class="container">
-  <hr/>
+    <h3>Whoops, something went wrong on our end.</h3>
-  <p>Try refreshing the page, or going back and attempting the action again.</p>
+    <hr/>
-  <p>Please contact your GitLab administrator if this problem persists.</p>
+    <p>Try refreshing the page, or going back and attempting the action again.</p>
+    <p>Please contact your GitLab administrator if this problem persists.</p>
+  </div>
 </body>
 </html>
--- a/public/502.html
+++ b/public/502.html
 <!DOCTYPE html>
 <html>
 <head>
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  <title>GitLab is not responding (502)</title>
  <style>
    body {
      color: #666;
      text-align: center;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-      margin: 0;
-      width: 800px;
      margin: auto;
      font-size: 14px;
    }
@@ -34,11 +33,20 @@
    }
    hr {
-      margin: 18px 0;
+      max-width: 800px;
+      margin: 18px auto;
      border: 0;
      border-top: 1px solid #EEE;
      border-bottom: 1px solid white;
    }
+    img {
+      max-width: 40vw;
+    }
+    .container {
+      margin: auto 20px;
+    }
  </style>
 </head>
 <body>
@@ -46,9 +54,11 @@
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDIxMCAyMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTVsMzguNjQtMTE4LjkyMWgtNzcuMjhsMzguNjQgMTE4LjkyMXoiIGZpbGw9IiNlMjQzMjkiLz4KICA8cGF0aCBkPSJNMTA1LjA2MTQgMjAzLjY1NDhsLTM4LjY0LTExOC45MjFoLTU0LjE1M2w5Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTIuMjY4NSA4NC43MzQxbC0xMS43NDIgMzYuMTM5Yy0xLjA3MSAzLjI5Ni4xMDIgNi45MDcgMi45MDYgOC45NDRsMTAxLjYyOSA3My44MzgtOTIuNzkzLTExOC45MjF6IiBmaWxsPSIjZmNhMzI2Ii8+CiAgPHBhdGggZD0iTTEyLjI2ODUgODQuNzM0Mmg1NC4xNTNsLTIzLjI3My03MS42MjVjLTEuMTk3LTMuNjg2LTYuNDExLTMuNjg1LTcuNjA4IDBsLTIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTQ4bDM4LjY0LTExOC45MjFoNTQuMTUzbC05Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTk3Ljg1NDQgODQuNzM0MWwxMS43NDIgMzYuMTM5YzEuMDcxIDMuMjk2LS4xMDIgNi45MDctMi45MDYgOC45NDRsLTEwMS42MjkgNzMuODM4IDkyLjc5My0xMTguOTIxeiIgZmlsbD0iI2ZjYTMyNiIvPgogIDxwYXRoIGQ9Ik0xOTcuODU0NCA4NC43MzQyaC01NC4xNTNsMjMuMjczLTcxLjYyNWMxLjE5Ny0zLjY4NiA2LjQxMS0zLjY4NSA3LjYwOCAwbDIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+Cjwvc3ZnPgo=" /><br />
    502
  </h1>
-  <h3>Whoops, GitLab is taking too much time to respond.</h3>
+  <div class="container">
-  <hr/>
+    <h3>Whoops, GitLab is taking too much time to respond.</h3>
-  <p>Try refreshing the page, or going back and attempting the action again.</p>
+    <hr/>
-  <p>Please contact your GitLab administrator if this problem persists.</p>
+    <p>Try refreshing the page, or going back and attempting the action again.</p>
+    <p>Please contact your GitLab administrator if this problem persists.</p>
+  </div>
 </body>
 </html>
--- a/public/503.html
+++ b/public/503.html
 <!DOCTYPE html>
 <html>
 <head>
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  <title>GitLab is not responding (503)</title>
  <style>
    body {
      color: #666;
      text-align: center;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-      margin: 0;
-      width: 800px;
      margin: auto;
      font-size: 14px;
    }
@@ -34,11 +33,20 @@
    }
    hr {
-      margin: 18px 0;
+      max-width: 800px;
+      margin: 18px auto;
      border: 0;
      border-top: 1px solid #EEE;
      border-bottom: 1px solid white;
    }
+    img {
+      max-width: 40vw;
+    }
+    .container {
+      margin: auto 20px;
+    }
  </style>
 </head>
 <body>
@@ -46,9 +54,11 @@
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDIxMCAyMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTVsMzguNjQtMTE4LjkyMWgtNzcuMjhsMzguNjQgMTE4LjkyMXoiIGZpbGw9IiNlMjQzMjkiLz4KICA8cGF0aCBkPSJNMTA1LjA2MTQgMjAzLjY1NDhsLTM4LjY0LTExOC45MjFoLTU0LjE1M2w5Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTIuMjY4NSA4NC43MzQxbC0xMS43NDIgMzYuMTM5Yy0xLjA3MSAzLjI5Ni4xMDIgNi45MDcgMi45MDYgOC45NDRsMTAxLjYyOSA3My44MzgtOTIuNzkzLTExOC45MjF6IiBmaWxsPSIjZmNhMzI2Ii8+CiAgPHBhdGggZD0iTTEyLjI2ODUgODQuNzM0Mmg1NC4xNTNsLTIzLjI3My03MS42MjVjLTEuMTk3LTMuNjg2LTYuNDExLTMuNjg1LTcuNjA4IDBsLTIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTQ4bDM4LjY0LTExOC45MjFoNTQuMTUzbC05Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTk3Ljg1NDQgODQuNzM0MWwxMS43NDIgMzYuMTM5YzEuMDcxIDMuMjk2LS4xMDIgNi45MDctMi45MDYgOC45NDRsLTEwMS42MjkgNzMuODM4IDkyLjc5My0xMTguOTIxeiIgZmlsbD0iI2ZjYTMyNiIvPgogIDxwYXRoIGQ9Ik0xOTcuODU0NCA4NC43MzQyaC01NC4xNTNsMjMuMjczLTcxLjYyNWMxLjE5Ny0zLjY4NiA2LjQxMS0zLjY4NSA3LjYwOCAwbDIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+Cjwvc3ZnPgo=" alt="GitLab Logo"/><br />
    503
  </h1>
-  <h3>Whoops, GitLab is currently unavailable.</h3>
+  <div class="container">
-  <hr/>
+    <h3>Whoops, GitLab is currently unavailable.</h3>
-  <p>Try refreshing the page, or going back and attempting the action again.</p>
+    <hr/>
-  <p>Please contact your GitLab administrator if this problem persists.</p>
+    <p>Try refreshing the page, or going back and attempting the action again.</p>
+    <p>Please contact your GitLab administrator if this problem persists.</p>
+  </div>
 </body>
 </html>
--- a/public/deploy.html
+++ b/public/deploy.html
 <!DOCTYPE html>
 <html>
  <head>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Deploy in progress</title>
    <style>
     body {
        color: #666;
        text-align: center;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        margin: 0;
-        width: 800px;
        margin: auto;
        font-size: 14px;
      }
@@ -34,11 +33,20 @@
      }
      hr {
-        margin: 18px 0;
+        max-width: 800px;
+        margin: 18px auto;
        border: 0;
        border-top: 1px solid #EEE;
        border-bottom: 1px solid white;
      }
+      img {
+        max-width: 40vw;
+      }
+      .container {
+        margin: auto 20px;
+      }
    </style>
  </head>
@@ -47,8 +55,10 @@
      <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDIxMCAyMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTVsMzguNjQtMTE4LjkyMWgtNzcuMjhsMzguNjQgMTE4LjkyMXoiIGZpbGw9IiNlMjQzMjkiLz4KICA8cGF0aCBkPSJNMTA1LjA2MTQgMjAzLjY1NDhsLTM4LjY0LTExOC45MjFoLTU0LjE1M2w5Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTIuMjY4NSA4NC43MzQxbC0xMS43NDIgMzYuMTM5Yy0xLjA3MSAzLjI5Ni4xMDIgNi45MDcgMi45MDYgOC45NDRsMTAxLjYyOSA3My44MzgtOTIuNzkzLTExOC45MjF6IiBmaWxsPSIjZmNhMzI2Ii8+CiAgPHBhdGggZD0iTTEyLjI2ODUgODQuNzM0Mmg1NC4xNTNsLTIzLjI3My03MS42MjVjLTEuMTk3LTMuNjg2LTYuNDExLTMuNjg1LTcuNjA4IDBsLTIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+CiAgPHBhdGggZD0iTTEwNS4wNjE0IDIwMy42NTQ4bDM4LjY0LTExOC45MjFoNTQuMTUzbC05Mi43OTMgMTE4LjkyMXoiIGZpbGw9IiNmYzZkMjYiLz4KICA8cGF0aCBkPSJNMTk3Ljg1NDQgODQuNzM0MWwxMS43NDIgMzYuMTM5YzEuMDcxIDMuMjk2LS4xMDIgNi45MDctMi45MDYgOC45NDRsLTEwMS42MjkgNzMuODM4IDkyLjc5My0xMTguOTIxeiIgZmlsbD0iI2ZjYTMyNiIvPgogIDxwYXRoIGQ9Ik0xOTcuODU0NCA4NC43MzQyaC01NC4xNTNsMjMuMjczLTcxLjYyNWMxLjE5Ny0zLjY4NiA2LjQxMS0zLjY4NSA3LjYwOCAwbDIzLjI3MiA3MS42MjV6IiBmaWxsPSIjZTI0MzI5Ii8+Cjwvc3ZnPgo=" /><br />
      Deploy in progress
    </h1>
-    <h3>Please try again in a few minutes.</h3>
+    <div class="container">
-    <hr/>
+      <h3>Please try again in a few minutes.</h3>
-    <p>Please contact your GitLab administrator if this problem persists.</p>
+      <hr/>
+      <p>Please contact your GitLab administrator if this problem persists.</p>
+    </div>
  </body>
 </html>