Merge branch 'master' into release

Add some responsive fix and a 404 error page.

.idea/workspace.xml

@@ -3,7 +3,10 @@
   <component name="ChangeListManager">
     <list default="true" id="458baa9a-0ac3-475e-8174-3ab8ea444385" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+<<<<<<< HEAD
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+=======
+>>>>>>> master
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -19,8 +22,13 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projects.html">
           <provider selected="true" editor-type-id="text-editor">
+<<<<<<< HEAD
             <state relative-caret-position="12">
               <caret line="233" column="22" selection-start-line="233" selection-start-column="22" selection-end-line="233" selection-end-column="22" />
+=======
+            <state relative-caret-position="570">
+              <caret line="148" column="25" selection-start-line="148" selection-start-column="25" selection-end-line="148" selection-end-column="25" />
+>>>>>>> master
             </state>
           </provider>
         </entry>
@@ -35,10 +43,10 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/contact.html">
+        <entry file="file://$PROJECT_DIR$/css/custom/main.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="399">
-              <caret line="36" column="17" lean-forward="true" selection-start-line="36" selection-start-column="17" selection-end-line="36" selection-end-column="17" />
+            <state relative-caret-position="285">
+              <caret line="15" column="1" selection-start-line="15" selection-start-column="1" selection-end-line="15" selection-end-column="1" />
             </state>
           </provider>
         </entry>
@@ -46,35 +54,53 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projets/pro_ascii_space.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="221">
-              <caret line="502" column="9" lean-forward="true" selection-start-line="502" selection-start-column="9" selection-end-line="516" selection-end-column="10" />
+            <state relative-caret-position="468">
+              <caret line="359" column="16" lean-forward="true" selection-start-line="359" selection-start-column="16" selection-end-line="359" selection-end-column="16" />
             </state>
           </provider>
         </entry>
       </file>
+<<<<<<< HEAD
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="544">
               <caret line="91" column="75" lean-forward="true" selection-start-line="91" selection-start-column="75" selection-end-line="91" selection-end-column="75" />
+=======
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/cv.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="171">
+              <caret line="24" column="33" lean-forward="true" selection-start-line="24" selection-start-column="33" selection-end-line="28" selection-end-column="20" />
+>>>>>>> master
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/cv.html">
+        <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
+<<<<<<< HEAD
             <state relative-caret-position="430">
               <caret line="405" column="4" lean-forward="true" selection-start-line="405" selection-start-column="4" selection-end-line="412" selection-end-column="10" />
+=======
+            <state relative-caret-position="316">
+              <caret line="75" column="29" selection-end-line="98" selection-end-column="7" />
+>>>>>>> master
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/error404.html">
           <provider selected="true" editor-type-id="text-editor">
+<<<<<<< HEAD
             <state relative-caret-position="399">
               <caret line="78" column="10" lean-forward="true" selection-start-line="78" selection-start-column="10" selection-end-line="78" selection-end-column="10" />
+=======
+            <state relative-caret-position="658">
+              <caret line="85" column="10" selection-start-line="85" selection-start-column="10" selection-end-line="85" selection-end-column="10" />
+>>>>>>> master
             </state>
           </provider>
         </entry>
@@ -82,8 +108,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projets/pro_quoridor.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="259">
-              <caret line="77" column="10" lean-forward="true" selection-start-line="77" selection-start-column="10" selection-end-line="89" selection-end-column="10" />
+            <state relative-caret-position="1463">
+              <caret line="77" column="10" selection-start-line="77" selection-start-column="10" selection-end-line="89" selection-end-column="10" />
             </state>
           </provider>
         </entry>
@@ -91,7 +117,7 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projets/pro_pulsar.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="701">
+            <state relative-caret-position="1672">
               <caret line="88" column="10" selection-start-line="88" selection-start-column="10" selection-end-line="88" selection-end-column="10" />
             </state>
           </provider>
@@ -100,8 +126,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="336">
-              <caret line="4608" column="15" selection-start-line="4608" selection-start-column="3" selection-end-line="4608" selection-end-column="15" />
+            <state relative-caret-position="279">
+              <caret line="4886" selection-start-line="4886" selection-end-line="4890" selection-end-column="1" />
             </state>
           </provider>
         </entry>
