Update homepage

Author: typicode

src/front/index.html

@@ -23,13 +23,13 @@
               </a>
             </li>
             <li>
-              <a href="https://thanks.typicode.com">
-                <i class="far fa-laugh"></i>Supporters
+              <a href="https://my-json-server.typicode.com">
+                <i class="fas fa-burn"></i>My JSON Server
               </a>
             </li>
             <li>
-              <a href="https://my-json-server.typicode.com">
-                <i class="fas fa-burn"></i>My JSON Server
+              <a href="https://thanks.typicode.com">
+                <i class="far fa-laugh"></i>Supporters
               </a>
             </li>
           </ul>
@@ -48,8 +48,9 @@ <h1>Congrats!</h1>
         <div id="resources"></div>
 
         <p>
-          To access and modify resources, you can use any HTTP method
-          <br />
+          To access and modify resources, you can use any HTTP method:
+        </p>
+        <p>
           <code>GET</code>
           <code>POST</code>
           <code>PUT</code>
@@ -63,7 +64,7 @@ <h1>Congrats!</h1>
         <h1>Documentation</h1>
         <p>
           <a href="https://github.com/typicode/json-server">
-            <i class="fab fa-github-alt"></i>README
+            README
           </a>
         </p>
       </div>

src/front/index.js

@@ -59,7 +59,7 @@ function CustomRoutesBlock({ customRoutes }) {
               rule =>
                 `<tr>
               <td>${rule}</td>
-              <td>⇢ ${customRoutes[rule]}</td>
+              <td><code>⇢</code> ${customRoutes[rule]}</td>
             </tr>`
             )
             .join('')}

src/front/style.css

@@ -6,7 +6,7 @@ body {
   flex-direction: column;
   padding: 0;
   margin: 0;
-  color: #333;
+  color: #3b4252;
   letter-spacing: 0;
 }
 
@@ -20,11 +20,15 @@ header {
   border-bottom: 1px solid #eee;
 }
 
-header a,
-header a:hover {
+header a {
+  color: inherit;
   text-decoration: none;
 }
 
+header a:hover {
+  text-decoration: underline;
+}
+
 nav ul {
   display: flex;
   flex-wrap: nowrap;
@@ -35,11 +39,15 @@ nav li.title {
   flex-grow: 5;
   text-align: left;
   font-weight: bold;
+  font-size: 1.4rem;
+  color: #3b4252;
 }
 
 nav li {
   flex-grow: 1;
+  align-self: center;
   text-align: right;
+  color: #4c566a;
 }
 
 main {
@@ -61,11 +69,11 @@ i {
 }
 
 a {
-  color: #0275d8;
+  color: #5e81ac;
 }
 
 a:hover {
-  color: #014c8c;
+  color: #81a1c1;
   text-decoration: underline;
 }
 
@@ -97,5 +105,5 @@ code {
   padding: 0.2rem;
   margin: 0rem 0.2rem;
   border-radius: 0.2rem;
-  background: #eee;
+  background: #e5e9f0;
 }