Cleaned up sidebar styles, etc.

dactyl-config.yml

@@ -1259,7 +1259,7 @@ pages:
 
     -   name: Consensus Network
         html: consensus-network.html
-        parent: decentralized-exchange.html
+        parent: concepts.html
         funnel: Build
         doc_type: Concepts
         category: Consensus Network

styles/_content.scss

@@ -12,6 +12,17 @@ h3 a:hover,
   color: $primary;
 }
 
+.curated-links a,
+.children-display a,
+a.card,
+.xrpl-footer a {
+  color: $white;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
 /* Content text styling ----------------------------------------------------- */
 
 .content {

styles/_footer.scss

@@ -22,16 +22,30 @@
     font-size: 1rem;
   }
 
+  ul {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
   li {
     font-size: 0.75rem;
+    list-style-type: none;
+    margin-left: 0;
   }
 
   .card-body {
     margin-top: -15px;
   }
 
-  .card-header h5 i {
+  .card-header {
-    margin-left: 0.2em;
+    background: none;
+    border-bottom: none;
+    border-top: none;
+    padding: 8px;
+
+    h5 i {
+      margin-left: 0.2em;
+    }
   }
 
   .card-grid .card {
@@ -46,6 +60,10 @@
     }
   }
 
+  .curated-links li, .level-1 {
+    margin-top: 12px;
+  }
+
   .absolute_bottom_footer span {
     margin-right: 25px;
     font-size: 0.75rem;

styles/_landings.scss

@@ -1,209 +1,187 @@
-
-.landing .curated-links a,
-.landing .children-display a,
-.landing a.card,
-.xrpl-footer a {
-  color: $white;
-
-  &:hover {
-    color: $primary;
-  }
-}
-
-
-.card-grid .section-hero.card {
-  padding-left: 0;
-}
-
-.container-fluid.section-hero {
-  padding: 48px 0;
-}
-
-.content .children-display li a {
-  /* Category landing pages */
-  font-weight: 700;
-  font-size: 1.25rem;
-  text-decoration: none;
-}
-
-.content .children-display li a:hover {
-  text-decoration: underline;
-}
-
-
-/* Common list modules (children, curated links) ---------------------------- */
-.curated-links ul,
-.curated-links ol,
-.children-display ul {
-  padding-left: 0;
-  margin-bottom: 0;
-}
-
-.card .curated-links a:hover,
-.card .children-display a:hover {
-  text-decoration: none;
-}
-
-.level-1,
-.curated-links ul li {
-  list-style-type: disc;
-}
-.level-1,
-.curated-links li {
-  margin-top: 12px;
-  margin-left: 16px;
-}
-
-.landing .level-1,
-.landing .level-2,
-.landing .curated-links li {
-  margin-top: 0;
-}
-
-.landing .card .level-1 a,
-.landing .card .curated-links li a {
-  padding: 8px;
-  display: block;
-  margin: 0 -8px 0 -8px;
-}
-
-.landing .card .level-2 {
-  position: relative;
-}
-.landing .card .level-2 a {
-  padding: 8px 8px 8px 28px;
-  display: block;
-  margin: 0 -8px 0 -8px;
-}
-
-.landing .card .blurb + .children-display,
-.landing .card .blurb + .curated-links {
-  margin-top: 1rem;
-}
-
-.section-hero .blurb {
-  font-size: 1.2em;
-  line-height: 1.71em;
-}
-
-.level-2 {
-  list-style-type: circle;
-  margin-left: 30px;
-}
-.level-3 {
-  list-style-type: square;
-  margin-left: 45px;
-}
-.level-4 {
-  margin-left: 60px;
-}
-.level-5 {
-  margin-left: 75px;
-  list-style-type: circle;
-}
-.level-6 {
-  /* Probably not used */
-  margin-left: 90px;
-  list-style-type: square;
-}
-
-@include media-breakpoint-down(md) {
-  .landing .card {
-    padding-left: 0px;
-  }
-}
-
-
 /* Landing Pages ------------------------------------------------------------ */
+.landing {
 
-.landing .display-4 {
+  .container-fluid.section-hero {
-  margin-bottom: 1.5rem;
+    padding: 48px 0;
-}
+  }
 
-#test-net-servers h3 {
+  .content .children-display li a {
-  font-size: 1.4rem;
+    /* Category landing pages */
-  font-weight: 700;
+    font-weight: 700;
-}
+    font-size: 1.25rem;
+    text-decoration: none;
+  }
 
-.card-header h3.card-title {
+  .content .children-display li a:hover {
-  margin-bottom: 0;
+    text-decoration: underline;
-}
+  }
-
-#test-net-servers pre {
-  overflow-x: auto;
-}
-
-.landing .card li,
-.xrpl-footer .card li {
-  list-style-type: none;
-  margin-left: 0;
-}
-
-.landing section:first-of-type {
-  padding-top: 0;
-  border-top-width: 0;
-}
-
-.card-grid .card-body {
-  padding: 8px;
-  padding-bottom: 24px;
-}
-
-.landing .card-header,
-.landing .card-footer,
-.xrpl-footer .card-header {
-  background: none;
-  border-bottom: none;
-  border-top: none;
-}
-
-.landing .card-header,
-.xrpl-footer .card-header {
-  padding: 8px;
-}
-
-.landing .card-footer {
-  padding: 8px;
-}
-
-.landing .card-body > p {
-  padding: 0;
-  margin-bottom: 0;
-}
 
 
-#main_content_wrapper {
+  /* Common list modules (children, curated links) -------------------------- */
-  border-bottom: none;
+  .curated-links ul,
-}
+  .curated-links ol,
+  .children-display ul {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
 
-.marketing-wrapper {
+  .card .curated-links a:hover,
-  margin-top: 10rem;
+  .card .children-display a:hover {
-  margin-bottom: 6rem;
+    text-decoration: none;
-  @include media-breakpoint-down(sm) {
+  }
-    margin-top: 6rem;
+
+  .level-1,
+  .curated-links ul li {
+    list-style-type: disc;
+  }
+  .level-1,
+  .curated-links li {
+    margin-top: 12px;
+    margin-left: 16px;
+  }
+
+  .level-1,
+  .level-2,
+  .curated-links li {
+    margin-top: 0;
+  }
+
+  .card .level-1 a,
+  .card .curated-links li a {
+    padding: 8px;
+    display: block;
+    margin: 0 -8px 0 -8px;
+  }
+
+  .card .level-2 {
+    position: relative;
+  }
+  .card .level-2 a {
+    padding: 8px 8px 8px 28px;
+    display: block;
+    margin: 0 -8px 0 -8px;
+  }
+
+  .card .blurb + .children-display,
+  .card .blurb + .curated-links {
+    margin-top: 1rem;
+  }
+
+  .section-hero .blurb {
+    font-size: 1.2em;
+    line-height: 1.71em;
+  }
+
+  .level-2 {
+    list-style-type: circle;
+    margin-left: 30px;
+  }
+  .level-3 {
+    list-style-type: square;
+    margin-left: 45px;
+  }
+  .level-4 {
+    margin-left: 60px;
+  }
+  .level-5 {
+    margin-left: 75px;
+    list-style-type: circle;
+  }
+  .level-6 {
+    /* Probably not used */
+    margin-left: 90px;
+    list-style-type: square;
+  }
+
+  /* Misc. ------------------------------------------------------------------ */
+
+  @include media-breakpoint-down(md) {
+    .card {
+      padding-left: 0px;
+    }
+  }
+
+  .display-4 {
+    margin-bottom: 1.5rem;
+  }
+
+  #test-net-servers h3 {
+    font-size: 1.4rem;
+    font-weight: 700;
+  }
+
+  .card-header h3.card-title {
+    margin-bottom: 0;
+  }
+
+  #test-net-servers pre {
+    overflow-x: auto;
+  }
+
+  .card li {
+    list-style-type: none;
+    margin-left: 0;
+  }
+
+  section:first-of-type {
+    padding-top: 0;
+    border-top-width: 0;
+  }
+
+  .card-header,
+  .card-footer {
+    background: none;
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .card-header {
+    padding: 8px;
+  }
+
+  .card-footer {
+    padding: 8px;
+  }
+
+  .card-body > p {
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+
+  #main_content_wrapper {
+    border-bottom: none;
+  }
+
+  .marketing-wrapper {
+    margin-top: 10rem;
+    margin-bottom: 6rem;
+    @include media-breakpoint-down(sm) {
+      margin-top: 6rem;
+    }
+  }
+
+
+  .card .card-img-top {
+    width: 60px;
+    height: 60px;
+    margin-left: 0;
+    margin-right: auto;
+  }
+  .image-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 16px;
+  }
+
+  /* Full-link cards */
+  a.card {
+    border: 1px solid transparent;
+  }
+  a.card:hover {
+    text-decoration: none;
+  }
+  a.card:hover h3 {
+    text-decoration: underline;
   }
 }
-
-
-.landing .card .card-img-top {
-  width: 60px;
-  height: 60px;
-  margin-left: 0;
-  margin-right: auto;
-}
-.image-icon {
-  width: 60px;
-  height: 60px;
-  margin-bottom: 16px;
-}
-
-/* Full-link cards */
-.landing a.card {
-  border: 1px solid transparent;
-}
-.landing a.card:hover {
-  text-decoration: none;
-}
-.landing a.card:hover h3 {
-  text-decoration: underline;
-}

styles/_layout.scss

@@ -1,3 +1,7 @@
+body {
+  position: relative; // Makes scrollspy work better
+}
+
 section {
   position: relative;
 }
@@ -156,7 +160,17 @@ section {
     @include media-breakpoint-down(md) {
       padding: 20px;
     }
+
+    .card-body {
+      padding: 8px;
+      padding-bottom: 24px;
+    }
   }
+
+  &.section-hero {
+    padding-left: 0;
+  }
+
 }
 
 /* Grid Box Vertical numbers ------------------------------------------------ */