@@ -132,6 +158,7 @@
       <find>cursor</find>
       <find>col-4</find>
       <find>card-columns</find>
+      <find>media</find>
     </findStrings>
     <replaceStrings>
       <replace>class=&quot;col-9&quot;</replace>
@@ -149,15 +176,24 @@
       <list>
         <option value="$PROJECT_DIR$/home.html" />
         <option value="$PROJECT_DIR$/cv.html" />
+<<<<<<< HEAD
         <option value="$PROJECT_DIR$/css/custom/main.css" />
+=======
+>>>>>>> master
         <option value="$PROJECT_DIR$/css/custom/pagination.css" />
         <option value="$PROJECT_DIR$/projets/pro_static_site.html" />
         <option value="$PROJECT_DIR$/contact.html" />
-        <option value="$PROJECT_DIR$/projets/pro_ascii_space.html" />
         <option value="$PROJECT_DIR$/projets/pro_quoridor.html" />
         <option value="$PROJECT_DIR$/projets/pro_pulsar.html" />
         <option value="$PROJECT_DIR$/projects.html" />
+<<<<<<< HEAD
+        <option value="$PROJECT_DIR$/index.html" />
+=======
+        <option value="$PROJECT_DIR$/css/custom/main.css" />
+        <option value="$PROJECT_DIR$/projets/pro_ascii_space.html" />
         <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/error404.html" />
+>>>>>>> master
       </list>
     </option>
   </component>
@@ -247,7 +283,11 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
+<<<<<<< HEAD
     <option name="totallyTimeSpent" value="53043000" />
+=======
+    <option name="totallyTimeSpent" value="55324000" />
+>>>>>>> master
   </component>
   <component name="ToolWindowManager">
     <frame x="-3" y="28" width="1926" height="1055" extended-state="6" />
@@ -278,20 +318,21 @@
   <component name="editorHistoryManager">
     <entry file="file://$PROJECT_DIR$/html/home.html" />
     <entry file="file://$PROJECT_DIR$/home.html" />
-    <entry file="file://$PROJECT_DIR$/css/custom/main.css">
+    <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="266">
-          <caret line="14" column="30" selection-start-line="14" selection-start-column="23" selection-end-line="14" selection-end-column="30" />
+        <state relative-caret-position="1482">
+          <caret line="78" column="10" lean-forward="true" selection-start-line="78" selection-start-column="10" selection-end-line="78" selection-end-column="10" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/css/custom/pagination.css">
+    <entry file="file://$PROJECT_DIR$/contact.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="684">
-          <caret line="36" column="33" selection-start-line="36" selection-start-column="33" selection-end-line="36" selection-end-column="33" />
+          <caret line="36" column="17" lean-forward="true" selection-start-line="36" selection-start-column="17" selection-end-line="36" selection-end-column="17" />
         </state>
       </provider>
     </entry>
+<<<<<<< HEAD
     <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="336">
@@ -303,11 +344,39 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="399">
           <caret line="36" column="17" lean-forward="true" selection-start-line="36" selection-start-column="17" selection-end-line="36" selection-end-column="17" />
+=======
+    <entry file="file://$PROJECT_DIR$/projets/pro_quoridor.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1463">
+          <caret line="77" column="10" selection-start-line="77" selection-start-column="10" selection-end-line="89" selection-end-column="10" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/projets/pro_pulsar.html">
       <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1672">
+          <caret line="88" column="10" selection-start-line="88" selection-start-column="10" selection-end-line="88" selection-end-column="10" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/projects.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="570">
+          <caret line="148" column="25" selection-start-line="148" selection-start-column="25" selection-end-line="148" selection-end-column="25" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/custom/pagination.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="684">
+          <caret line="36" column="33" selection-start-line="36" selection-start-column="33" selection-end-line="36" selection-end-column="33" />
+>>>>>>> master
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/projets/pro_pulsar.html">
+      <provider selected="true" editor-type-id="text-editor">
+<<<<<<< HEAD
         <state relative-caret-position="701">
           <caret line="88" column="10" selection-start-line="88" selection-start-column="10" selection-end-line="88" selection-end-column="10" />
         </state>
@@ -317,34 +386,62 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="259">
           <caret line="77" column="10" lean-forward="true" selection-start-line="77" selection-start-column="10" selection-end-line="89" selection-end-column="10" />
