Add arrows to external links (WIP)

styles/_external-links.scss

@@ -1,10 +1,36 @@
+.external-link{
+  &::after {
+    content: "\00a0";
+    background-image: url(../img/icons/arrow-up-right.svg);
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-size: 1em;
+    padding: 0 .5em;
+    background-position: left 0 bottom .2em;
+    transition: background-position 100ms ease-in-out;
 
-/* Reduce external link icon size */
+    // TODO: the background position is based on the padding, so it might
-.fa.fa-external-link:before {
+    // need adjustments for elements with more padding to make it line up
-  font-size: 80%;
+    // with the text. I thought background-origin: content-box might fix this
+    // but it doesn't seem to.
+  }
+
+  &:hover::after {
+    background-position: left .2em bottom .4em;
+  }
+
+  .fa-external-link {
+    display: none;
+  }
 }
 
-.external-link .fa-external-link,
+
-.related-projects a .fa-external-link {
+// /* Reduce external link icon size */
-  padding-left: 3px;
+// .fa.fa-external-link:before {
-}
+//   font-size: 80%;
+// }
+//
+// .external-link .fa-external-link,
+// .related-projects a .fa-external-link {
+//   padding-left: 3px;
+// }

styles/_top-nav.scss

@@ -29,19 +29,6 @@
       text-decoration: none;
       font-weight: 600;
 
-      &.active a {
-        font-weight: 700;
-        box-shadow: inset 0 -1px 0 0 #000;
-      }
-      &.active-parent a {
-        font-weight: 700;
-        box-shadow: inset 0 -1px 0 0 #000;
-      }
-
-      &:focus {
-        outline: none;
-      }
-
       @include media-breakpoint-only(lg) {
 
         &.github-edit {
@@ -181,7 +168,6 @@
 
       .dropdown-item {
         line-height: 2rem;
-        padding: 0;
       }
     }
   }

styles/xrpl.scss

@@ -8,11 +8,13 @@ $nav-link-padding-x: 1.25rem;
 $nav-link-padding-y: 1rem;
 $navbar-brand-padding-y: 1rem;
 $navbar-nav-link-padding-x: 2rem;
-$navbar-nav-link-padding-y: 1rem;
+$navbar-nav-link-padding-y: .75rem;
 $border-radius: 0;
 $border-radius-lg: 8px;
 $border-radius-sm: 4px;
 $dropdown-border-width: 1px;
+$enable-shadows: true;
+$dropdown-box-shadow: 0px 5px 40px $gray-900;
 $caret-width: .4em;
 
 $input-btn-padding-y: 1rem;

template/component-top-nav.html.jinja

@@ -39,14 +39,14 @@
             <h5 class="dropdown-item">{{link.top_nav_grouping}}</h5>
             {% set _ = printed_groupings.append(link.top_nav_grouping) %}
             {% endif %}
-            <a class="dropdown-item {% if currentpage == link %} active{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
+            <a class="dropdown-item{% if currentpage == link %} active{% endif %}{% if "//" in link.html %} external-link{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
           {% endfor %}
           </div><!--./col-->
         </div><!--/.dropdown-menu-->
       </li>
       {% elif not top_page.top_nav_omit %}
       <li class="nav-item">
-	        <a class="nav-link" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
+	        <a class="nav-link{% if "//" in link.html %} external-link{% endif %}" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
       </li>
       {% endif %}
       {% endmacro %}