From da485bc289f6abfab35cfa7987a3e58a1d31b865 Mon Sep 17 00:00:00 2001
From: Antoine <antoine@2ec0b4.fr>
Date: Tue, 19 Jul 2016 18:05:48 +0200
Subject: [PATCH] Ajoute une page 404

---
 .htaccess     |  7 +++++++
 404.html      | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++
 css/style.css | 25 +++++++++++++++++++++---
 3 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 404.html
diff --git a/.htaccess b/.htaccess
index a6ec9f5..bf79fd7 100644
--- a/.htaccess
+++ b/.htaccess
@@ -165,3 +165,10 @@
 
   </IfModule>
 </FilesMatch>
+
+# ------------------------------------------------------------------------------
+# | Custom error messages / pages |
+# ------------------------------------------------------------------------------
+
+# lost & found
+ErrorDocument 404 /404.html
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..06dfe4d
--- /dev/null
+++ b/404.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr-fr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Quelques-unes des meilleures répliques sonores de Kaamelott. C'était ça ou chante Sloubi.">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+
+        <title>Kaamelott Soundboard</title>
+
+        <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
+        <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="/favicons/android-chrome-192x192.png" sizes="192x192">
+        <link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96">
+        <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
+        <link rel="manifest" href="/favicons/manifest.json">
+        <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
+        <link rel="shortcut icon" href="/favicons/favicon.ico">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
+        <meta name="msapplication-config" content="/favicons/browserconfig.xml">
+        <meta name="theme-color" content="#3f3552">
+
+        <link rel="stylesheet" href="/css/style.css" media="screen">
+    </head>
+    <body>
+        <div id="wrapper">
+            <header class="site-header" role="banner">
+                <h1>Kaamelott Soundboard</h1>
+            </header>
+
+            <main id="main" class="site-main" role="main">
+                <div id="error404">
+                    <div class="video-wrapper">
+                        <iframe width="420" height="315" src="https://www.youtube.com/embed/2eLNWtjxZK4?autoplay=1" frameborder="0" allowfullscreen></iframe>
+                    </div>
+
+                    <p>
+                        La page est introuvable, on sonne la retraite. RETRAITE !!!<br/>
+                        <a href="/">Retour à l'accueil</a>
+                    </p>
+                </div>
+            </main>
+        </div>
+    </body>
+</html>
diff --git a/css/style.css b/css/style.css
index a63e15f..1a9cf1c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -138,9 +138,6 @@ a:hover,a:active,a:focus {
 :-ms-input-placeholder {
     opacity:1;
 }
-td {
-    vertical-align: top;
-}
 /**
 * USEFUL CLASSES
 * -----------------------------------------------------------------------------
@@ -668,6 +665,28 @@ noscript p {
 .share-link .likely {
     margin-top: 5px;
 }
+.video-wrapper {
+    height: 0;
+    position: relative;
+	padding-bottom: 56.25%; /* 16:9 */
+	padding-top: 25px;
+}
+.video-wrapper iframe {
+	height: 100%;
+    left: 0;
+    max-height: 315px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+#error404 {
+    margin: 0 auto;
+    max-width: 400px;
+    text-align: center;
+}
+#error404 .video-wrapper {
+    margin-bottom: 20px;
+}
 /**
 * MEDIA QUERIES
 * -----------------------------------------------------------------------------