+=======
+        <state relative-caret-position="279">
+          <caret line="4886" selection-start-line="4886" selection-end-line="4890" selection-end-column="1" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/custom/main.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="285">
+          <caret line="15" column="1" selection-start-line="15" selection-start-column="1" selection-end-line="15" selection-end-column="1" />
+>>>>>>> master
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/projets/pro_ascii_space.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="221">
-          <caret line="502" column="9" lean-forward="true" selection-start-line="502" selection-start-column="9" selection-end-line="516" selection-end-column="10" />
+        <state relative-caret-position="468">
+          <caret line="359" column="16" lean-forward="true" selection-start-line="359" selection-start-column="16" selection-end-line="359" selection-end-column="16" />
         </state>
       </provider>
     </entry>
+<<<<<<< HEAD
     <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="399">
           <caret line="78" column="10" lean-forward="true" selection-start-line="78" selection-start-column="10" selection-end-line="78" selection-end-column="10" />
+=======
+    <entry file="file://$PROJECT_DIR$/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="316">
+          <caret line="75" column="29" selection-end-line="98" selection-end-column="7" />
+>>>>>>> master
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/cv.html">
       <provider selected="true" editor-type-id="text-editor">
+<<<<<<< HEAD
         <state relative-caret-position="430">
           <caret line="405" column="4" lean-forward="true" selection-start-line="405" selection-start-column="4" selection-end-line="412" selection-end-column="10" />
+=======
+        <state relative-caret-position="171">
+          <caret line="24" column="33" lean-forward="true" selection-start-line="24" selection-start-column="33" selection-end-line="28" selection-end-column="20" />
+>>>>>>> master
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/projects.html">
+    <entry file="file://$PROJECT_DIR$/error404.html">
       <provider selected="true" editor-type-id="text-editor">
+<<<<<<< HEAD
         <state relative-caret-position="12">
           <caret line="233" column="22" selection-start-line="233" selection-start-column="22" selection-end-line="233" selection-end-column="22" />
+=======
+        <state relative-caret-position="658">
+          <caret line="85" column="10" selection-start-line="85" selection-start-column="10" selection-end-line="85" selection-end-column="10" />
+>>>>>>> master
         </state>
       </provider>
     </entry>

css/custom/main.css

@@ -3,63 +3,77 @@ body {
     padding-top: 5rem;
     background-color: rgb(230, 255, 230);
 }
+
 .focus-center {
     padding: 3rem 1.5rem;
     text-align: center;
 }
 
