Link images on Learn page and fix dark mode

Author: jvns

assets/sass/layout.scss

@@ -84,35 +84,38 @@ aside {
 
   .callout.icon {
     position: relative;
-    padding: 20px 30px 20px 100px !important;
+    padding: 20px 20px 20px 90px !important;
     border: 2px solid var(--callout-color);
     background: transparent;
 
     &.book {
       background: var(--callout-color);
     }
 
-    h3 {
+    a h3 {
       font-size: 18px;
+      color: var(--link-color);
     }
 
     p {
       font-size: 15px;
       line-height: 1.3em;
     }
 
-    &::before {
-      content: "";
+    img {
       position: absolute;
       top: 20px;
-      left: 24px;
+      left: 17px;
       width: 54px;
       height: 54px;
-      background-repeat: no-repeat;
-      background-size: contain;
       opacity: 0.4;
+
+      :root[data-theme="dark"] & {
+        filter: invert(1);
+      }
     }
 
+
     &.video ul {
       list-style-type: none;
       margin-left: 1rem;
@@ -126,23 +129,6 @@ aside {
         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 {

content/learn/_index.html

@@ -9,7 +9,11 @@
   <h1> Learn </h1>
 
   <div class="callout icon book">
-    <h3> <a href="{{< relurl "book">}}"> Pro Git Book </a></h3>
+
+    <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.
@@ -23,7 +27,10 @@ <h3> <a href="{{< relurl "book">}}"> Pro Git Book </a></h3>
   </div>
 
   <div class="callout icon video">
-    <h3> <a href="{{< relurl "videos">}}"> Videos </a></h3>
+    <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.
@@ -32,15 +39,21 @@ <h3> <a href="{{< relurl "videos">}}"> Videos </a></h3>
   </div>
 
   <div class="callout icon cheat-sheet">
-    <h3> <a href="{{< relurl "cheat-sheet">}}">Cheat Sheet</a> </h3>
+    <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">
-    <h3> <a href="{{< relurl "doc/ext">}}">External Links</a> </h3>
+    <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>