From a3230bfc936a3b688b8117b7469d72d220126912 Mon Sep 17 00:00:00 2001
From: William Belle <william.belle@gmail.com>
Date: Thu, 27 Jun 2024 12:31:26 +0200
Subject: [PATCH] Update 404 pages with "new" design (#189)

Close: #187
---
 grunt/cssmin.js        |  3 +--
 src/css/errors.css     | 31 -------------------------------
 src/errors/404-de.html | 29 +++++++++++++++++------------
 src/errors/404-en.html | 29 +++++++++++++++++------------
 src/errors/404-fr.html | 29 +++++++++++++++++------------
 5 files changed, 52 insertions(+), 69 deletions(-)
 delete mode 100644 src/css/errors.css

diff --git a/grunt/cssmin.js b/grunt/cssmin.js
index e09e910..246736a 100644
--- a/grunt/cssmin.js
+++ b/grunt/cssmin.js
@@ -18,8 +18,7 @@ module.exports = {
       'dist/css/elements.min.css': [
         'node_modules/epfl-elements/dist/css/vendors.css',
         'node_modules/epfl-elements/dist/css/elements.css',
-        'tmp/css/fonts.css',
-        'src/css/errors.css'
+        'tmp/css/fonts.css'
       ]
     }
   }
diff --git a/src/css/errors.css b/src/css/errors.css
deleted file mode 100644
index 862f0ad..0000000
--- a/src/css/errors.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * (c) ECOLE POLYTECHNIQUE FEDERALE DE LAUSANNE, Switzerland, 2020-2021.
- */
-
-.http-status-code {
-  font-size: 5rem;
-}
-
-@media (min-width: 576px) {
-  .http-status-code {
-    font-size: 6rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .http-status-code {
-    font-size: 8rem;
-  }
-}
-
-@media (min-width: 992px) {
-  .http-status-code {
-    font-size: 10rem;
-  }
-}
-
-@media (min-width: 1200px) {
-  .http-status-code {
-    font-size: 12rem;
-  }
-}
diff --git a/src/errors/404-de.html b/src/errors/404-de.html
index d9b7cd4..8d20def 100644
--- a/src/errors/404-de.html
+++ b/src/errors/404-de.html
@@ -34,19 +34,24 @@
 
     <div class="main-container">
       <div class="w-100 pb-5">
-        <main id="main" class="content container">
-          <h1 class="mb-3 text-center text-primary http-status-code">404</h1>
-          <h2 class="mb-5 text-center">Hoppla! Die Seite kann nicht gefunden werden.</h2>
-          <div class="mb-5">
-            <p>Unter dieser Adresse wurde scheinbar nichts gefunden. Versuchen Sie es mit einer Suche:</p>
-            <form action="https://search.epfl.ch/" class="border-0 p-0">
-              <div class="search-form input-group">
-                <label for="search" class="sr-only">Suche</label>
-                <input id="search" type="text" class="form-control" name="q" placeholder="Im Web der EPFL suchen">
-                <button type="submit" class="d-xl-block btn btn-primary input-group-append">Bestätigen</button>
+        <main id="main" class="content">
+          <section class="error-404 not-found">
+            <div class="page-content container">
+              <p class="h1 mt-4 error-title">404</p>
+              <h1 class="h3 text-center">
+                Hoppla! Die Seite kann nicht gefunden werden.
+              </h1>
+              <div class="mt-5 pt-2">
+                <form action="https://search.epfl.ch/" class="border-0 p-0">
+                  <div class="search-form mt-1 input-group">
+                    <label for="search" class="sr-only">Suche</label>
+                    <input type="text" class="form-control" name="search" placeholder="Im Web der EPFL suchen">
+                    <button type="submit" class="d-none d-sm-block btn btn-primary input-group-append">Bestätigen</button>
+                  </div>
+                </form>
               </div>
-            </form>
-          </div>
+            </div>
+          </section>
         </main>
       </div>
     </div>
diff --git a/src/errors/404-en.html b/src/errors/404-en.html
index fc59654..2d1c0a4 100644
--- a/src/errors/404-en.html
+++ b/src/errors/404-en.html
@@ -34,19 +34,24 @@
 
     <div class="main-container">
       <div class="w-100 pb-5">
-        <main id="main" class="content container">
-          <h1 class="mb-3 text-center text-primary http-status-code">404</h1>
-          <h2 class="mb-5 text-center">Oops! That page can't be found.</h2>
-          <div class="mb-5">
-            <p>It looks like nothing was found at this location. You might try with a search:</p>
-            <form action="https://search.epfl.ch/" class="border-0 p-0">
-              <div class="search-form input-group">
-                <label for="search" class="sr-only">Search</label>
-                <input id="search" type="text" class="form-control" name="q" placeholder="Search in the EPFL Web">
-                <button type="submit" class="d-xl-block btn btn-primary input-group-append">Validate</button>
+        <main id="main" class="content">
+          <section class="error-404 not-found">
+            <div class="page-content container">
+              <p class="h1 mt-4 error-title">404</p>
+              <h1 class="h3 text-center">
+                Oops! That page can't be found.
+              </h1>
+              <div class="mt-5 pt-2">
+                <form action="https://search.epfl.ch/" class="border-0 p-0">
+                  <div class="search-form mt-1 input-group">
+                    <label for="search" class="sr-only">Search</label>
+                    <input type="text" class="form-control" name="search" placeholder="Search in the EPFL Web">
+                    <button type="submit" class="d-none d-sm-block btn btn-primary input-group-append">Validate</button>
+                  </div>
+                </form>
               </div>
-            </form>
-          </div>
+            </div>
+          </section>
         </main>
       </div>
     </div>
diff --git a/src/errors/404-fr.html b/src/errors/404-fr.html
index 913670f..b3e443a 100644
--- a/src/errors/404-fr.html
+++ b/src/errors/404-fr.html
@@ -34,19 +34,24 @@
 
     <div class="main-container">
       <div class="w-100 pb-5">
-        <main id="main" class="content container">
-          <h1 class="mb-3 text-center text-primary http-status-code">404</h1>
-          <h2 class="mb-5 text-center">Oops ! Cette page est introuvable.</h2>
-          <div class="mb-5">
-            <p>On dirait que cette adresse n'existe pas sur le site. Essayez avec une recherche :</p>
-            <form action="https://search.epfl.ch/" class="border-0 p-0">
-              <div class="search-form input-group">
-                <label for="search" class="sr-only">Recherche</label>
-                <input id="search" type="text" class="form-control" name="q" placeholder="Rechercher sur le Web de l'EPFL">
-                <button type="submit" class="d-xl-block btn btn-primary input-group-append">Valider</button>
+        <main id="main" class="content">
+          <section class="error-404 not-found">
+            <div class="page-content container">
+              <p class="h1 mt-4 error-title">404</p>
+              <h1 class="h3 text-center">
+                Oops ! Cette page est introuvable.
+              </h1>
+              <div class="mt-5 pt-2">
+                <form action="https://search.epfl.ch/" class="border-0 p-0">
+                  <div class="search-form mt-1 input-group">
+                    <label for="search" class="sr-only">Recherche</label>
+                    <input type="text" class="form-control" name="search" placeholder="Rechercher sur le Web de l'EPFL">
+                    <button type="submit" class="d-none d-sm-block btn btn-primary input-group-append">Valider</button>
+                  </div>
+                </form>
               </div>
-            </form>
-          </div>
+            </div>
+          </section>
         </main>
       </div>
     </div>