From 64f7437d6c95638c7a150d7c85f9691a2a21af0b Mon Sep 17 00:00:00 2001
From: Jake Bonham <jake@docforce.io>
Date: Mon, 13 May 2019 13:50:01 -0700
Subject: [PATCH] Further changes from list

---
 assets/css/devportal.css        | 77 +++++++++++++++++++++------------
 tool/template-breadcrumbs.html  |  2 +-
 tool/template-home.html         | 14 +++---
 tool/template-landing-docs.html |  6 +--
 4 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index b6f5efb242..14b6737ca1 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -54,7 +54,7 @@ th {
 }
 
 .navbar .navbar-nav .nav-link {
-  font-size: 18px;
+  font-size: 1rem;
   line-height: 52px;
   text-decoration: none;
   font-family: 'Space Mono', monospace;
@@ -62,20 +62,23 @@ th {
 
 .navbar .navbar-nav .nav-link:hover {
   background-color: transparent;
-  box-shadow: inset 0 -1px 0 0 #1b1818;
-  color: #1b1818;
+  box-shadow: inset 0 -1px 0 0 #000;
+  color: #000;
   text-decoration: none;
 }
+.navbar .navbar-nav .nav-link:active {
+  color: #000;
+}
 
 .navbar .navbar-nav .active a {
   font-weight: 700;
-  color: #1b1818;
-  box-shadow: inset 0 -1px 0 0 #1b1818;
+  color: #000;
+  box-shadow: inset 0 -1px 0 0 #000;
 }
 .navbar .active-parent a {
   font-weight: 700;
-  color: #1b1818;
-  box-shadow: inset 0 -1px 0 0 #1b1818;
+  color: #000;
+  box-shadow: inset 0 -1px 0 0 #000;
 }
 
 #navbar-search {
@@ -86,6 +89,7 @@ th {
 #topsearchbar {
   padding-right: 60px;
   width: 100%;
+  font-size: 0.875rem;
 }
 
 #navbar-search .btn {
@@ -158,6 +162,11 @@ body {
   font-feature-settings: "liga", "kern";
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
+  font-size: 0.875rem;
+}
+
+a {
+  color: #000;
 }
 
 /* Push content below fixed header ------------------------------------------ */
@@ -210,7 +219,7 @@ body {
 .content a {
   -webkit-transition: color 200ms ease;
   transition: color 200ms ease;
-  color: hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  color: #1a73e8;
   text-decoration: none;
 }
 .content a:hover {
@@ -236,7 +245,7 @@ body {
   margin-top: -80px;
 }
 .content h2 {
-  margin-top: 0px;
+  margin-top: 72px;
   margin-bottom: 24px;
   font-weight: 400;
   line-height: 1.2;
@@ -255,7 +264,7 @@ body {
   font-weight: 700;
 }
 .content h6 {
-  margin-top: 12px
+  margin-top: 12px;
   line-height: 1.2;
   font-weight: 700;
 }
@@ -264,7 +273,7 @@ body {
    kinds are spaced consistently. */
 .content li {
   margin: 6px;
-  line-height: 1.65;
+  margin-top: 24px;
 }
 .content li p {
   margin: 0;
@@ -320,6 +329,14 @@ body {
   padding: 0 48px;
 }
 
+.section-hero.card {
+  padding-left: 0;
+}
+
+section.container-fluid.card-grid.card-grid-3xN.doc-landing-section .card:first-child {
+  padding-left: 0;
+}
+
 /* Vertical numbers --------------------------------------------------------- */
 .flag-vertical {
   position: absolute;
@@ -371,6 +388,13 @@ body {
   font-size: 10px;
 }
 
+.xrpl-footer .card-grid .card {
+  padding: 24px 48px 48px 48px;
+}
+.xrpl-footer .card-grid .card:first-child {
+  padding-left: 0;
+}
+
 /* Callouts ----------------------------------------------------------------- */
 
 .devportal-callout {
@@ -676,7 +700,7 @@ a.current {
 }
 
 #sidenav .sidebar_pagelist a:hover {
-  color: hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  color: #1a73e8;
   padding-left: 34px;
   border-left: 1px solid #1a73e8;
 }
@@ -723,7 +747,7 @@ a.current {
 #sidenav a.active:hover,
 .sidenav_parent a.active,
 .sidenav_parent a.active:hover {
-  color: hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  color: #1a73e8;
 }
 
 #sidenav .card + .card {
@@ -800,7 +824,7 @@ a.current {
 }
 
 #sidenav .card-header .sidenav_cat_toggler:hover {
-  background-color : hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  background-color : #1a73e8;
 }
 
 #sidenav .card-header .sidenav_cat_toggler.collapsed {
@@ -812,8 +836,8 @@ a.current {
 
 .xrp-ledger-dev-portal.sidebar-primary .main {
   z-index: 5;
-  border-left: 1px solid #C9CDD1;
-  border-right: 1px solid #C9CDD1;
+  border-left: 1px solid #eae7e6;
+  border-right: 1px solid #eae7e6;
   padding: 44px 24px 48px;
   min-height: 700px;
 }
@@ -835,8 +859,9 @@ a.current {
   max-height: 85vh;
   top: 48px;
   overflow: auto;
-  padding: 44px 24px 48px;
+  padding: 44px 48px 48px 24px;
   border: none;
+  color: #000;
 }
 
 .right-sidebar .card-header {
@@ -884,7 +909,7 @@ a.current {
   padding: 4px 15px 4px 35px;
   text-indent: -20px;
   font-size: 14px;
-  color: hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  color: #1a73e8;
 }
 
 .card .sidebar_pagelist a.active {
@@ -893,9 +918,9 @@ a.current {
 }
 
 .card .sidebar_pagelist a:hover {
-  color: hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  color: #1a73e8;
   padding-left: 33px;
-  border-left: 2px solid hsla(214.07766990291262, 81.75%, 50.59%, 1.00);
+  border-left: 2px solid #1a73e8;
 }
 
 .subcat-title.active-parent {
@@ -915,7 +940,7 @@ a.current {
   font-size: 18px;
   font-weight: 700;
   padding: 15px 16px 15px 10px;
-  color: #1B1818;
+  color: #000;
 }
 
 /* Edit on GitHub link ------------------------------------------------------ */
@@ -929,9 +954,9 @@ a.current {
 .github-edit-wrap .github-edit {
   background-image: url(../vendor/github-marks/GitHub-Mark-32px.png);
   background-size: 24px 24px;
-  background-position: left 10px center;
+  background-position: left 12px center;
   background-repeat: no-repeat;
-  padding: 8px 10px 8px 40px;
+  padding: 8px 16px 8px 48px;
   color: #777;
   text-decoration: none;
   display: block;
@@ -1043,7 +1068,6 @@ a.current {
   padding: 9px 16px;
   transition: box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px #d3d0cf;
 }
 
 #main_content_wrapper {
@@ -1081,9 +1105,9 @@ a.current {
 #main_content_wrapper .btn-outline-secondary:active,
 .button:hover, #request_button:hover {
   /* Undo Bootstrap styling */
-  color: #1b1818;
+  color: #000;
   background-color: inherit;
-  border: 1px solid #1b1818;
+  border: 1px solid #000;
 }
 
 .btn:not(.external-link)::after,
@@ -1161,7 +1185,6 @@ a.current {
 }
 .landing a.card:hover {
   text-decoration: none;
-  border: 1px solid black;
 }
 .landing a.card:hover h3 {
   text-decoration: underline;
diff --git a/tool/template-breadcrumbs.html b/tool/template-breadcrumbs.html
index 2dd6d6d189..c65fc1a0e0 100644
--- a/tool/template-breadcrumbs.html
+++ b/tool/template-breadcrumbs.html
@@ -1,4 +1,4 @@
-<nav class="breadcrumbs-wrap {% if currentpage.sidebar is defined and currentpage.sidebar == 'disabled' %}p-3 px-sm-4{% else %}p-3{% endif %}" aria-label="breacrumb">
+<nav class="breadcrumbs-wrap {% if currentpage.sidebar is defined and currentpage.sidebar == 'disabled' %} pl-0 pt-5 {% else %}p-3{% endif %}" aria-label="breacrumb">
   <ul class="breadcrumb bg-white">
     <li class="breadcrumb-item"><a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}">Home</a></li>
     {% if currentpage.funnel is defined and currentpage != pages|selectattr('funnel', 'defined_and_equalto', currentpage.funnel)|first %}
diff --git a/tool/template-home.html b/tool/template-home.html
index a49c1a8d47..b6a1dda169 100644
--- a/tool/template-home.html
+++ b/tool/template-home.html
@@ -17,7 +17,7 @@
 
 {% block main %}
   <section class="container-fluid card-grid card-grid-2x2">
-      <div class="section-hero card">
+      <div class="section-hero card pl-0 justify-content-end">
         <div>
           <h1 class="display-4">Powering the Internet of Value.</h1>
           <div class="blurb">
@@ -42,7 +42,7 @@
         </div><!--/.card-footer-->
       </div><!--/.card-->
 
-      <div class="card">
+      <div class="card pr-0">
         <div class="card-header">
           <h3 class="card-title"><a href="concepts.html">Learn How It Works</a></h3>
         </div><!--/.card-header-->
@@ -80,7 +80,7 @@
         </div><!--/.card-footer-->
       </div><!--/.card-->
 
-      <div class="card">
+      <div class="card pr-0">
         <div class="card-header">
           <h3 class="card-title">Explore the XRP Ledger</h3>
         </div><!--/.card-header-->
@@ -97,7 +97,7 @@
   </section><!--/"Above the fold" .card-grid-2x2-->
 
   <section class="container-fluid card-grid">
-    <div class="card">
+    <div class="card pl-0">
       <div class="card-header">
         <h2><a href="/blog/">XRP Ledger Blog</a></h2>
       </div><!--/.card-header-->
@@ -113,7 +113,7 @@
   </section>
 
   <section class="container-fluid card-grid card-grid-2x4" id="xrp_ledger_intro">
-    <div class="card section-hero">
+    <div class="card section-hero pl-0">
       <div class="card-header">
         <h2><a href="xrp-ledger-overview.html">What is the XRP Ledger?</a></h2>
       </div><!--/.card-header-->
@@ -166,7 +166,7 @@
 
 
   <section class="container-fluid card-grid card-grid-2x2">
-    <div class="section-hero card">
+    <div class="section-hero card pl-0">
       <h2>Start BUIDLing</h2>
       <div class="blurb">
         <p>Use these tutorials to get step-by-step guidance to perform common tasks with the XRP Ledger.</p>
@@ -237,7 +237,7 @@
   </section>
 
   <section class="container-fluid related-projects card-grid card-grid-2x1">
-    <div class="section-hero card">
+    <div class="section-hero card pl-0">
       <h2>Related Projects</h2>
       <div class="blurb">
         <p>You're not alone in building the Internet of Value. These projects are proudly collaborating with the XRP Ledger to make all the world's money move like information moves today.</p>
diff --git a/tool/template-landing-docs.html b/tool/template-landing-docs.html
index f6b17dd62f..71acfec973 100644
--- a/tool/template-landing-docs.html
+++ b/tool/template-landing-docs.html
@@ -3,13 +3,13 @@
 {% block mainclasses %}landing{% endblock %}
 
 {% block main %}
-  <section class="container-fluid bg-white p-3 p-sm-4">
+  <section class="container-fluid bg-white pl-0 pb-4 pt-2">
     <h1 class="main-page-header">XRP Ledger Documentation</h1>
     <p class="blurb">Dive into our documentation and start integrating with the XRP Ledger.</p>
     <p class="blurb">Browse by category, or skip straight to the <a href="#full-doc-index">full documentation index</a>.</p>
   </section>
 
-  <section class="container-fluid card-grid card-grid-3xN">
+  <section class="container-fluid card-grid card-grid-3xN doc-landing-section">
     {% set doc_types = [] %}
     {% for page in pages %}
       {% if page.doc_type is defined and page.doc_type not in doc_types %}
@@ -40,7 +40,7 @@
 
   </section>
 
-  <section class="container-fluid p-3 p-sm-4">
+  <section class="container-fluid p-3 p-sm-4 pl-0">
     <h2 id="full-doc-index">Full Documentation Index</h2>
     <div class="row">
       <div class="col-md-8">