From daab87479d6bc2bb9914667ec4b5081084a1a7fb Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Fri, 4 May 2018 18:01:33 -0700
Subject: [PATCH] More compact spacing, experimental side-icons for home top
 modules

---
 assets/css/devportal.css | 29 +++++++++++++++++------------
 tool/template-home.html  | 28 +++++++++++++++++-----------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index f32a99452d..bec3896ebc 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -433,6 +433,7 @@ a.current {
 .curated-links ol,
 .children-display ul {
   padding-left: 0;
+  margin-bottom: 4px;
 }
 
 .level-1,
@@ -459,9 +460,9 @@ a.current {
 
 .landing .card .level-1 a,
 .landing .card .curated-links li a {
-  padding: 16px 32px 16px 24px;
+  padding: 12px;
   display: block;
-  margin: 0 -24px 0 -24px;
+  margin: 0 -12px 0 -12px;
   font-weight: 400;
 }
 .landing .card .level-1 a:hover,
@@ -474,8 +475,8 @@ a.current {
   content: "\f105"; /* fontawesome angle-right */
   font-family: FontAwesome;
   position: absolute;
-  right: -8px;
-  top: 16px;
+  right: 0;
+  top: 12px;
   color: #0D294E;
 }
 
@@ -773,7 +774,7 @@ a.current {
 
 .landing h3 {
   font-size: 20px;
-  line-height: 24px;
+  line-height: 20px;
   font-weight: 700;
 }
 
@@ -789,7 +790,7 @@ a.current {
 }
 
 .landing a.card:hover {
-  box-shadow: 0px 4px 24px rgba(35, 41, 47, 0.16);
+  box-shadow: 0px 4px 20px rgba(35, 41, 47, 0.16);
 }
 
 .landing .card li {
@@ -802,6 +803,10 @@ a.current {
   border-top-width: 0;
 }
 
+.landing .card-body {
+  padding: 12px;
+}
+
 .landing .card-header,
 .landing .card-footer {
   background: none;
@@ -810,21 +815,21 @@ a.current {
 }
 
 .landing .card-header {
-  padding: 24px;
+  padding: 16px;
 }
 
 .landing .card-header + .card-body {
-  padding: 0 24px 24px 24px;
+  padding: 0 12px 12px 12px;
 }
 
 .landing .card-footer {
-  padding: 0 24px 24px 24px;
+  padding: 0 12px 12px 12px;
 }
 
 .landing .card-header a {
   display: block;
-  margin: -24px;
-  padding: 24px;
+  margin: -12px;
+  padding: 12px;
   border-radius: inherit;
   transition: 0.5s;
 }
@@ -843,7 +848,7 @@ a.current {
 }
 
 .landing .card > .card-img-top {
-  padding: 0 24px;
+  padding: 0 16px;
 }
 
 #home_first_shortcuts .card-img-top {
diff --git a/tool/template-home.html b/tool/template-home.html
index 45442b4a8b..7299ada31b 100644
--- a/tool/template-home.html
+++ b/tool/template-home.html
@@ -16,7 +16,7 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <section class="container-fluid py-3 p-sm-5 splash-head">
+  <section class="container-fluid py-3 p-sm-4 splash-head">
     <h1>Learn. Experiment. Integrate. Contribute.</h1>
     <div class="row">
       <div class="blurb col-sm-12">
@@ -26,14 +26,16 @@
     </div>
   </section>
 
-  <section class="container-fluid py-3 p-sm-5 bg-white" id="home_first_shortcuts">
+  <section class="container-fluid py-3 p-sm-4 bg-white" id="home_first_shortcuts">
       <div class="card-deck mb-4">
 
-          <div class="card">
+          <div class="card-spacer d-none d-xl-block pt-5"><img class="card-img-top" src="assets/img/reference-book.svg" alt="(reference book icon)" /></div>
+
+          <div class="card mr-xl-5">
             <div class="card-header bg-dark">
               <h3 class="card-title"><a href="references.html">Go to the References <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
             </div><!--/.card-header-->
-            <img class="card-img-top" src="assets/img/reference-book.svg" alt="(reference book icon)" />
+            <img class="card-img-top d-xl-none" src="assets/img/reference-book.svg" alt="(reference book icon)" />
             <div class="card-body">
               <div class="curated-links">
                 <ul>
@@ -45,11 +47,13 @@
             </div><!--/.card-body-->
           </div><!--/.card-->
 
-          <div class="card">
+          <div class="card-spacer d-none d-xl-block pt-5"><img class="card-img-top" src="assets/img/airplane.svg" alt="(airplane icon)" /></div>
+
+          <div class="card mr-xl-5">
             <div class="card-header bg-dark">
               <h3 class="card-title">Get Started</h3>
             </div><!--/.card-header-->
-            <img class="card-img-top" src="assets/img/airplane.svg" alt="(airplane icon)" />
+            <img class="card-img-top d-xl-none" src="assets/img/airplane.svg" alt="(airplane icon)" />
             <div class="card-body">
               <div class="curated-links">
                 <ul>
@@ -61,11 +65,13 @@
             </div><!--/.card-body-->
           </div><!--/.card-->
 
+          <div class="card-spacer d-none d-xl-block pt-5"><img class="card-img-top" src="assets/img/map.svg" alt="(map icon)" /></div>
+
           <div class="card">
             <div class="card-header bg-dark">
               <h3 class="card-title"><a href="use-cases.html">View Use Cases <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
             </div><!--/.card-header-->
-            <img class="card-img-top" src="assets/img/map.svg" alt="(map icon)" />
+            <img class="card-img-top d-xl-none" src="assets/img/map.svg" alt="(map icon)" />
             <div class="card-body">
               {% set parent_page = pages|selectattr("name", "equalto", "Use Cases")|first %}
               {% set depth = 1 %}
@@ -77,7 +83,7 @@
 
     </section>
 
-    <section class="container-fluid bg-light py-3 p-sm-5">
+    <section class="container-fluid bg-light py-3 p-sm-4">
       <div class="row">
 
         <div class="col-sm-6">
@@ -115,7 +121,7 @@
       </div><!--/.row-->
     </section>
 
-    <section class="container-fluid py-3 p-sm-5" id="xrp_ledger_intro">
+    <section class="container-fluid py-3 p-sm-4" id="xrp_ledger_intro">
       <h2><a href="xrp-ledger-overview.html">XRP Ledger: A decentralized cryptographic ledger</a></h2>
       <div class="row">
         <div class="blurb col-sm-12">
@@ -207,7 +213,7 @@
 
     </section>
 
-    <section class="container-fluid py-3 p-sm-5 bg-light">
+    <section class="container-fluid py-3 p-sm-4 bg-light">
       <h2>Built on the XRP Ledger</h2>
       <div class="blurb">
           <p>Learn about just a few of the types of integrations developers have built on the XRP Ledger.</p>
@@ -267,7 +273,7 @@
 
     </section>
 
-    <section class="container-fluid related-projects py-3 p-sm-5 bg-white">
+    <section class="container-fluid related-projects py-3 p-sm-4 bg-white">
       <h2>Related Projects</h2>
 
       <div class="row">