Style breakpoints, etc. cleanup

assets/css/devportal.css

@@ -79,7 +79,7 @@
 }
 
 /* Images should not exceed the main column */
-.xrp-ledger-dev-portal .content img {
+.content img {
   max-width: 100%;
   height: auto;
 }
@@ -130,13 +130,13 @@
 
 
 /* "Button-style" links should look like buttons, not links */
-.xrp-ledger-dev-portal a.button {
+a.button {
   cursor: pointer;
   text-decoration: none !important;
 }
 
 /* Code Tabs stuff */
-.xrp-ledger-dev-portal .multicode {
+.multicode {
   color: #000;
   margin: 12px 0px 0px 0px;
   padding: 0 0 0 0;
@@ -144,15 +144,15 @@
   padding-left: 10px;
   position: relative;
 }
-.xrp-ledger-dev-portal .multicode ul {
+.multicode ul {
   margin: 0 !important;
   padding: 0;
 }
-.xrp-ledger-dev-portal .multicode pre {
+.multicode pre {
   padding-top: 0;
   clear: both;
 }
-.xrp-ledger-dev-portal .multicode li {
+.multicode li {
   display: block;
   float: left;
   overflow: hidden;
@@ -160,12 +160,12 @@
   margin-right: 5px;
   border-top: 1px solid #DBDDE2;
 }
-.xrp-ledger-dev-portal .multicode ul > li:before {
+.multicode ul > li:before {
   background: none;
   border: none;
 }
-.xrp-ledger-dev-portal .multicode a,
+.multicode a,
-.xrp-ledger-dev-portal a.current {
+a.current {
   color: black;
   background: #DFE2E7;
   border: 1px solid #DBDDE2;
@@ -173,18 +173,18 @@
   margin: 0px;
   text-decoration: none;
 }
-.xrp-ledger-dev-portal .multicode a.current {
+.multicode a.current {
   background: #fff;
   border-bottom: 1px solid #fff;
   color: black;
 }
-.xrp-ledger-dev-portal .multicode a:hover {
+.multicode a:hover {
   color: black;
   background: white;
 }
 /* End of code tabs stuff */
 
-.xrp-ledger-dev-portal .button {
+.button {
   border-radius: 5px;
   background-color: #27a2db;
   padding: 5px 20px;
@@ -202,45 +202,42 @@
   -webkit-transition: .5s;
   transition: .5s;
 }
-.xrp-ledger-dev-portal .button:hover {
+.button:hover {
   background-color: #43bded;
   -o-transition: .5s;
   -webkit-transition: .5s;
   transition: .5s;
 }
-.xrp-ledger-dev-portal pre {
+pre {
   overflow: visible;
   word-wrap: normal;
 }
-.xrp-ledger-dev-portal pre code {
+pre code {
   white-space: pre;
 }
-.xrp-ledger-dev-portal .code_sample pre {
+.code_sample pre {
   background: none;
   border: none;
   border-radius: 0;
 }
-.xrp-ledger-dev-portal .code_sample pre code {
+.code_sample pre code {
   overflow: auto;
   max-height: 14em;
   background-color: #f5f5f5;
   border: 1px solid #cccccc;
   border-radius: 4px;
 }
-.xrp-ledger-dev-portal .code_sample pre code.expanded {
+.code_sample pre code.expanded {
   overflow: visible;
   max-height: none;
   position: absolute;
   min-width: 661px;
 }
-.xrp-ledger-dev-portal .code_sample .code_toggler {
+.code_sample .code_toggler {
   position: absolute;
   bottom: 0;
   right: 0;
 }
-.xrp-ledger-dev-portal .wrap.container {
-  margin-top: 106px;
-}
 .xrp-ledger-dev-portal.sidebar-primary .sidebar {
   padding-right: 0;
   padding-left: 0;
@@ -250,7 +247,7 @@
   border-left: 1px solid #cccccc;
   padding-left: 40px;
 }
-.xrp-ledger-dev-portal .content {
+.content {
   padding-bottom: 50px;
 }
 #dactyl_toc_sidebar a {
@@ -259,34 +256,34 @@
 #dactyl_toc_sidebar a:hover {
   text-decoration: underline;
 }
-.xrp-ledger-dev-portal .level-1 {
+.level-1 {
   margin-top: 15px;
   padding-left: 15px;
   font-weight: bold;
 }
-.xrp-ledger-dev-portal .level-1:first-child {
+.level-1:first-child {
   margin-top: 0;
 }
-.xrp-ledger-dev-portal .level-2 {
+.level-2 {
   padding-left: 30px;
 }
-.xrp-ledger-dev-portal .level-3 {
+.level-3 {
   padding-left: 45px;
 }
-.xrp-ledger-dev-portal .level-3 a {
+.level-3 a {
   color: #888;
 }
-.xrp-ledger-dev-portal .level-3 a:hover {
+.level-3 a:hover {
   color: #333;
 }
 
-.xrp-ledger-dev-portal .dev_nav_sidebar {
+.dev_nav_sidebar {
   padding-left: 10px;
   padding-top: 0;
   list-style-type: none;
   margin-bottom: 0;
 }
-.xrp-ledger-dev-portal .dev_nav_sidebar li:before {
+.dev_nav_sidebar li:before {
   content: "\f105"; /* fontawesome angle-right */
   font-family: FontAwesome;
   position: relative;
@@ -294,33 +291,33 @@
   margin-right: -5px;
 }
 
-.xrp-ledger-dev-portal .dev_nav_wrapper {
+.dev_nav_wrapper {
   position: fixed;
   width: 100%;
   overflow-y: scroll;
   top: 130px;
 }
-.xrp-ledger-dev-portal td {
+td {
   border: 1px solid #dbdde2;
   padding: 0.2em;
   vertical-align: text-top;
 }
-.xrp-ledger-dev-portal th {
+th {
   padding: 0.2em;
 }
-.xrp-ledger-dev-portal .content a[title="Source"] {
+.content a[title="Source"] {
   float: right;
   padding-left: 20px;
 }
-.xrp-ledger-dev-portal .content table {
+.content table {
   clear: right;
 }
-.xrp-ledger-dev-portal .main h1:before,
+.main h1:before,
-.xrp-ledger-dev-portal .main h2:before,
+.main h2:before,
-.xrp-ledger-dev-portal .main h3:before,
+.main h3:before,
-.xrp-ledger-dev-portal .main h4:before,
+.main h4:before,
-.xrp-ledger-dev-portal .main h5:before,
+.main h5:before,
-.xrp-ledger-dev-portal .main h6:before,
+.main h6:before,
 #main_content_wrapper:before {
   display: block;
   content: " ";
@@ -329,158 +326,6 @@
   visibility: hidden;
 }
 
-@media (min-width: 1200px) {
-  .xrp-ledger-dev-portal #page-toc-wrapper {
-    float: right;
-    margin-left: 15px;
-  }
-  .draft-warning {
-    left: calc(calc(calc(100% - 1170px) / 2) + 140px);
-  }
-}
-@media (min-width: 1400px) {
-  .xrp-ledger-dev-portal .container {
-    margin-right: calc(calc(calc(100% - 1370px) / 2) + 195px);
-  }
-  .xrp-ledger-dev-portal #page-toc-wrapper {
-    position: fixed;
-    right: 10px;
-    top: 80px;
-    max-width: calc(77% - 970px);
-    max-height: calc(100% - 150px);
-    overflow-y: auto;
-  }
-  .draft-warning {
-    left: calc(calc(calc(100% - 1370px) / 2) + 90px);
-  }
-}
-@media (max-width: 1200px) {
-  .xrp-ledger-dev-portal #page-toc-wrapper {
-    float: right;
-    margin-left: 15px;
-  }
-  .xrp-ledger-dev-portal .dev_nav_wrapper {
-    max-width: 290px;
-  }
-  .draft-warning {
-    left: calc(calc(calc(100% - 870px) / 2) + 90px);
-  }
-}
-@media (max-width: 992px) {
-  .xrp-ledger-dev-portal #page-toc-wrapper {
-    position: static;
-    float: none;
-    max-width: none;
-  }
-  .xrp-ledger-dev-portal .dev_nav_wrapper {
-    max-width: 230px;
-  }
-  .draft-warning {
-    left: 140px;
-  }
-}
-@media (max-width: 768px) {
-  .xrp-ledger-dev-portal .dev_nav_wrapper,
-  .xrp-ledger-dev-portal .sidebar {
-    display: block;
-    clear: both;
-    overflow-y: inherit;
-    position: static;
-    max-width: 100%;
-  }
-  .xrp-ledger-dev-portal .main {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    overflow: hidden;
-  }
-  .github-edit-wrap {
-    display: none;
-  }
-  .nav {
-    min-width: 350px;
-  }
-  .nav .breadcrumb {
-    display: none;
-  }
-}
-@media (max-width: 480px) {
-  .xrp-ledger-dev-portal html {
-    overflow-x: hidden !important;
-  }
-}
-@media print {
-  .xrp-ledger-dev-portal {
-    /* undo code tabs */
-    /* wrap code, not scroll */
-    /* Source URLs are too big to float */
-    /* Show URLs after links - even for anchors */
-    /* Drop header, footer, google translate */
-    /* table of contents can't scroll */
-    /* better margins on main content */
-    /* crazy print-section-numbering idea */
-  }
-  .xrp-ledger-dev-portal .multicode > div {
-    display: block !important;
-  }
-  .xrp-ledger-dev-portal .multicode > ul {
-    display: none !important;
-  }
-  .xrp-ledger-dev-portal .multicode > em,
-  .xrp-ledger-dev-portal .multicode > p > em {
-    display: block !important;
-    page-break-after: avoid;
-  }
-  .xrp-ledger-dev-portal .multicode > p {
-    display: block !important;
-  }
-  .xrp-ledger-dev-portal pre {
-    white-space: pre-wrap;
-    max-height: none !important;
-    overflow: visible;
-    page-break-inside: auto;
-    word-wrap: break-word;
-  }
-  .xrp-ledger-dev-portal pre code {
-    white-space: pre-wrap !important;
-  }
-  .xrp-ledger-dev-portal .content a[title="Source"] {
-    float: none;
-  }
-  .xrp-ledger-dev-portal header,
-  .xrp-ledger-dev-portal footer {
-    display: none;
-  }
-  .xrp-ledger-dev-portal #goog-gt-tt {
-    display: none;
-  }
-  .xrp-ledger-dev-portal .wrap.container {
-    margin-top: 0 !important;
-  }
-  .xrp-ledger-dev-portal .dev_nav_wrapper {
-    position: static !important;
-  }
-  .xrp-ledger-dev-portal .sidebar:before {
-    display: none !important;
-  }
-  .xrp-ledger-dev-portal .sidebar {
-    padding-top: 0 !important;
-    display: block !important;
-    float: none !important;
-  }
-  .xrp-ledger-dev-portal h1 {
-    page-break-before: always;
-  }
-  .xrp-ledger-dev-portal .main {
-    float: none !important;
-    width: 85% !important;
-    border-left: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    display: block !important;
-    overflow: visible !important;
-  }
-}
-
 /*------------- Code Tabs -----------------------------------------*/
 .multicode {
 	color: #000;
@@ -536,6 +381,7 @@
 
 .navbar-brand {
   text-decoration: none;
+  white-space: pre;
 }
 
 .navbar-default .logo {
@@ -572,6 +418,7 @@
 #main_content_wrapper {
   margin-top: 67px;
   padding-left: 0;
+  padding-right: 0;
 }
 
 .jump-to-top {
@@ -591,25 +438,26 @@
   }
 }
 
-.xrp-ledger-dev-portal .breadcrumb {
+.breadcrumb {
   margin: 0;
   padding: 15px;
+  padding-left: 5px;
   background: transparent;
   float: left;
   vertical-align: middle;
 }
 
-.xrp-ledger-dev-portal .breadcrumb li {
+.breadcrumb li {
   margin: 0;
   margin-bottom: -4px;
   line-height: 36px;
 }
-.xrp-ledger-dev-portal .breadcrumb > li + li:before {
+.breadcrumb > li + li:before {
     content: "\f105"; /* fontawesome angle-right */
     font-family: FontAwesome;
     padding-right: 5px;
 }
-.xrp-ledger-dev-portal .breadcrumb > li.active {
+.breadcrumb > li.active {
   color: #666;
 }
 
@@ -722,41 +570,49 @@
 .github-edit-wrap {
   position: absolute;
   right: 0;
+  background-image: linear-gradient(180deg, #fafafa 0%, #ddd 90%);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 15px;
+}
+.github-edit-wrap:hover {
+  border-color: #777;
+}
+.github-edit-wrap:active {
+  background-image: linear-gradient(180deg, #ddd 0%, #fafafa 90%);
 }
 .github-edit-wrap .github-edit {
-  background-color: black;
+  /* background-color: black; */
-  background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
+  background-image: url(../vendor/github-marks/GitHub-Mark-32px.png);
-  background-position: left center;
+  background-size: 24px 24px;
+  background-position: left 5px center;
   background-repeat: no-repeat;
-  color: white;
+  padding: 8px 8px 8px 34px;
-  border-radius: 8px;
+  color: #777;
-  margin: 10px;
-  float: right;
-  padding: 10px 20px 10px 38px;
   text-decoration: none;
-}
+  font-size: 13px;
-.github-edit-wrap .github-edit:hover {
+  display: block;
-  text-decoration: underline;
 }
 
-.build-index .top {
+.portal-index ul {
-    text-indent: -20px;
-}
-
-.build-index ul {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     padding: 0;
 }
 
-.build-index ul li {
+.portal-index li {
     font-size: 14px;
     list-style: outside none none;
     padding: 5px;
     padding-left: 25px;
+    text-indent: 20px;
 }
 
-.build-index .dev_heading {
+.portal-index li.top {
+    text-indent: 0;
+}
+
+.portal-index .dev_heading {
     font-family: "Open Sans",sans-serif;
     letter-spacing: 0.04em;
     font-weight: 600;
@@ -764,7 +620,7 @@
     text-decoration: none;
     color: #202020;
 }
-.build-index a.dev_heading:hover {
+.portal-index a.dev_heading:hover {
   color: #27a2db;
   text-decoration: underline;
 }
@@ -776,20 +632,21 @@
   border-top: 1px solid #777;
 }
 
-.page-build .related-projects {
+.related-projects {
-  float: right;
+  position: absolute;
+  top: 70px;
+  right: 15px;
   width: 375px;
   border: 1px solid #777;
   border-radius: 5px;
-  margin-top: 50px;
 }
-.page-build .related-projects a {
+.related-projects a {
   text-decoration: none;
 }
-.page-build .related-projects .project {
+.related-projects .project {
   clear: left;
 }
-.page-build .related-projects h3 {
+.related-projects h3 {
   margin: 0;
   padding: 5px 15px;
   border-bottom: 1px dashed #777;
@@ -803,7 +660,7 @@
   display: block;
   font-size: 12px;
 }
-.page-build .related-projects p {
+.related-projects p {
   margin: 10px;
 }
 .related-projects .project-icon {
@@ -811,3 +668,188 @@
   float: left;
   margin-right: 10px;
 }
+
+/* Responsive design for different viewscreens -------------------------------*/
+@media (min-width: 1200px) {
+  #page-toc-wrapper {
+    float: right;
+    margin-left: 15px;
+  }
+  .draft-warning {
+    left: calc(calc(calc(100% - 1170px) / 2) + 140px);
+  }
+}
+@media (min-width: 1400px) {
+  .container {
+    margin-right: calc(calc(calc(100% - 1370px) / 2) + 195px);
+  }
+  #page-toc-wrapper {
+    position: fixed;
+    right: 10px;
+    top: 80px;
+    max-width: calc(75% - 970px);
+    max-height: calc(100% - 150px);
+    overflow-y: auto;
+  }
+  .draft-warning {
+    left: calc(calc(calc(100% - 1370px) / 2) + 140px);
+  }
+}
+@media (max-width: 1200px) {
+  #page-toc-wrapper {
+    float: right;
+    margin-left: 15px;
+  }
+  .dev_nav_wrapper {
+    max-width: 290px;
+  }
+  .draft-warning {
+    left: calc(calc(calc(100% - 870px) / 2) + 90px);
+  }
+
+}
+@media (max-width: 992px) {
+  #page-toc-wrapper {
+    position: static;
+    float: none;
+    max-width: none;
+  }
+  .dev_nav_wrapper {
+    max-width: 230px;
+  }
+  .draft-warning {
+    left: 140px;
+  }
+
+  /* Move "Related Projects" to bottom */
+  .related-projects {
+    position: static;
+    width: auto;
+    border: none;
+    margin-top: 0;
+  }
+  .related-projects .project-icon {
+    display: none;
+  }
+  .related-projects h3 {
+    padding: inherit;
+    border-bottom: none;
+    margin-top: 50px;
+  }
+  .related-projects .project-name,
+  .related-projects .login-required {
+    display: inline;
+    font-size: inherit;
+  }
+  .related-projects p {
+    margin-left: 25px;
+  }
+  .related-projects .project-summary {
+    padding-left: 20px;
+  }
+}
+@media (max-width: 768px) {
+  #main_content_wrapper {
+    margin-top: 0;
+  }
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: -70px;
+  }
+  .dev_nav_wrapper,
+  .sidebar {
+    display: block;
+    clear: both;
+    overflow-y: inherit;
+    position: static;
+    max-width: 100%;
+  }
+  .main {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    overflow: hidden;
+  }
+  .github-edit-wrap {
+    display: none;
+  }
+  .nav {
+    min-width: 350px;
+  }
+  .nav .breadcrumb .crumb-top:before {
+    display: none;
+  }
+}
+@media (max-width: 480px) {
+  html {
+    overflow-x: hidden !important;
+  }
+}
+@media print {
+  {
+    /* undo code tabs */
+    /* wrap code, not scroll */
+    /* Source URLs are too big to float */
+    /* Show URLs after links - even for anchors */
+    /* Drop header, footer, google translate */
+    /* table of contents can't scroll */
+    /* better margins on main content */
+    /* crazy print-section-numbering idea */
+  }
+  .multicode > div {
+    display: block !important;
+  }
+  .multicode > ul {
+    display: none !important;
+  }
+  .multicode > em,
+  .multicode > p > em {
+    display: block !important;
+    page-break-after: avoid;
+  }
+  .multicode > p {
+    display: block !important;
+  }
+  pre {
+    white-space: pre-wrap;
+    max-height: none !important;
+    overflow: visible;
+    page-break-inside: auto;
+    word-wrap: break-word;
+  }
+  pre code {
+    white-space: pre-wrap !important;
+  }
+  .content a[title="Source"] {
+    float: none;
+  }
+  header,
+  footer {
+    display: none;
+  }
+  #goog-gt-tt {
+    display: none;
+  }
+  .dev_nav_wrapper {
+    position: static !important;
+  }
+  .sidebar:before {
+    display: none !important;
+  }
+  .sidebar {
+    padding-top: 0 !important;
+    display: block !important;
+    float: none !important;
+  }
+  h1 {
+    page-break-before: always;
+  }
+  .main {
+    float: none !important;
+    width: 85% !important;
+    border-left: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: block !important;
+    overflow: visible !important;
+  }
+}

assets/css/ripple.css

@@ -3189,7 +3189,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .container-fluid > .navbar-header,
 .container > .navbar-collapse,
 .container-fluid > .navbar-collapse {
-  margin-right: -15px;
   margin-left: -15px;
 }
 @media (min-width: 992px) {

tool/template-base.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
 
-    <title>{{ currentpage.name }} - XRP Ledger Developer Portal</title>
+    <title>{{ currentpage.name }} - XRP Ledger Dev Portal</title>
 
     <!--[if lt IE 9]>
       <script src="/dist/js/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -40,19 +40,16 @@
   <header role="banner" class="banner navbar navbar-default navbar-fixed-top initial_header">
     <div class="container">
       <div class="navbar-header">
-          <a href="index.html" class="navbar-brand">
+          <a href="index.html" class="navbar-brand"><img src="assets/img/dev-logo.png" class="logo" width="36" height="36" /><span class="brand-text">XRP Ledger Dev Portal</span></a>
-            <img src="assets/img/ripple-logo-color.png" class="logo">
-            <span class="brand-text">XRP Developers</span>
-          </a>
       </div><!-- /.navbar-header -->
       <div class="nav">
         {% block breadcrumbs %}
             <ul class="breadcrumb">
-              <li><a href="index.html" style="display: none;">&nbsp;</a></li>
+              <li class="crumb-top"><a href="index.html" style="display: none;">&nbsp;</a></li>
               {% if currentpage.category %}
-              <li class="active"><a class="dev_heading" href="{{ (pages|selectattr('category', 'equalto', currentpage.category)|first).html }}">{{ currentpage.category }}</a></li>
+              <li class="active crumb-category"><a href="{{ (pages|selectattr('category', 'equalto', currentpage.category)|first).html }}">{{ currentpage.category }}</a></li>
               {% endif %}
-              <li class="active">{{ currentpage.name }}</li>
+              <li class="active crumb-current">{{ currentpage.name }}</li>
             </ul>
         {% endblock %}
         <div class="draft-warning">DRAFT PAGE</div>
@@ -77,7 +74,7 @@
       <aside class="sidebar" role="complementary">
           {% block sidebar %}{% endblock %}
       </aside>
-      <main class="main" role="main">
+      <main class="main" role="main" id="main_content_body">
           {% block main %}{% endblock %}
       </main>
   </div>

tool/template-footer.html

@@ -6,6 +6,7 @@
                     <span>&copy; 2013 - 2018 Ripple. All Rights Reserved.</span>
                     <span><a href="https://ripple.com/terms-of-use/">Terms</a></span>
                     <span><a href="https://ripple.com/privacy-policy/">Privacy</a></span>
+                    <span><a href="https://raw.githubusercontent.com/ripple/ripple-dev-portal/master/LICENSE">License</a></span>
                 </div>
             </div><!-- /.absolute_bottom_footer -->
 

tool/template-index.html

@@ -8,36 +8,15 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
-
-    <link href="assets/css/landing.css" rel="stylesheet">
-
 {% endblock %}
 
-{% block bodyclasses %}client-portal-docs page-build no-sidebar{% endblock %}
+{% block bodyclasses %}xrp-ledger-dev-portal no-sidebar{% endblock %}
 
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <div class="container build-index">
+  <div class="container portal-index">
-    <aside class="related-projects">
+    <h2>XRP Ledger Documentation</h2>
-      <h3>Related Projects</h3>
-      <div class="project">
-        <p><a class="client-portal-link" href="https://clients.ripple.com/">
-          <img class="project-icon" src="assets/img/RippleNet-condensed.svg" />
-          <span class="project-name">Ripple Client Portal</span>
-          <span class="login-required">(login required)</span>
-        </a></p>
-        <p>For financial institutions using Ripple's proprietary solutions to send money globally.</p>
-      </div>
-      <div class="project">
-        <p><a class="interledger-link" href="https://interledger.org/">
-            <img class="project-icon" src="assets/img/ilp_logo.svg" />
-            <span class="project-name">Interledger</span>
-        </a></p>
-        <p>An open protocol suite for connecting all forms of digital money.</p>
-    </aside>
-
-    <h2>XRP Ledger Documentation Table of Contents</h2>
     <div class="row">
       <div class="col-md-8">
         {% for cat in categories %}
@@ -54,6 +33,24 @@
     </div>
   </div>
 
+  <aside class="related-projects">
+    <h3>Related Projects</h3>
+    <div class="project">
+      <p><a class="client-portal-link" href="https://clients.ripple.com/">
+        <img class="project-icon" src="assets/img/RippleNet-condensed.svg" />
+        <span class="project-name">Ripple Client Portal</span>
+        <span class="login-required">(login required)</span>
+      </a></p>
+      <p class="project-summary">For financial institutions using Ripple's proprietary solutions to send money globally.</p>
+    </div>
+    <div class="project">
+      <p><a class="interledger-link" href="https://interledger.org/">
+          <img class="project-icon" src="assets/img/ilp_logo.svg" />
+          <span class="project-name">Interledger</span>
+      </a></p>
+      <p class="project-summary">An open protocol suite for connecting all forms of digital money.</p>
+  </aside>
+
   <!-- Disclaimer block -->
   <div class="container build-disclaimer">
     <p>

tool/template-sidebar_nav.html

@@ -16,7 +16,7 @@
           {% for page in pages %}
             {% if page.category == cat %}
               {% if page == currentpage %}
-              <li><a class="active" href="{{ page.html }}">{{ page.name }}</a></li>
+              <li><a class="active" href="#main_content_body">{{ page.name }}</a></li>
               {% else %}
               <li><a href="{{ page.html }}">{{ page.name }}</a></li>
               {% endif %}