Standardize right sidebars

(except websocket tool; too many legacy styles to undo just yet)
consistent header, left spacing

assets/css/devportal.css

@@ -525,12 +525,8 @@ a.current {
 }
 .level-1,
 .curated-links li {
-  margin-top: 15px;
-  margin-left: 15px;
-}
-.level-1 a,
-.curated-links li a {
-  font-weight: 700;
+  margin-top: 12px;
+  margin-left: 16px;
 }
 
 .landing .level-1,
@@ -565,9 +561,6 @@ a.current {
   margin-top: 1rem;
 }
 
-.level-1:first-child {
-  margin-top: 0;
-}
 .level-2 {
   list-style-type: circle;
   margin-left: 30px;
@@ -758,14 +751,11 @@ a.current {
   color: #000;
 }
 
-.right-sidebar {
-  font-size: 14px;
-}
-
 .right-sidebar .card {
   position: sticky;
+  max-height: 85vh;
   top: 48px;
-  overflow: scroll;
+  overflow: auto;
   padding: 44px 24px 48px;
 }
 
@@ -773,22 +763,40 @@ a.current {
   border-bottom: none;
   background-color: #fff;
   padding: 10px 0;
-  line-height: 20px;
-  font-weight: 700;
-  font-size: 1.23em;
 }
 
-.right-sidebar ul {
+.right-sidebar .card-header h4 {
+  line-height: 20px;
+  font-weight: 700;
+  font-size: 1.20em;
   padding: 0;
+  margin: 0;
+}
+
+.right-sidebar .card-body {
+  padding: 0 0 0 16px;
   border-left: 1px solid #eae7e6;
   list-style-type: none;
 }
 
 .right-sidebar ul li {
   list-style-type: none;
-  margin-bottom: 8px
+  margin-bottom: 8px;
+  margin-left: 0;
 }
 
+.right-sidebar .level-1 a {
+  font-weight: 700;
+  font-family: "Space Mono", monospace;
+}
+.right-sidebar .level-2 {
+  margin-left: 0;
+}
+.right-sidebar .level-3 {
+  margin-left: 16px;
+}
+
+/* Left navigation --------------------------------------------------------- */
 .card .sidebar_pagelist li a {
   display: block;
   margin-top: 5px;

tool/template-doc.html

@@ -30,8 +30,10 @@
 
 {% block right_sidebar %}
   <div class="card" id="page-toc-wrapper">
-    <p class="in-this-doc card-header">In this document</p>
-    <ul class="dev_nav_sidebar card-body" id="dactyl_toc_sidebar">
+    <div class="card-header">
+      <h4>In this document</h4>
+    </div>
+    <ul class="card-body">
       {{ sidebar_content }}
     </ul>
   </div>

tool/template-rest-api-tool.html

@@ -1,10 +1,14 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-    <div class="card">
-        <ul class="dev_nav_sidebar card-body" id='command_list'>
-        </ul>
+  <div class="card">
+    <div class="card-header">
+      <h4>API Methods</h4>
     </div>
+
+    <ul class="dev_nav_sidebar card-body" id='command_list'>
+    </ul>
+  </div>
 {% endblock %}
 
 {% block main %}

tool/template-test-net.html

@@ -4,7 +4,9 @@
 
 {% block right_sidebar %}
 <div id="test-net-servers" class="card">
-  <p class="card-header">Test Net Servers</p>
+  <div class="card-header">
+    <h4>Test Net Servers</h4>
+  </div>
   <div class="card-body">
     <p>Use the following addresses to connect to the XRP Test Net and send transactions from your account.</p>
     <h5>Websockets and Ripple API</h4>

tool/template-tx-sender.html

@@ -4,7 +4,9 @@
 
 {% block right_sidebar %}
 <div id="connection-status" class="card">
-  <p class="card-header">Status</p>
+  <div class="card-header">
+    <h4>Status</h4>
+  </div>
   <div class="card-body">
     <ul class="list-group list-group-flush">
       <li class="list-group-item" id="connection-status-label">XRP Test Net:</li>

tool/template-use-case.html

@@ -10,7 +10,9 @@
 
 {% block right_sidebar %}
   <div class="card" id="use-case-related">
-    <p class="in-this-doc card-header">Useful Background</p>
+    <div class="card-header">
+      <h4>Useful Background</h4>
+    </div>
     <div class="card-body">
       <div class="curated-links">
         <ul>
@@ -18,7 +20,7 @@
             {% set linkpage = pages|selectattr("html", 'defined_and_equalto', link)|first %}
             <li><a href="{{linkpage.html}}">{{linkpage.name}}</a></li>
           {% endfor %}
-        </ol>
+        </ul>
       </div><!--/.curated-links-->
     </div><!--/.card-body-->
   </div>

tool/template-websocket-api-tool.html

@@ -1,41 +1,41 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-  <aside class="p-3">
-        <div class="card">
-            <p class="card-header">API Methods</p>
-            <ul id='command_list'>
-                <li class='selected'><a href='#server_info'>server_info</a></li>
-                <li><a href='#server_state'>server_state</a></li>
-                <li><a href='#ping'>ping</a></li>
-                <br/>
-                <li><a href='#subscribe'>subscribe</a></li>
-                <li><a href='#unsubscribe'>unsubscribe</a></li>
-                <br/>
-                <li><a href='#ledger'>ledger</a></li>
-                <li><a href='#ledger_closed'>ledger_closed</a></li>
-                <li><a href='#ledger_current'>ledger_current</a></li>
-                <li><a href='#ledger_entry'>ledger_entry</a></li>
-                <br/>
-                <li><a href='#account_info'>account_info</a></li>
-                <li><a href='#account_lines'>account_lines</a></li>
-                <li><a href='#account_offers'>account_offers</a></li>
-                <li><a href='#account_tx'>account_tx</a></li>
-                <li><a href='#account_currencies'>account_currencies</a></li>
-                <br/>
-                <li><a href='#transaction_entry'>transaction_entry</a></li>
-                <li><a href='#tx'>tx</a></li>
-                <li><a href='#tx_history'>tx_history</a></li>
-                <br/>
-                <li><a href='#sign'>sign</a></li>
-                <li><a href='#submit'>submit</a></li>
-                <br/>
-                <li><a href='#ripple_path_find'>ripple_path_find</a></li>
-                <li><a href='#path_find'>path_find</a></li>
-                <li><a href='#book_offers'>book_offers</a></li>
-            </ul>
-        </div>
-  </aside>
+  <div class="card">
+      <div class="card-header">
+        <h4>API Methods</h4>
+      </div>
+      <ul class="card-body" id='command_list'>
+          <li class='selected'><a href='#server_info'>server_info</a></li>
+          <li><a href='#server_state'>server_state</a></li>
+          <li><a href='#ping'>ping</a></li>
+          <br/>
+          <li><a href='#subscribe'>subscribe</a></li>
+          <li><a href='#unsubscribe'>unsubscribe</a></li>
+          <br/>
+          <li><a href='#ledger'>ledger</a></li>
+          <li><a href='#ledger_closed'>ledger_closed</a></li>
+          <li><a href='#ledger_current'>ledger_current</a></li>
+          <li><a href='#ledger_entry'>ledger_entry</a></li>
+          <br/>
+          <li><a href='#account_info'>account_info</a></li>
+          <li><a href='#account_lines'>account_lines</a></li>
+          <li><a href='#account_offers'>account_offers</a></li>
+          <li><a href='#account_tx'>account_tx</a></li>
+          <li><a href='#account_currencies'>account_currencies</a></li>
+          <br/>
+          <li><a href='#transaction_entry'>transaction_entry</a></li>
+          <li><a href='#tx'>tx</a></li>
+          <li><a href='#tx_history'>tx_history</a></li>
+          <br/>
+          <li><a href='#sign'>sign</a></li>
+          <li><a href='#submit'>submit</a></li>
+          <br/>
+          <li><a href='#ripple_path_find'>ripple_path_find</a></li>
+          <li><a href='#path_find'>path_find</a></li>
+          <li><a href='#book_offers'>book_offers</a></li>
+      </ul>
+  </div>
 {% endblock %}
 
 {% block main %}