Continued refinement

Homepage icon padding
footer hover
footer border
padding adjustments to re center content

assets/css/devportal.css

@@ -156,10 +156,14 @@ body {
   -webkit-font-smoothing: antialiased;
   font-size: 0.9375rem;
 }
+.row {
+  margin: 0 -1px;
+}
 
 /* Push content below fixed header ------------------------------------------ */
 #main_content_wrapper {
   margin-top: 68px;
+  padding: 0 48px;
 }
 
 /* Fix so anchors don't jump under the fixed header ------------------------- */
@@ -292,7 +296,7 @@ body {
 }
 
 .landing {
-  padding: 0 48px;
+  padding: 0 2px;
 }
 
 .card-grid .section-hero.card {
@@ -357,7 +361,10 @@ body {
 
 .absolute_bottom_footer span {
   margin-right: 25px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
+}
+.xrpl-footer .card-header h5 i {
+  margin-left: 0.2em;
 }
 
 .xrpl-footer .card-grid .card {
@@ -654,7 +661,7 @@ a.current {
 
 .tree_nav {
   top: 48px;
-  padding: 44px 24px 48px 48px;
+  padding: 44px 24px 48px 0;
   background-color: white;
 }
 
@@ -773,7 +780,7 @@ a.current {
   max-height: 85vh;
   top: 48px;
   overflow: auto;
-  padding: 44px 48px 48px 24px;
+  padding: 44px 0 48px 24px;
   border: none;
 }
 
@@ -1002,6 +1009,7 @@ a.current {
 .image-icon {
   width: 60px;
   height: 60px;
+  margin-bottom: 16px;
 }
 
 /* Full-link cards */

assets/vendor/bootstrap.css

@@ -7137,21 +7137,26 @@ h1, h2, h3, h4, h5 {
 /* Some styles that use the colors defined above ---------------------------- */
 h1 a,
 h2 a,
-h3 a {
+h3 a,
+.xrpl-footer h5 a {
   color: #1B1818;
   text-decoration: none; }
 
 h1 a:hover,
 h2 a:hover,
-h3 a:hover {
+h3 a:hover,
+.xrpl-footer h5 a:hover {
   color: #1B1818; }
 
 .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: #676463; }
+
+.landing .curated-links a:hover,
+.landing .children-display a:hover,
+.xrpl-footer a:hover {
   color: #1B1818; }
 
 .navbar .navbar-nav .nav-link {
@@ -7207,12 +7212,14 @@ h3 a:hover {
   color: #676463; }
 
 .xrpl-footer {
-  border-top: 1px solid #1B1818;
   border-bottom: 1px solid #1B1818; }
 
 .xrpl-footer .container-fluid {
   border-bottom: 1px solid #EBE8E7; }
 
+.header-link:hover {
+  color: #1B1818; }
+
 /* Left/right nav color scheme ------------------------------- */
 aside a {
   color: #676463;

tool/template-footer.html

@@ -22,7 +22,7 @@
 
         <div class="card">
           <div class="card-header">
-            <h5><a href="https://ripple.com/" target="_blank">Ripple <i class="fa fa-external-link"></i></a></h5>
+            <h5><a href="https://ripple.com/" target="_blank">Ripple<i class="fa fa-external-link"></i></a></h5>
           </div><!--/.card-header-->
           <div class="card-body">
             <div class="children-display">
@@ -36,7 +36,7 @@
         </div><!--/.card -->
   </section>
 
-  <section class="container-fluid p-5">
+  <section class="container-fluid p-5 pl-sm-0">
 
     <div class="absolute_bottom_footer">
       <span>&copy; XRP Ledger Project 2019</span>

tool/template-home.html

@@ -175,8 +175,10 @@
 
     <div class="card">
       <div class="card-header">
-        <img class="image-icon" src="assets/img/icon-xrp-list-xrp.svg" >
+          <a href="list-xrp-in-your-exchange.html" class="header-link">
-        <h3 class="card-title">List XRP on Your Exchange</h3>
+            <img class="image-icon" src="assets/img/icon-xrp-list-xrp.svg" >
+            <h3 class="card-title">List XRP on Your Exchange</h3>
+        </a>
       </div><!--/.card-header-->
       <div class="card-body">
         <p>Run a digital asset exchange? Follow these steps to add XRP.</p>
@@ -190,8 +192,10 @@
 
     <div class="card">
       <div class="card-header">
-        <img class="image-icon" src="assets/img/icon-xrp-send-xrp.svg" >
+        <a href="send-xrp.html" class="header-link">
-        <h3 class="card-title">Send XRP</h3>
+          <img class="image-icon" src="assets/img/icon-xrp-send-xrp.svg" >
+          <h3 class="card-title">Send XRP</h3>
+        </a>
       </div><!--/.card-header-->
       <div class="card-body">
         <p>Learn how to send test payments right from your browser.</p>
@@ -205,9 +209,11 @@
 
     <div class="card">
       <div class="card-header">
-        <img class="image-icon" src="assets/img/icon-xrp-run-rippled.svg" >
+        <a href="manage-the-rippled-server.html" class="header-link">
-        <h3 class="card-title">Run a rippled Server</h3>
+          <img class="image-icon" src="assets/img/icon-xrp-run-rippled.svg" >
-      </div><!--/.card-header-->
+          <h3 class="card-title">Run a rippled Server</h3>
+        </a>
+        </div><!--/.card-header-->
       <div class="card-body">
         <p>Install, configure, and manage the core server that powers the XRP Ledger.</p>
       </div><!--/.card-body-->

tool/xrpl.scss

@@ -197,22 +197,28 @@ h1, h2, h3, h4, h5 {
 /* Some styles that use the colors defined above ---------------------------- */
 h1 a,
 h2 a,
-h3 a {
+h3 a,
+.xrpl-footer h5 a {
   color: $black;
   text-decoration: none;
 }
 h1 a:hover,
 h2 a:hover,
-h3 a:hover {
+h3 a:hover,
+.xrpl-footer h5 a:hover {
   color: $black;
 }
 
 .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: $gray-600;
+}
+
+.landing .curated-links a:hover,
+.landing .children-display a:hover,
+.xrpl-footer a:hover {
   color: $black;
 }
 
@@ -275,13 +281,16 @@ h3 a:hover {
 }
 
 .xrpl-footer {
-  border-top: 1px solid $black;
   border-bottom: 1px solid $black;
 }
 .xrpl-footer .container-fluid {
   border-bottom: 1px solid $gray-200;
 }
 
+.header-link:hover {
+  color: $black;
+}
+
 /* Left/right nav color scheme ------------------------------- */
 aside a {
   color: $gray-600;