Use Font Awesome for homepage icons

There was no "Learn" or "Videos" icon, and I wanted the icons to match,
so we need new icons! There are GPL compatible according to their
website.

Integrated these icons as SVGs (just copied and pasted from their site)
to keep file sizes down, the main Font Awesome CSS file is pretty big.

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>