Docs: re-add NFTs hot topic

styles/_helpers.scss

@@ -360,3 +360,10 @@
   50% { right: 7px; }
   100% { right: 0; }
 }
+
+// Diagonal up-right arrow bouncing (also for absolute-positioned to the right)
+@keyframes arrowDanceDiag {
+  0% { right: 7px; margin-top: 0; }
+  50% { right: 0; margin-top: -7px; }
+  100% { right: 7px; margin-top: 0; }
+}

styles/_landings.scss

@@ -130,17 +130,30 @@
         background-image: url(../img/icons/arrow-right-purple.svg);
         background-size: cover;
         position: absolute;
-        // right: .5rem;
         right: 0;
         width: 1.5rem;
         height: 1.5rem;
         transition: all .2s ease;
       }
-
+      &:not(.external-link):hover::after {
-      &:hover::after {
-        // right: 0;
         animation: arrowDance2 1.2s infinite;
       }
+
+      &.external-link::after {
+        content: " ";
+        background-image: url(../img/icons/arrow-up-right.svg);
+        background-size: cover;
+        position: absolute;
+        // right: .5rem;
+        right: 7px;
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: all .2s ease;
+      }
+
+      &.external-link:hover::after {
+        animation: arrowDanceDiag 1.2s infinite;
+      }
     }
   }
 

styles/_pages.scss

@@ -221,6 +221,10 @@
       background-image: url(../img/cards/4col-light-blue-2.svg);
     }
   }
+
+  #docs-hot-topic .longform {
+    margin-top: 2.5rem;
+  }
 }
 
 .page-docs-index,

template/page-docs.html.jinja

@@ -22,16 +22,6 @@
         </form>
       </div><!--/.center-search-->
     </div>
-
-    {#<div class="highlight-subcard">
-      <h3>Hot Topic: NFTs</h3>
-      <p class="blurb">{% trans %}Interested in non-fungible tokens, but concerned about their <a href="impact.html">large carbon footprint</a>? Check out these proposed standards for issuing NFTs on the XRP Ledger:{% endtrans %}</p>
-      <ul>
-        <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/30" class="external-link" target="_blank">XLS-14d: Non fungible tokens (indivisible NFT's) on the XRPL<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
-        <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/40" class="external-link" target="_blank">XLS-19d: Wallet based Proof of Digital Asset Property and Rights (NFT)<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
-        <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/46" class="external-link" target="_blank">XLS-20d: Non-Fungible Token Support<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
-      </ul>
-    </div><!--/.highlight-card-->#}
   </section>
 
   <section class="container-fluid mb-50" id="docs-browse-by">
@@ -87,6 +77,22 @@
     {% include 'component-curated-cards.html.jinja' %}
   </section><!--/#run-a-network-node-->
 
+<section class="container-fluid mb-50" id="docs-hot-topic">
+  <h2 class="h4">{% trans %}Hot Topic: NFTs{% endtrans %}</h2>
+  <div class="row">
+    <div class="col col-lg-6">
+      <p class="longform">{% trans %}Interested in non-fungible tokens, but concerned about their <a href="impact.html">large carbon footprint</a>? Check out these proposed standards for issuing NFTs on the XRP Ledger:{% endtrans %}</p>
+    </div>
+    <div class="col col-lg-6">
+      <ul class="nav flex-column">
+        <li class="nav-item"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/30" class="nav-link external-link" target="_blank">XLS-14d: Non fungible tokens (indivisible NFT's) on the XRPL</a></li>
+        <li class="nav-item"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/40" class="nav-link external-link" target="_blank">XLS-19d: Wallet based Proof of Digital Asset Property and Rights (NFT)</a></li>
+        <li class="nav-item"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/46" class="nav-link external-link" target="_blank">XLS-20d: Non-Fungible Token Support</a></li>
+      </ul>
+    </div>
+  </div>
+</section><!--/#docs-hot-topic-->
+
 <section class="container-fluid mb-50 doc-index">
   <h2 id="full-doc-index" class="h4">{% trans %}Full Documentation Index{% endtrans %}</h2>
   <div class="row">