From 4f2c3b5391bae2633a40843d7203d67e47f1cf70 Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Tue, 14 May 2019 01:36:23 -0700
Subject: [PATCH] Design: clean up some spacing issues

---
 assets/css/devportal.css              | 24 +++++++++++++++++-------
 assets/vendor/bootstrap.css           |  2 ++
 tool/template-breadcrumbs.html        |  2 +-
 tool/template-home.html               | 18 +++++++++---------
 tool/template-landing-docs.html       |  4 ++--
 tool/template-landing-references.html |  4 ++--
 tool/xrpl.scss                        |  2 ++
 7 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index cdb785890b..c21e6dbecd 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -291,12 +291,25 @@ body {
   padding: 0 48px;
 }
 
-.section-hero.card {
+.card-grid .section-hero.card {
   padding-left: 0;
 }
 
+.container-fluid.section-hero {
+  padding: 48px 0;
+}
+
+.doc-index {
+  padding: 48px 0;
+}
+
 @media (max-width: 991px) {
-  section.container-fluid.card-grid.card-grid-3xN.doc-landing-section .card {
+  .landing .card-grid .card,
+  .landing .card-grid .card-body,
+  .landing .card-grid .card-header {
+    padding-left: 0;
+  }
+  .landing .doc-index {
     padding-left: 0;
   }
 }
@@ -539,10 +552,7 @@ a.current {
 .landing .level-1,
 .landing .level-2,
 .landing .curated-links li {
-  font-weight: 400;
-  font-size: 1rem;
   margin-top: 0;
-  position: relative;
 }
 
 .landing .card .level-1 a,
@@ -566,7 +576,7 @@ a.current {
   margin-top: 1rem;
 }
 
-.blurb {
+.section-hero .blurb {
   font-size: 1.2em;
   line-height: 1.71em;
 }
@@ -977,7 +987,7 @@ a.current {
   padding-right: 1px;
 }
 
-.landing .card > .card-img-top {
+.landing .card .card-img-top {
   width: 60px;
   height: 60px;
   margin-left: 0;
diff --git a/assets/vendor/bootstrap.css b/assets/vendor/bootstrap.css
index 5cfc36feb2..73fbf2d84f 100644
--- a/assets/vendor/bootstrap.css
+++ b/assets/vendor/bootstrap.css
@@ -7147,6 +7147,8 @@ h3 a:hover {
 
 .landing .curated-links a,
 .landing .curated-links a:hover,
+.landing .children-display a,
+.landing .children-display a:hover,
 .landing a.card,
 .xrpl-footer a {
   color: #1B1818; }
diff --git a/tool/template-breadcrumbs.html b/tool/template-breadcrumbs.html
index c65fc1a0e0..16ad404bbf 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' %} pl-0 pt-5 {% else %}p-3{% endif %}" aria-label="breacrumb">
+<nav class="breadcrumbs-wrap {% if currentpage.sidebar is defined and currentpage.sidebar == 'disabled' %} px-0 pt-5 pb-3 {% 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 6b5977ce7e..69239693a0 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 pl-0 justify-content-end">
+      <div class="section-hero card justify-content-end">
         <div>
           <h1 class="display-4">Powering the Internet of Value.</h1>
           <div class="blurb">
@@ -123,42 +123,42 @@
     </div><!--/.section-hero-->
 
     <a href="xrp-ledger-overview.html#the-digital-asset-for-payments" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-digital-asset.svg" alt="(digital asset icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-digital-asset.svg" alt="(digital asset icon)" /></div>
       <div class="card-footer"><h3>The Digital Asset for Payments</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#censorship-resistant-transaction-processing" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-censorship-resistant.svg" alt="(censorship resistance icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-censorship-resistant.svg" alt="(censorship resistance icon)" /></div>
       <div class="card-footer"><h3>Censorship-Resistant Transaction Processing</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#fast-efficient-consensus-algorithm" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-fast-algorithm.svg" alt="(consensus algorithm icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-fast-algorithm.svg" alt="(consensus algorithm icon)" /></div>
       <div class="card-footer"><h3>Fast, Efficient Consensus Algorithm</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#finite-xrp-supply" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-finite.svg" alt="(xrp supply icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-finite.svg" alt="(xrp supply icon)" /></div>
       <div class="card-footer"><h3>Finite XRP Supply</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#responsible-software-governance" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-responsible.svg" alt="(governance icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-responsible.svg" alt="(governance icon)" /></div>
       <div class="card-footer"><h3>Responsible Software Governance</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#secure-adaptable-cryptography" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-secure.svg" alt="(cryptography icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-secure.svg" alt="(cryptography icon)" /></div>
       <div class="card-footer"><h3>Secure, Adaptable Cryptography</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#modern-features-for-smart-contracts" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-modern-smart-contracts.svg" alt="(smart contracts icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-modern-smart-contracts.svg" alt="(smart contracts icon)" /></div>
       <div class="card-footer"><h3>Modern Features for Smart Contracts</h3></div>
     </a><!--/.card-->
 
     <a href="xrp-ledger-overview.html#on-ledger-decentralized-exchange" class="card">
-      <img class="card-img-top" src="assets/img/icon-xrp-on-ledger-decentralized.svg" alt="(decentralized exchange icon)" />
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-on-ledger-decentralized.svg" alt="(decentralized exchange icon)" /></div>
       <div class="card-footer"><h3>On-Ledger Decentralized Exchange</h3></div>
     </a><!--/.card-->
 
diff --git a/tool/template-landing-docs.html b/tool/template-landing-docs.html
index 71acfec973..5b7260872d 100644
--- a/tool/template-landing-docs.html
+++ b/tool/template-landing-docs.html
@@ -3,7 +3,7 @@
 {% block mainclasses %}landing{% endblock %}
 
 {% block main %}
-  <section class="container-fluid bg-white pl-0 pb-4 pt-2">
+  <section class="container-fluid bg-white section-hero 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>
@@ -40,7 +40,7 @@
 
   </section>
 
-  <section class="container-fluid p-3 p-sm-4 pl-0">
+  <section class="container-fluid doc-index">
     <h2 id="full-doc-index">Full Documentation Index</h2>
     <div class="row">
       <div class="col-md-8">
diff --git a/tool/template-landing-references.html b/tool/template-landing-references.html
index ac048adb0c..6f5d59dc53 100644
--- a/tool/template-landing-references.html
+++ b/tool/template-landing-references.html
@@ -3,7 +3,7 @@
 {% block mainclasses %}landing{% endblock %}
 
 {% block main %}
-  <section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
+  <section class="container-fluid bg-white section-hero">
     <h1 class="main-page-header">References</h1>
     <p class="blurb">{{currentpage.blurb}}</p>
     <p class="blurb">Or, skip ahead to the <a href="#full-reference-index">Full Reference Index</a>.</p>
@@ -52,7 +52,7 @@
 
   </section>
 
-  <section class="container-fluid p-3 p-sm-4">
+  <section class="container-fluid doc-index">
     <h2 id="full-reference-index">Full Reference Index</h2>
     <div class="row">
       <div class="col-md-8">
diff --git a/tool/xrpl.scss b/tool/xrpl.scss
index 2540ea9339..fe29498e35 100644
--- a/tool/xrpl.scss
+++ b/tool/xrpl.scss
@@ -208,6 +208,8 @@ h3 a:hover {
 
 .landing .curated-links a,
 .landing .curated-links a:hover,
+.landing .children-display a,
+.landing .children-display a:hover,
 .landing a.card,
 .xrpl-footer a {
   color: $black;