Smartphone responsive problems :

> Navbar brand reduced
> Lead title reduced
> Table became responsive

.idea/workspace.xml

@@ -2,10 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="458baa9a-0ac3-475e-8174-3ab8ea444385" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/projects.html" beforeDir="false" afterPath="$PROJECT_DIR$/projects.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/custom/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/custom/main.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/projets/pro_ascii_space.html" beforeDir="false" afterPath="$PROJECT_DIR$/projets/pro_ascii_space.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/projets/pro_pulsar.html" beforeDir="false" afterPath="$PROJECT_DIR$/projets/pro_pulsar.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/projets/pro_quoridor.html" beforeDir="false" afterPath="$PROJECT_DIR$/projets/pro_quoridor.html" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -18,11 +16,11 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projects.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="316">
-              <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" />
             </state>
           </provider>
         </entry>
@@ -37,37 +35,37 @@
         </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>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/projets/pro_ascii_space.html">
+        <entry file="file://$PROJECT_DIR$/contact.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="684">
+              <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>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/index.html">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/projets/pro_ascii_space.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1121">
-              <caret line="59" column="17" lean-forward="true" selection-start-line="59" selection-start-column="17" selection-end-line="59" selection-end-column="17" />
+            <state relative-caret-position="2140">
+              <caret line="447" column="10" selection-start-line="447" selection-start-column="10" selection-end-line="447" selection-end-column="10" />
             </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">
-            <state relative-caret-position="4085">
-              <caret line="215" column="8" selection-start-line="215" selection-start-column="8" selection-end-line="215" selection-end-column="40" />
+            <state relative-caret-position="-558">
+              <caret line="29" column="27" lean-forward="true" selection-start-line="29" selection-start-column="27" selection-end-line="29" selection-end-column="27" />
             </state>
           </provider>
         </entry>
@@ -75,8 +73,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1520">
-              <caret line="80" column="20" selection-start-line="80" selection-start-column="20" selection-end-line="89" selection-end-column="8" />
+            <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>
@@ -84,8 +82,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>
@@ -93,7 +91,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>
@@ -102,8 +100,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>
@@ -134,6 +132,7 @@
       <find>cursor</find>
       <find>col-4</find>
       <find>card-columns</find>
+      <find>media</find>
     </findStrings>
     <replaceStrings>
       <replace>class=&quot;col-9&quot;</replace>
@@ -152,14 +151,14 @@
         <option value="$PROJECT_DIR$/home.html" />
         <option value="$PROJECT_DIR$/cv.html" />
         <option value="$PROJECT_DIR$/index.html" />
-        <option value="$PROJECT_DIR$/css/custom/main.css" />
         <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" />
+        <option value="$PROJECT_DIR$/css/custom/main.css" />
+        <option value="$PROJECT_DIR$/projets/pro_ascii_space.html" />
       </list>
     </option>
   </component>
@@ -249,7 +248,7 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="51991000" />
+    <option name="totallyTimeSpent" value="52803000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-3" y="28" width="1926" height="1055" extended-state="6" />
@@ -280,80 +279,80 @@
   <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$/cv.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="7695">
+          <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>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/css/custom/pagination.css">
+    <entry file="file://$PROJECT_DIR$/projets/pro_static_site.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" />
+        <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$/cv.html">
+    <entry file="file://$PROJECT_DIR$/contact.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="4085">
-          <caret line="215" column="8" selection-start-line="215" selection-start-column="8" selection-end-line="215" selection-end-column="40" />
+        <state relative-caret-position="684">
+          <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>
-    <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
+    <entry file="file://$PROJECT_DIR$/projets/pro_quoridor.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1520">
-          <caret line="80" column="20" selection-start-line="80" selection-start-column="20" selection-end-line="89" selection-end-column="8" />
+        <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$/index.html">
+    <entry file="file://$PROJECT_DIR$/projets/pro_pulsar.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1121">
-          <caret line="59" column="17" lean-forward="true" selection-start-line="59" selection-start-column="17" selection-end-line="59" selection-end-column="17" />
+        <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$/css/bootstrap.css">
+    <entry file="file://$PROJECT_DIR$/projects.html">
       <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="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$/contact.html">
+    <entry file="file://$PROJECT_DIR$/css/custom/pagination.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="684">
+          <caret line="36" column="33" selection-start-line="36" selection-start-column="33" selection-end-line="36" selection-end-column="33" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/projets/pro_ascii_space.html">
+    <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
       <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="279">
+          <caret line="4886" selection-start-line="4886" selection-end-line="4890" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/projets/pro_quoridor.html">
+    <entry file="file://$PROJECT_DIR$/index.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="-558">
+          <caret line="29" column="27" lean-forward="true" selection-start-line="29" selection-start-column="27" selection-end-line="29" selection-end-column="27" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/projets/pro_pulsar.html">
+    <entry file="file://$PROJECT_DIR$/css/custom/main.css">
       <provider selected="true" editor-type-id="text-editor">
-        <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 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>
-    <entry file="file://$PROJECT_DIR$/projects.html">
+    <entry file="file://$PROJECT_DIR$/projets/pro_ascii_space.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="316">
-          <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="2140">
+          <caret line="447" column="10" selection-start-line="447" selection-start-column="10" selection-end-line="447" selection-end-column="10" />
         </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 */

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