Pagination customization finished.

>Borders
>Arrow colors
Titles
First test of links

.idea/workspace.xml

@@ -2,6 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="458baa9a-0ac3-475e-8174-3ab8ea444385" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/css/custom/pagination.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/custom/pagination.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/projets/pro_static_site.html" beforeDir="false" afterPath="$PROJECT_DIR$/projets/pro_static_site.html" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
@@ -45,17 +46,17 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/css/custom/main.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="57">
-              <caret line="3" column="40" selection-start-line="3" selection-start-column="22" selection-end-line="3" selection-end-column="40" />
+            <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>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/css/custom/pagination.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="76">
-              <caret line="4" column="39" selection-start-line="4" selection-start-column="39" selection-end-line="4" selection-end-column="39" />
+            <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>
@@ -78,11 +79,20 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="354">
-              <caret line="285" column="37" selection-start-line="285" selection-start-column="37" selection-end-line="285" selection-end-column="37" />
+            <state relative-caret-position="310">
+              <caret line="280" column="86" selection-start-line="280" selection-start-column="86" selection-end-line="280" selection-end-column="86" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <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="532">
+              <caret line="46" column="51" lean-forward="true" selection-start-line="46" selection-start-column="51" selection-end-line="46" selection-end-column="71" />
             </state>
           </provider>
         </entry>
@@ -140,8 +150,8 @@
         <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/projets/pro_ascii_space.html" />
         <option value="$PROJECT_DIR$/css/custom/main.css" />
-        <option value="$PROJECT_DIR$/projets/pro_static_site.html" />
         <option value="$PROJECT_DIR$/css/custom/pagination.css" />
+        <option value="$PROJECT_DIR$/projets/pro_static_site.html" />
       </list>
     </option>
   </component>
@@ -223,12 +233,12 @@
       <workItem from="1544635542542" duration="4441000" />
       <workItem from="1545071688272" duration="7592000" />
       <workItem from="1547284178594" duration="3205000" />
-      <workItem from="1547575616175" duration="2218000" />
+      <workItem from="1547575616175" duration="3454000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="36954000" />
+    <option name="totallyTimeSpent" value="38190000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-3" y="28" width="1926" height="1055" extended-state="6" />
@@ -294,13 +304,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="354">
-          <caret line="285" column="37" selection-start-line="285" selection-start-column="37" selection-end-line="285" selection-end-column="37" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/css/bootstrap.css">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="279">
@@ -310,15 +313,29 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/css/custom/main.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="57">
-          <caret line="3" column="40" selection-start-line="3" selection-start-column="22" selection-end-line="3" selection-end-column="40" />
+        <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>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/css/custom/pagination.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="76">
-          <caret line="4" column="39" selection-start-line="4" selection-start-column="39" selection-end-line="4" selection-end-column="39" />
+        <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_quoridor.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="532">
+          <caret line="46" column="51" lean-forward="true" selection-start-line="46" selection-start-column="51" selection-end-line="46" selection-end-column="71" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/projets/pro_static_site.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="310">
+          <caret line="280" column="86" selection-start-line="280" selection-start-column="86" selection-end-line="280" selection-end-column="86" />
         </state>
       </provider>
     </entry>

css/custom/pagination.css

@@ -1,16 +1,17 @@
 /* Pagination personnalization */
 
+/* Change Boostrap color */
 .page-link {
     color: #0b2e13;
     background-color: rgb(245, 255, 245);
-    border: 1px solid #dee2e6;
+    border: 1px solid #28a745;
 }
 
 .page-link:hover {
     color: #28a745;
     text-decoration: none;
     background-color: #e9ecef;
-    border-color: #dee2e6;
+    border-color: #28a745;
 }
 
 .page-link:focus {
@@ -20,12 +21,19 @@
 .page-item.active .page-link {
     color: #fff;
     background-color: #28a745;
-    border-color: #dee2e6;
+    border-color: #28a745;
 }
 
 .page-item.disabled .page-link {
     color: #6c757d;
     cursor: auto;
     background-color: rgb(230, 255, 230);
-    border-color: #dee2e6;
+    border-color: #28a745;
+}
+
+/* Change next and previous appearance */
+.page-link.arrow:hover {
+    color: #ffffff;
+    background-color: rgb(20, 100, 35);
+    border-color: #28a745;
 }

projets/pro_static_site.html

@@ -275,22 +275,22 @@
     <!-- Pagination -->
     <ul class="pagination pagination-lg justify-content-center">
         <li class="page-item">
-            <a class="page-link" href="#">&laquo</a>
+            <a class="page-link arrow" title="Page précédente" href="../projects.html">&laquo</a>
         </li>
         <li class="page-item active">
-            <a class="page-link" href="#">1</a>
+            <a class="page-link" title="Site web de Jovian" href="pro_static_site.html">1</a>
         </li>
         <li class="page-item">
-            <a class="page-link" href="#">2</a>
+            <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.html">2</a>
         </li>
-        <li class="page-item disabled">
-            <a class="page-link" href="#">3</a>
+        <li class="page-item">
+            <a class="page-link" title="Pulsar" href="pro_pulsar.html">3</a>
         </li>
         <li class="page-item">
-            <a class="page-link" href="#">4</a>
+            <a class="page-link" title="Quoridor" href="pro_quoridor.html">4</a>
         </li>
         <li class="page-item">
-            <a class="page-link" href="#">&raquo</a>
+            <a class="page-link arrow" title="Page suivante" href="../projects.html">&raquo</a>
         </li>
     </ul>