Add a "Learn" page (#2053)

We talked about making a "Learn" page in
#2046 and folks seemed
enthusiastic, so I took a stab at making a basic page. You can see it
here: https://jvns.github.io/git-scm.com/learn. The idea is now that
"Reference" links directly to the reference documentation, and that the
old `/doc/` page will redirect to the reference documentation.

I used Font Awesome icons (GPL compatible) because there was no "Learn"
or "Videos" icon, and I wanted the icons to match. I also moved a couple
of things to use flexbox/grid honestly because I have never learned how
`float: left` works and so it was much easier for me to make the changes
I needed to make by using flexbox or grid. Happy to come up with a
different approach if folks are concerned about grid availability in
browsers: https://caniuse.com/css-grid.

I removed links to a couple of cheat sheets on the "Docs" page.
Potentially worth adding those back later if/when "External Links" gets
revisited.

This closes #2055

Author: jvns

assets/sass/dark-mode.css

@@ -112,10 +112,6 @@
                 @include box-shadow(none);
             }
 
-            #front-nav img {
-                filter: none;
-            }
-
             div.monitor {
                 filter: brightness(.85);
             }

assets/sass/front-page.scss

@@ -19,59 +19,62 @@
   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;
-      }
     }
   }
 
   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.4;
+      width: 38px;
+      height: 38px;
+      background-color: #cdcdc5;
+      border-radius: 40%;
+      padding: 18px;
+
+      :root[data-theme="dark"] & {
+        filter: invert(1);
+        background-color: #9d9c9a;
+      }
     }
 
     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 {

assets/sass/layout.scss

@@ -82,6 +82,55 @@ aside {
     }
   }
 
+  .callout.icon {
+    position: relative;
+    padding: 20px 20px 20px 90px !important;
+    border: 2px solid var(--callout-color);
+    background: transparent;
+
+    &.book {
+      background: var(--callout-color);
+    }
+
+    a h3 {
+      font-size: 18px;
+      color: var(--link-color);
+    }
+
+    p {
+      font-size: 15px;
+      line-height: 1.3em;
+    }
+
+    img {
+      position: absolute;
+      top: 20px;
+      left: 17px;
+      width: 54px;
+      height: 54px;
+      opacity: 0.4;
+
+      :root[data-theme="dark"] & {
+        filter: invert(1);
+      }
+    }
+
+
+    &.video ul {
+      list-style-type: none;
+      margin-left: 1rem;
+
+      ::marker {
+        content: "⏵ ";
+        margin-right: .5rem;
+      }
+
+      li {
+        margin: .25rem 0;
+      }
+    }
+  }
+
   .callout {
     background-color: var(--callout-color);
     @include border-radius(3px);

assets/sass/reference.scss

@@ -354,24 +354,6 @@ ol.reference-previous-versions {
   }
 }
 
-.callout.ref-manual {
-  @include background-image-2x($baseurl + "images/icons/book", 54px, 72px, 24px 20px);
-  padding: 20px 30px 20px 100px !important;
-  background-color: var(--callout-color);
-  iframe {
-    max-width: 100%;
-  }
-
-  h3 {
-    font-size: 18px;
-  }
-
-  p {
-    font-size: 15px;
-    line-height: 1.3em;
-  }
-}
-
 p.quickref {
   @include background-image-2x($baseurl + "images/icons/document", 15px, 21px, 0 0);
   padding-left: 22px ! important;

content/cheat-sheet/_index.html

@@ -1,5 +1,5 @@
 ---
-section: "documentation"
+section: "learn"
 subsection: "cheat-sheet"
 title: "Git Cheat Sheet"
 url: /cheat-sheet.html

content/doc/_index.html

@@ -1,5 +1,5 @@
 ---
-section: "documentation"
+section: "learn"
 subsection: "external-links"
 title: "Git - External Links"
 url: /doc/ext.html

content/doc/ext/_index.html

@@ -0,0 +1,57 @@
+---
+section: "learn"
+title: "Git - Learn"
+url: /learn.html
+---
+
+<div id="main">
+
+  <h1> Learn </h1>
+
+  <div class="callout icon book">
+
+    <a href="{{< relurl "book">}}">
+      <img alt="" aria-hidden="true" src="{{< relurl "images/icons/fa-book.svg">}}" >
+      <h3> Pro Git Book </h3>
+    </a>
+
+    <p>The entire Pro Git book written
+      by Scott Chacon and Ben Straub is available to read online for free.
+      Print copies are available on <a
+        href="https://www.amazon.com/Pro-Git-Scott-Chacon/dp/1484200772?ie=UTF8&camp=1789&creative=9325&creativeASIN=1430218339&linkCode=as2&tag=git-sfconservancy-20">Amazon.com</a>.
+    </p>
+  </div>
+
+  <div class="callout icon video">
+    <a href="{{< relurl "videos">}}">
+      <img alt="" aria-hidden="true" src="{{< relurl "images/icons/fa-video.svg">}}" >
+      <h3> Videos </h3>
+    </a>
+
+    <p>
+      Short videos introducing Git for total beginners.
+    </p>
+    {{< videos-summary >}}
+  </div>
+
+  <div class="callout icon cheat-sheet">
+    <a href="{{< relurl "cheat-sheet">}}">
+      <img alt="" aria-hidden="true" src="{{< relurl "images/icons/fa-note-sticky.svg">}}" >
+      <h3>Cheat Sheet</h3>
+    </a>
+    <p>
+      The most common Git commands, with diagrams illustrating the difference
+      between merge and rebase.
+    </p>
+  </div>
+
+  <div class="callout icon external-links">
+    <a href="{{< relurl "doc/ext">}}">
+      <img alt="" aria-hidden="true" src="{{< relurl "images/icons/fa-arrow-up-right-from-square.svg">}}" >
+      <h3>External Links</h3>
+    </a>
+    <p>
+      Ever-evolving collection of tutorials, books, videos, and other Git resources from the community.
+    </p>
+  </div>
+</div>

content/learn/_index.html

@@ -1,5 +1,5 @@
 ---
-section: "documentation"
+section: "learn"
 subsection: "videos"
 title: "Git - Videos"
 url: /videos.html

content/videos/_index.html

@@ -1,7 +1,7 @@
 ---
 ### DO NOT EDIT! Generated by script/update-book2.rb
 category: book
-section: documentation
+section: learn
 subsection: book
 sidebar: book
 book: