Add Learn page

- Add a new videos summary shortcode to make the videos more compact
- Add a new `.callout.icon` class to give the page a more unified look
- Add font awesome icons

Author: jvns

assets/sass/layout.scss

@@ -82,6 +82,69 @@ aside {
     }
   }
 
+  .callout.icon {
+    position: relative;
+    padding: 20px 30px 20px 100px !important;
+    border: 2px solid var(--callout-color);
+    background: transparent;
+
+    &.book {
+      background: var(--callout-color);
+    }
+
+    h3 {
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 15px;
+      line-height: 1.3em;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 20px;
+      left: 24px;
+      width: 54px;
+      height: 54px;
+      background-repeat: no-repeat;
+      background-size: contain;
+      opacity: 0.4;
+    }
+
+    &.video ul {
+      list-style-type: none;
+      margin-left: 1rem;
+
+      ::marker {
+        content: "⏵ ";
+        margin-right: .5rem;
+      }
+
+      li {
+        margin: .25rem 0;
+      }
+    }
+
+    &.book::before {
+      background-image: url($baseurl + "images/icons/fa-book.svg");
+    }
+
+    &.video::before {
+      background-image: url($baseurl + "images/icons/fa-video.svg");
+    }
+
+    &.cheat-sheet::before {
+      background-image: url($baseurl + "images/icons/fa-note-sticky.svg");
+    }
+
+    &.external-links::before {
+      background-image: url($baseurl + "images/icons/fa-arrow-up-right-from-square.svg");
+      top: 24px;
+    }
+  }
+
   .callout {
     background-color: var(--callout-color);
     @include border-radius(3px);
@@ -91,6 +154,16 @@ aside {
     p {
       margin-bottom: 0;
     }
+
+    a.button {
+      padding: .5rem;
+      background: var(--orange);
+      color: white;
+      display: inline-block;
+      margin-top: .5rem;
+      border-radius: .5rem;
+    }
+
   }
 
   img {

content/learn/_index.html

@@ -0,0 +1,48 @@
+---
+section: "learn"
+title: "Git - Learn"
+url: /learn.html
+---
+
+<div id="main">
+
+  <h1> Learn </h1>
+
+  <div class="callout icon book">
+    <h3> <a href="{{< relurl "book">}}"> Pro Git Book </a></h3>
+
+    <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>
+
+    <p>
+      <a class="button" href="{{< relurl "book">}}">Read the book! </a>
+    </p>
+  </div>
+
+  <div class="callout icon video">
+    <h3> <a href="{{< relurl "videos">}}"> Videos </a></h3>
+
+    <p>
+      Short videos introducing Git for total beginners.
+    </p>
+    {{< videos-summary >}}
+  </div>
+
+  <div class="callout icon cheat-sheet">
+    <h3> <a href="{{< relurl "cheat-sheet">}}">Cheat Sheet</a> </h3>
+    <p>
+      The most common Git commands, with diagrams illustrating the difference
+      between merge and rebase.
+    </p>
+  </div>
+
+  <div class="callout icon external-links">
+    <h3> <a href="{{< relurl "doc/ext">}}">External Links</a> </h3>
+    <p>
+      Ever-evolving collection of tutorials, books, videos, and other Git resources from the community.
+    </p>
+  </div>
+</div>

layouts/shortcodes/videos-summary.html

@@ -0,0 +1,9 @@
+{{ $videos := sort (where .Site.RegularPages "Params.episode" "ne" nil) "Params.episode"  }}
+
+<ul>
+  {{ range $i, $video := $videos }}
+  <li>
+    <a href="{{ relURL "video" }}/{{ $video.Params.link }}">{{ $video.Params.video_title }}</a>  ({{ $video.Params.length }})
+  </li>
+  {{ end }}
+</ul>