fix wrong error number in page title

.gitattributes

@@ -50,5 +50,8 @@
 # Exclude files from exporting
 #
 
-.gitattributes export-ignore
-.gitignore     export-ignore
+.gitattributes  export-ignore
+.gitignore      export-ignore
+.vscode         export-ignore
+screenshots     export-ignore
+

LICENSE

@@ -1,20 +1,21 @@
-LICENSE
+MIT License
 
-You are hereby granted permission to use these files for any and all purposes
-you see fit.  You are permitted to alter the contents of this archive in any way
-you wish so long as the attributions included in the image files remain intact
-and readable.
+Copyright (c) 2020 Asif Bacchus
 
-The author of these pages is NOT the author/creator of the 'monster' artwork.
-While every effort has been made to ensure the images included on these pages
-may be freely used, they are the intellectual property of another person. Use of
-these images must be discontinued upon the request of their creator/owner.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-THE HTML PAGES AND ASSOCIATED FILES ("PAGES") PROVIDED IN THIS
-REPOSITORY/ARCHIVE ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE PAGES OR THE USE OR OTHER DEALINGS IN THE
-PAGES.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -5,13 +5,19 @@ Here are some fun error pages to use instead of the usual boring ones.  I didn't
 Feel free to use these pages on your site and/or alter them however you see fit.  Enjoy.
 
 ## Contents <!-- omit in toc -->
