Use Font Awesome for homepage icons

This should make it easier to update the icons in the future. Switch
from using `float:` to `display: grid` to display the icons.

Author: jvns

assets/sass/front-page.scss

@@ -31,39 +31,45 @@
   }
 
   a {
-    display: block;
-    height: 86px;
-    padding-left: 90px;
-    color: var(--font-color);
-    background-repeat: no-repeat;
-    background-position: 0 0;
-    transition-duration: 0.3s;
-    transition-property: color;
+    display: grid;
+    grid-template-columns: 74px 1fr;
+    grid-template-rows: auto auto;
+    column-gap: 1rem;
+    align-items: start;
 
     img {
-      float: left;
-      margin-right: -90px;
-      margin-left: -90px;
-      opacity: 0.9;
+      grid-row: 1 / -1;
+      grid-column: 1;
       transition-duration: 0.3s;
       transition-property: opacity;
+      opacity: 0.5;
+      width: 38px;
+      height: 38px;
+      background-color: #cdcdc5;
+      border-radius: 40%;
+      padding: 18px;
     }
 
     h3 {
       font-size: 18px;
       font-weight: bold;
       color: var(--orange);
+      grid-row: 1;
+      grid-column: 2;
     }
 
     p {
+      grid-row: 2;
+      grid-column: 2;
       font-size: 13px;
       line-height: $base-line-height * 0.8;
+      color: var(--font-color);
     }
   }
 
   a:hover {
     img {
-      opacity: 1;
+      opacity: 0.7;
     }
 
     h3 {

layouts/partials/site-root.html

@@ -2,37 +2,37 @@
   <section id="front-navigation">
     <nav id="front-nav">
       <ul>
-        <li id="nav-about">
+        <li>
           <a href="{{ relURL "about" }}">
-            <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
+            <img src="{{ relURL "images/icons/fa-gears.svg" }}" width="74" height="74" />
             <h3>About</h3>
             <p>The advantages of Git compared to other source control systems.</p>
           </a>
         </li>
-        <li id="nav-learn">
+        <li>
           <a href="{{ relURL "learn" }}">
-            <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
+            <img src="{{ relURL "images/icons/fa-lightbulb.svg" }}" width="74" height="74" />
             <h3>Learn</h3>
             <p>Pro Git book, videos, tutorials, and cheat sheet</p>
           </a>
         </li>
-        <li id="nav-documentation">
+        <li>
           <a href="{{ relURL "docs" }}">
-            <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
+            <img src="{{ relURL "images/icons/fa-book-open.svg" }}" width="74" height="74" />
             <h3>Reference</h3>
             <p>Git's reference documentation</p>
           </a>
         </li>
-        <li id="nav-downloads">
+        <li>
           <a href="{{ relURL "downloads" }}">
-            <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
+            <img src="{{ relURL "images/icons/fa-down-long.svg" }}" width="74" height="74" />
             <h3>Downloads</h3>
             <p>GUI clients and binary releases for all major platforms.</p>
           </a>
         </li>
-        <li id="nav-community">
+        <li>
           <a href="{{ relURL "community" }}">
-            <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
+            <img src="{{ relURL "images/icons/fa-comments.svg" }}" width="74" height="74" />
             <h3>Community</h3>
             <p>Get involved! Bug reporting, mailing list, chat, development and more.</p>
           </a>