Link to Learn page on the homepage

Also use flexbox instead of `float: left` to lay out everything in
a grid; it looks like this CSS was written before flexbox existed and
flexbox is simpler.

Author: jvns

assets/sass/front-page.scss

@@ -19,22 +19,14 @@
   ul {
     @extend .unstyled !optional;
     padding-top: 24px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 20px 40px;
+    margin-bottom: 40px;
 
     li {
-      display: block;
-      float: left;
       width: 280px;
-      margin-bottom: 20px;
-
-      &#nav-about,
-      &#nav-downloads {
-        margin-right: 30px;
-      }
-
-      &#nav-about,
-      &#nav-documentation {
-        margin-bottom: 40px;
-      }
     }
   }
 

layouts/partials/site-root.html

@@ -9,11 +9,18 @@ <h3>About</h3>
             <p>The advantages of Git compared to other source control systems.</p>
           </a>
         </li>
+        <li id="nav-learn">
+          <a href="{{ relURL "learn" }}">
+            <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
+            <h3>Learn</h3>
+            <p>Pro Git book, videos, tutorials, and cheat sheet</p>
+          </a>
+        </li>
         <li id="nav-documentation">
-          <a href="{{ relURL "doc" }}">
+          <a href="{{ relURL "docs" }}">
             <img src="{{ relURL "images/icons/[email protected]" }}" width="74" height="74" />
             <h3>Documentation</h3>
-            <p>Command reference pages, Pro Git book content, videos and other material.</p>
+            <p>Git's reference documentation</p>
           </a>
         </li>
         <li id="nav-downloads">