-- [Getting the files](#Getting-the-files)
-- [Using the error pages (NGINX)](#Using-the-error-pages-NGINX)
-  - [Multiple sites](#Multiple-sites)
-  - [The pesky 'internal' directive](#The-pesky-internal-directive)
-- [Final words](#Final-words)
 
+- [Some screenshots](#some-screenshots)
+- [Getting the files](#getting-the-files)
+- [Using the error pages (NGINX)](#using-the-error-pages-nginx)
+  - [Multiple sites](#multiple-sites)
+  - [The pesky 'internal' directive](#the-pesky-internal-directive)
+- [Final words](#final-words)
 
+## Some screenshots
+
+![404 screenshot](screenshots/404.jpg "404 error page")
+
+![50x screenshot](screenshots/50x.jpg "50x error page")
 
 ## Getting the files
 
@@ -21,7 +27,10 @@ I'll assume you're using a linux server and provide examples of each command on
 
     ```bash
     cd ~
+    # clone from my server (most up-to-date)
     git clone https://git.asifbacchus.app/asif/fun-errorpages.git
+    # OR clone from github (usually the latest version)
+    git clone https://github.com/asifbacchus/fun-errorpages.git
     ```
 
 2. Switch to your webroot (I'm assuming NGINX).
@@ -45,19 +54,19 @@ I almost exclusively use NGINX, so I'll be assuming you do too in the following
 ```nginx
 # error pages
 error_page 400  /errorpages/400.html;
-error_page 401  /errorpages/400.html;
-error_page 403  /errorpages/400.html;
-error_page 404  /errorpages/400.html;
-error_page 500 502 503 504  /errorpages/400.html;
+error_page 401  /errorpages/401.html;
+error_page 403  /errorpages/403.html;
+error_page 404  /errorpages/404.html;
+error_page 500 502 503 504  /errorpages/50x.html;
 
-location ~ ^/errorpages {
+location ^~ /errorpages {
     root    /usr/share/nginx/html;
 }
 ```
 
 ### Multiple sites
 
-On many of my webservers, I run mulitple sites/services but would like to use the same fun error pages on each of them.  I could append the above to each server configuration file, or I could just use one file and *include* it in each configuration.  Let's run though that quickly:
+On many of my webservers, I run multiple sites/services but would like to use the same fun error pages on each of them.  I could append the above to each server configuration file, or I could just use one file and *include* it in each configuration.  Let's run though that quickly:
 
 1. Make a new file and call it something like *"errorpages.conf"*.  Save the file somewhere that makes sense, like your *NGINX configuration directory* (/etc/nginx/errorpages.conf).
 2. In your various server files, at the end of your *server* blocks, simply add the following:
@@ -73,7 +82,7 @@ Now NGINX will automatically insert the contents of that *'errorpages.conf* file
 Following the advice you see almost everywhere, you would expect our error blocks to be set up like this:
 
 ```nginx
-location ~ ^/errorpages {
+location ^~ /errorpages {
     root    /usr/share/nginx/html;
     internal;  # notice this directive!
 }

errorpages/400.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Error 404 - Bad Request</title>
+    <title>Error 400 - Bad Request</title>
     <link rel="stylesheet" href="/errorpages/styles.css">
 </head>
 <body>
@@ -15,7 +15,7 @@
     <p class="instructions">Please verify you have the right address and you are submitting all information correctly. If you came here from another page, there might be something wrong with the way that page is coded or you screwed up filling something out. (error 400)</p>
     <div class="spacer"></div>
     <footer>
-        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at https://git.asifbacchus.app/asif/fun-errorpages.git.  Monster image from Freepik (www.freepik.com).
+        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at <a href="https://git.asifbacchus.app/asif/fun-errorpages.git" alt="git repo" target="_blank">https://git.asifbacchus.app/asif/fun-errorpages.git</a>.  Monster image from <a href="https://www.freepik.com" alt="Freepik homepage" target="_blank">Freepik (www.freepik.com)</a>.
     </footer>
 </body>
 </html>

errorpages/401.html

@@ -15,7 +15,7 @@
     <p class="instructions">You're not authorized to view this content. You probably supplied the wrong credentials, please try again. (error 401)</p>
     <div class="spacer"></div>
     <footer>
-        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at https://git.asifbacchus.app/asif/fun-errorpages.git.  Monster image by Vectorpouch from Freepik (www.freepik.com).
+        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at <a href="https://git.asifbacchus.app/asif/fun-errorpages.git" alt="git repo" target="_blank">https://git.asifbacchus.app/asif/fun-errorpages.git</a>.  Monster image by Vectorpouch from <a href="https://www.freepik.com" alt="Freepik homepage" target="_blank">Freepik (www.freepik.com)</a>.
     </footer>
 </body>
 </html>

errorpages/403.html

@@ -15,7 +15,7 @@
     <p class="instructions">You're not authorized to view this content. This is NOT a credential error, you're just not allowed to be here. (error 403)</p>
     <div class="spacer"></div>
     <footer>
-        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at https://git.asifbacchus.app/asif/fun-errorpages.git.  Monster image by Vectorpouch from Freepik (www.freepik.com).
+        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at <a href="https://git.asifbacchus.app/asif/fun-errorpages.git" alt="git repo" target="_blank">https://git.asifbacchus.app/asif/fun-errorpages.git</a>.  Monster image by Vectorpouch from <a href="https://www.freepik.com" alt="Freepik homepage" target="_blank">Freepik (www.freepik.com)</a>.
     </footer>
 </body>
 </html>

errorpages/404.html

@@ -15,7 +15,7 @@
     <p class="instructions">Please make sure you typed the right address and try again. (error 404)</p>
     <div class="spacer"></div>
     <footer>
-        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at https://git.asifbacchus.app/asif/fun-errorpages.git.  Monster image from Freepik (www.freepik.com).
+        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at <a href="https://git.asifbacchus.app/asif/fun-errorpages.git" alt="git repo" target="_blank">https://git.asifbacchus.app/asif/fun-errorpages.git</a>.  Monster image from <a href="https://www.freepik.com" alt="Freepik homepage" target="_blank">Freepik (www.freepik.com)</a>.
     </footer>
 </body>
 </html>

errorpages/503_backup.html

@@ -16,7 +16,7 @@
     <p class="instructions">Sorry for the delay. Please try again soon. (error 503)</p>
     <div class="spacer"></div>
     <footer>
-        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at https://git.asifbacchus.app/asif/fun-errorpages.git.  Monster image from Freepik (www.freepik.com).
+        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at <a href="https://git.asifbacchus.app/asif/fun-errorpages.git" alt="git repo" target="_blank">https://git.asifbacchus.app/asif/fun-errorpages.git</a>.  Monster image from <a href="https://www.freepik.com" alt="Freepik homepage" target="_blank">Freepik (www.freepik.com)</a>.
     </footer>
 </body>
 </html>

errorpages/50x.html

@@ -15,7 +15,7 @@
     <p class="instructions">This is often a temporary condition.  Please try again later. (error 50x)</p>
     <div class="spacer"></div>
     <footer>
-        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at https://git.asifbacchus.app/asif/fun-errorpages.git.  Monster image from Freepik (www.freepik.com).
+        Page designed by Asif Bacchus.  Please feel free to use, redistribute and alter as you see fit!  Latest version available at <a href="https://git.asifbacchus.app/asif/fun-errorpages.git" alt="git repo" target="_blank">https://git.asifbacchus.app/asif/fun-errorpages.git</a>.  Monster image from <a href="https://www.freepik.com" alt="Freepik homepage" target="_blank">Freepik (www.freepik.com)</a>.
     </footer>
 </body>
 </html>

errorpages/styles.css

@@ -85,22 +85,58 @@ styles for this page
 --------------------
 */
 
+/* define our fonts */
+@font-face {
+	font-family: 'Open Sans Condensed';
+	font-weight: bold;
+	src: url(/errorpages/fonts/opensanscondensed-bold.ttf) format("truetype");
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-weight: normal;
+	src: url(/errorpages/fonts/opensans-regular.ttf) format("truetype");
+}
+
+/* define variables */
+:root {
+--color-bg: #323232;
+--color-text: #9D9B9B;
+--color-instructions: yellow;
+--font-header: 'Open Sans Condensed';
+--font-base: 'Open Sans';
+}
+
 body {
+	flex-direction: column;
+	font-family: var(--font-base), sans-serif;
     align-items: center;
-    background-color: #323232;
-    color: #9D9B9B;
+    background-color: var(--color-bg);
+    color: var(--color-text);
     display: flex;
-    flex-direction: column;
     padding: 2rem;
 }
 
+a {
+	color: var(--color-text);
+	font-family: inherit;
+	font-size: inherit;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
 h1 {
-    font-size: 7rem;
+	font-family: var(--font-header);
+	font-size: 7rem;
 }
 
 img {
     margin: 2rem 0;
-    max-height: 50vh;
+	max-height: 50vh;
+	max-width: 85vw;
 }
 
 p {
@@ -116,7 +152,7 @@ footer {
 
 
 .instructions {
-    color: yellow;
+    color: var(--color-instructions);
     font-weight: bold;
     text-shadow: 2px 2px 5px #000000;
 }