-h1 {
-    font-size: 5em;
+@media (min-width: 576px) {
+    h1 {
+        font-size: 5em;
+    }
 }
+
 h3 {
     border-bottom: 4px #28a745 solid;
 }
+
 h4 {
     color: #0b2e13;
 }
 
 /* Navigation bar bigger title */
-.navbar-brand {
-    font-size: 2em;
+@media (min-width: 576px) {
+    .navbar-brand {
+        font-size: 2em;
+    }
 }
 
 /* Dropdown acive color */
 .dropdown-item.active {
-  background-color: #28a745;
-  border-color: #28a745;
+    background-color: #28a745;
+    border-color: #28a745;
 }
+
 .dropdown-item:active {
-  background-color: rgb(70, 197, 99);
-  border-color: rgb(40, 167, 69);
+    background-color: rgb(70, 197, 99);
+    border-color: rgb(40, 167, 69);
 }
 
 /* Expand button */
 @keyframes pop-menu-anim {
-    from {background-color: rgb(230, 255, 230);
-        transform: rotate(90deg);}
-    to {background-color: #eee;
-        transform: rotate(0deg);}
+    from {
+        background-color: rgb(230, 255, 230);
+        transform: rotate(90deg);
+    }
+    to {
+        background-color: #eee;
+        transform: rotate(0deg);
+    }
 }
 
 .jovian-toggler {
     background-color: rgb(230, 255, 230);
     transform: rotate(90deg);
 }
+
 .jovian-toggler:hover {
     background-color: #eee;
     transform: rotate(0deg);
     animation-name: pop-menu-anim;
     animation-duration: 0.4s;
 }
+
 .jovian-toggler:active {
     background-color: #fff;
     transform: rotate(0deg);
 }
 
 @media (min-width: 768px) {
-  .navbar-expand-md .jovian-toggler {
-    display: none;
-  }
+    .navbar-expand-md .jovian-toggler {
+        display: none;
+    }
 }
 
 /* CV */

error404.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Page description -->
+    <meta name="description" content="The official website of Jovian Hersemeule.">
+    <meta name="author" content="Jovian Hersemeule">
+
+    <!-- Style sheet -->
+    <link href="css/bootstrap.css" rel="stylesheet">
+    <link href="css/custom/main.css" rel="stylesheet">
+
+    <title>404 - Jovian Hersemeule</title>
+</head>
+<body>
+
+<!-- Navbar -->
+<nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
+    <a class="navbar-brand" href="index.html">Jovian Hersemeule</a>
+    <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav"
+         aria-controls="joviaNav"
+         aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png"
+         alt="V">
+    <div class="collapse navbar-collapse" id="joviaNav">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">
+                    <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
+                    Accueil
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="cv.html">
+                    <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
+                    CV
+                </a>
+            </li>
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="projects.html" id="dropdown01" data-toggle="dropdown"
+                   aria-haspopup="true" aria-expanded="false">
+                    <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
+                    Projets
+                </a>
+                <div class="dropdown-menu" aria-labelledby="dropdown01">
+                    <a class="dropdown-item" href="projects.html">Liste des projets</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="projets/pro_static_site.html">
+                        Jovian Website
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_ascii_space.html">
+                        ASCII Space Destroyer
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_pulsar.html">
+                        Pulsar
+                    </a>
+                    <a class="dropdown-item" href="projets/pro_quoridor.html">
+                        Quoridor
+                    </a>
+                </div>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="contact.html">
+                    <img src="https://img.icons8.com/color/48/000000/secured-letter.png" alt="|">
+                    Contact
+                </a>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+<!-- Content -->
+<main role="main" class="container">
+
+    <div class="focus-center">
+        <h1>404</h1>
+        <img src="https://img.icons8.com/color/96/000000/matrix-desktop.png" alt="home flat icon">
+        <h2>Page non trouvée</h2>
+        <p class="lead">La page à laquelle votre navigateur souhaite accéder n'existe pas. Il est possible que j'ai fait
+            une erreur lors du développement de mon site. N'hésitez pas à revenir plus tard ...</p>
+    </div>
+</main>
+
+<!-- Scripts -->
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+        crossorigin="anonymous"></script>
+<script src="js/bootstrap.js"></script>
+</body>
+</html>

index.html

@@ -7,6 +7,7 @@
     <!-- Page description -->
     <meta name="description" content="The official website of Jovian Hersemeule.">
     <meta name="author" content="Jovian Hersemeule">
+    <meta property="og:image" content="images/home_picture_v1.jpg">
 
     <!-- Style sheet -->
     <link href="css/bootstrap.css" rel="stylesheet">

projects.html

@@ -91,7 +91,7 @@
         Présentation
     </h3>
     <p>
-        Chaque encard présente le résumé d'un projet. Si vous cliquez sur <code>Voir la page du projet</code>, vous
+        Chaque encart présente le résumé d'un projet. Si vous cliquez sur <code>Voir la page du projet</code>, vous
         arrivez directement sur sa page descriptive complète.
     </p>
     <p>
@@ -146,7 +146,7 @@
     </p>
     <p>
         Ainsi, vous, cher visiteur, avez peut-être plus de temps que moi. Si un projet vous intéresse, n'hésitez pas à
-        vous l'appropriez !
+        vous l'approprier !
     </p>
     <p>
         Toi, cher programmeur, tu peux récupérer le code depuis GitHub et me proposer des améliorations.

projets/pro_ascii_space.html

@@ -354,96 +354,98 @@
     <p>
         Voici le résumé de tous les équipements fonctionnels disponibles pour construire votre vaisseau.
     </p>
-    <table class="table">
-        <thead>
-        <tr>
-            <th>Nom</th>
-            <th>Symbole</th>
-            <th>Projectile</th>
-            <th>Catégorie</th>
-            <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-            <td>Cockpit</td>
-            <td><code>m</code></td>
-            <td></td>
-            <td>Structure</td>
-            <td>1</td>
-        </tr>
-        <tr>
-            <td>Bloc</td>
-            <td title="N'importe quel caractère ASCII">ASCII</td>
-            <td></td>
-            <td>Structure</td>
-            <td>1</td>
-        </tr>
-        <tr>
-            <td>Gun</td>
-            <td><code>[-</code></td>
-            <td><code>+</code></td>
-            <td>Arme</td>
-            <td>20</td>
-        </tr>
-        <tr>
-            <td>Cutter</td>
-            <td><code>[|</code></td>
-            <td><code>|</code></td>
-            <td>Arme</td>
-            <td>22</td>
-        </tr>
-        <tr>
-            <td>Disper</td>
-            <td><code>[<</code></td>
-            <td><code>*</code></td>
-            <td>Arme</td>
-            <td>24</td>
-        </tr>
-        <tr>
-            <td>Protoseeker</td>
-            <td><code>[O</code></td>
-            <td><code>O</code></td>
-            <td>Arme</td>
-            <td>22</td>
-        </tr>
-        <tr>
-            <td>Missile launcher</td>
-            <td><code>[></code></td>
-            <td><code>-></code></td>
-            <td>Arme</td>
-            <td>70</td>
-        </tr>
-        <tr>
-            <td>Brexit launcher</td>
-            <td><code>[{</code></td>
-            <td><code>X</code></td>
-            <td>Arme</td>
-            <td>27</td>
-        </tr>
-        <tr>
-            <td>Hecto combustion</td>
-            <td><code>[~</code></td>
-            <td><code>H</code></td>
-            <td>Arme</td>
-            <td>56</td>
-        </tr>
-        <tr>
-            <td>Sniper rifle</td>
-            <td><code>[=</code></td>
-            <td><code>=</code></td>
-            <td>Arme</td>
-            <td>50</td>
-        </tr>
-        <tr>
-            <td>Bouclier</td>
-            <td><code>()</code></td>
-            <td></td>
-            <td>Défense</td>
-            <td>30</td>
-        </tr>
-        </tbody>
-    </table>
+    <div class="table-responsive">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Nom</th>
+                <th>Symbole</th>
+                <th>Projectile</th>
+                <th>Catégorie</th>
+                <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>Cockpit</td>
+                <td><code>m</code></td>
+                <td></td>
+                <td>Structure</td>
+                <td>1</td>
+            </tr>
+            <tr>
+                <td>Bloc</td>
+                <td title="N'importe quel caractère ASCII">ASCII</td>
+                <td></td>
+                <td>Structure</td>
+                <td>1</td>
+            </tr>
+            <tr>
+                <td>Gun</td>
+                <td><code>[-</code></td>
+                <td><code>+</code></td>
+                <td>Arme</td>
+                <td>20</td>
+            </tr>
+            <tr>
+                <td>Cutter</td>
+                <td><code>[|</code></td>
+                <td><code>|</code></td>
+                <td>Arme</td>
+                <td>22</td>
+            </tr>
+            <tr>
+                <td>Disper</td>
+                <td><code>[<</code></td>
+                <td><code>*</code></td>
+                <td>Arme</td>
+                <td>24</td>
+            </tr>
+            <tr>
+                <td>Protoseeker</td>
+                <td><code>[O</code></td>
+                <td><code>O</code></td>
+                <td>Arme</td>
+                <td>22</td>
+            </tr>
+            <tr>
+                <td>Missile launcher</td>
+                <td><code>[></code></td>
+                <td><code>-></code></td>
+                <td>Arme</td>
+                <td>70</td>
+            </tr>
+            <tr>
+                <td>Brexit launcher</td>
+                <td><code>[{</code></td>
+                <td><code>X</code></td>
+                <td>Arme</td>
+                <td>27</td>
+            </tr>
+            <tr>
+                <td>Hecto combustion</td>
+                <td><code>[~</code></td>
+                <td><code>H</code></td>
+                <td>Arme</td>
+                <td>56</td>
+            </tr>
+            <tr>
+                <td>Sniper rifle</td>
+                <td><code>[=</code></td>
+                <td><code>=</code></td>
+                <td>Arme</td>
+                <td>50</td>
+            </tr>
+            <tr>
+                <td>Bouclier</td>
+                <td><code>()</code></td>
+                <td></td>
+                <td>Défense</td>
+                <td>30</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
 
     <h3>
         Technologies