styles/_side-nav.scss

@@ -1,4 +1,4 @@
-/* Left/right nav color scheme ------------------------------- */
+/* Left/right nav fonts & colors scheme ------------------------------------- */
 aside li a {
   color: $white;
   text-decoration: none;
@@ -19,55 +19,18 @@ aside .active > a:hover {
   color: $primary;
   font-weight: 700;
 }
-aside a.active-parent {
+aside a.active-parent,
+aside .active-parent > a {
   font-weight: 700;
 }
 
-.command-list li a,
+.page-toc .level-1 a,
-.page-toc li a {
+.command-list .separator {
-  display: block;
+  font-weight: 700;
-  margin-top: 5px;
+  font-family: "Space Mono", monospace;
-  padding: 4px 15px 4px 35px;
-  text-indent: -20px;
-  font-size: 0.9rem;
-}
-
-#page-toc-wrapper .card-body,
-.command-list {
-  border-left: 1px solid $white;
-}
-
-.page-toc .level-1 a {
   color: $white;
 }
 
-.page-toc .level-3 {
-  padding-left: 16px;
-  border-left: 1px solid $white;
-  margin-bottom: 0;
-  padding-bottom: 5px;
-}
-
-.page-toc .level-3 a {
-  margin-top: 0;
-  padding-bottom: 5px;
-}
-
-.command-list li a:hover,
-.page-toc li a:hover {
-  text-decoration: none;
-  border-left: 1px solid $primary;
-  padding-left: 34px;
-}
-.command-list .active a {
-  border-left: 2px solid $primary;
-  padding-left: 33px;
-}
-
-.right-sidebar {
-  padding: 44px 0 24px 48px;
-}
-
 /* Left navigation -----------------------------------------------------------*/
 
 .nav-toggler {
@@ -145,50 +108,82 @@ aside a.active-parent {
 
 /* Right navigation --------------------------------------------------------- */
 
-#page-toc-wrapper .card {
+.right-sidebar {
+  padding: 44px 0 24px 48px;
+
+  .toc-header {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 1rem 0;
+
+    h4 {
+      line-height: 20px;
+      font-size: 1.2em;
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+
+#page-toc-wrapper {
   position: sticky;
   max-height: 85vh;
   top: 48px;
   overflow: auto;
-  padding: 44px 0 48px 24px;
-  border: none;
-}
-.command-list {
-  padding: 16px;
-}
-
-#page-toc-wrapper .card-header {
-  border-bottom: none;
-  font-weight: bold;
-  font-size: 14px;
-  padding: 10px 0;
-}
-
-#page-toc-wrapper .card-header h4 {
-  line-height: 20px;
-  font-size: 1.2em;
   padding: 0;
-  margin: 0;
+  border: none;
+
+  .card-body {
+    padding: 0;
+    list-style-type: none;
+  }
 }
 
-#page-toc-wrapper .card-body {
+.page-toc,
-  padding: 0 0 0 16px;
+.command-list {
-  list-style-type: none;
+  padding-left: 0;
-}
+  border-left: 1px solid $white;
 
-.page-toc li,
+  li {
-.command-list li {
+    list-style-type: none;
-  list-style-type: none;
+    padding: 0;
-  margin-bottom: 8px;
+
-  margin-left: 0;
+    &.separator {
-}
+      padding: .25rem 1rem;
+    }
+
+    a {
+      display: block;
+      margin-top: 5px;
+      padding: .25rem 1rem;
+      font-size: 0.9rem;
+
+      &:hover,
+      .active {
+        text-decoration: none;
+        border-left: 1px solid $primary;
+        margin-left: -1px;
+      }
+    }
+
+    &.active a,
+    &.active a:hover {
+      border-left: 2px solid $primary;
+      padding-left: calc(1rem - 1px);
+      margin-left: -1px;
+    }
+  }
+
+  .level-3 {
+    margin-left: 16px;
+    border-left: 1px solid $white;
+    margin-bottom: 0;
+    padding-bottom: 5px;
+
+    a {
+      margin-top: 0;
+      padding-bottom: 5px;
+    }
+  }
 
-.page-toc .level-1 a,
-.command-list .separator {
-  font-weight: 700;
-  font-family: "Space Mono", monospace;
-}
-.page-toc .level-2,
-.command-list .method {
-  margin-left: 0;
 }

tool/template-base.html

@@ -77,7 +77,7 @@
 
 </head>
 
-<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">
+<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
 
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"

tool/template-doc.html

@@ -30,13 +30,15 @@
 {% endblock %}
 
 {% block right_sidebar %}
-  <div class="card" id="page-toc-wrapper">
+  <div id="page-toc-wrapper">
-    <div class="card-header">
+    <div class="toc-header">
       <h4>{% trans %}In this document{% endtrans %}</h4>
     </div>
-    <ul class="card-body page-toc">
+    <ul class="page-toc nav flex-column" role="directory">
-      {{ sidebar_content }}
+	    {% for h in headers %}{% if h.level < 4 %}
-    </ul>
+	    <li class="nav-item level-{{h.level}}"><a class="nav-link" href="#{{h.id}}">{{h.text}}</a></li>
+	    {% endif %}{% endfor %}
+	  </ul>
   </div>
 {% endblock %}
 

tool/template-landing-children.html

@@ -1,6 +1,6 @@
 {% extends "template-base.html" %}
 
-{% block mainclasses %}landing-children padded-main{% endblock %}
+{% block mainclasses %}landing landing-children padded-main{% endblock %}
 
 {% block main %}
   {% if content %}

tool/template-rest-api-tool.html

@@ -1,12 +1,12 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-  <div class="card">
+  <div class="command-list-wrapper">
-    <div class="card-header">
+    <div class="toc-header">
       <h4>API Methods</h4>
     </div>
 
-    <ul class="command-list card-body" id='command_list'>
+    <ul class="command-list" id='command_list'>
     </ul>
   </div>
 {% endblock %}

tool/template-websocket-api-tool.html

@@ -1,11 +1,11 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-  <div class="card">
+  <div class="command-list-wrapper">
-      <div class="card-header">
+      <div class="toc-header">
         <h4>API Methods</h4>
       </div>
-      <ul class="card-body command-list" id="command_list"></ul>
+      <ul class="command-list" id="command_list"></ul>
   </div>
 {% endblock %}