From 0f5512c1226b4297b30fa15c1b96690ec4a89fd6 Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Thu, 2 May 2019 17:10:55 -0700
Subject: [PATCH] Footer styles.

---
 assets/css/devportal.css    | 76 ++++++++-----------------------------
 assets/vendor/bootstrap.css | 15 +++++++-
 tool/template-footer.html   | 59 +++++++++++++++-------------
 tool/xrpl.scss              | 19 +++++++++-
 4 files changed, 81 insertions(+), 88 deletions(-)

diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index 96dc52678c..b12be992a1 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -208,61 +208,22 @@ th {
 
 /* Footer ------------------------------------------------------------------- */
 .build-disclaimer {
-  font-size: 10pt;
+  font-size: 10px;
 }
-
-.ripple-footer {
+.xrpl-footer h5 {
   font-size: 14px;
-  background-position-y: -60px;
+}
+.xrpl-footer li {
+  font-size: 12px;
+}
+.xrpl-footer .card li a {
+  font-weight: 400;
+  font-family: 'Space Mono', monospace;
 }
 
-.ripple-footer a {
-  color: #999999;
-  -o-transition: .5s;
-  -ms-transition: .5s;
-  -moz-transition: .5s;
-  -webkit-transition: .5s;
-  transition: .5s;
-  font-weight: 500;
-}
-.ripple-footer a:hover {
-  text-decoration: underline;
-  color: white;
-}
-
-.ripple-footer hr {
-  border-top: 1px solid #999999;
-}
-
-.ripple-footer h5 a {
-  color: #ffffff;
-  letter-spacing: .04em;
-  text-decoration: none;
-  padding-bottom: 0.5rem;
-}
-.ripple-footer h5 a:hover {
-  text-decoration: underline;
-}
 .absolute_bottom_footer span {
   margin-right: 25px;
-}
-
-.foot-nav-col .children-display li {
-  list-style-type: none;
-  margin-left: 0;
-  font-size: 14px;
-}
-
-.foot-nav-col {
-  border-left: 1px solid #eae7e6;
-  border-right: 1px solid #eae7e6;
-}
-
-.foot-nav-col:first-of-type {
-  border-left: 0;
-}
-.foot-nav-col:last-of-type {
-  border-right: 0;
+  font-size: 10px;
 }
 
 /* Callouts ----------------------------------------------------------------- */
@@ -836,7 +797,8 @@ a.current {
   overflow-x: auto;
 }
 
-.landing .card li {
+.landing .card li,
+.xrpl-footer .card li {
   list-style-type: none;
   margin-left: 0;
 }
@@ -851,13 +813,15 @@ a.current {
 }
 
 .landing .card-header,
-.landing .card-footer {
+.landing .card-footer,
+.xrpl-footer .card-header {
   background: none;
   border-bottom: none;
   border-top: none;
 }
 
-.landing .card-header {
+.landing .card-header,
+.xrpl-footer .card-header {
   padding: 8px;
 }
 
@@ -865,14 +829,6 @@ a.current {
   padding: 8px;
 }
 
-.landing .card-header a {
-  display: block;
-  margin: -12px;
-  padding: 12px;
-  border-radius: inherit;
-  transition: 0.5s;
-}
-
 .landing .card-body > p {
   padding: 0;
   font-size: 18px;
diff --git a/assets/vendor/bootstrap.css b/assets/vendor/bootstrap.css
index ba246f8cfe..bedcb86063 100644
--- a/assets/vendor/bootstrap.css
+++ b/assets/vendor/bootstrap.css
@@ -7161,7 +7161,9 @@ h1, h2, h3, h4, h5 {
   font-family: 'Space Mono', monospace;
   font-weight: 700; }
 
-.landing section {
+.landing section,
+.xrpl-footer .card-grid,
+#main_content_wrapper {
   border-bottom: 1px solid #1B1818; }
 
 .card-grid {
@@ -7222,6 +7224,17 @@ h1, h2, h3, h4, h5 {
       .card-grid.card-grid-3xN {
         /* Switch to 1-column layout on smaller widths */
         grid-template-columns: 1fr; } }
+  .card-grid.card-grid-Nx1 {
+    /* 1 row of equal sized columns */
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    grid-template-rows: auto;
+    /* No "hero" blocks expected here. */ }
+    @media (max-width: 991.98px) {
+      .card-grid.card-grid-Nx1 {
+        /* Switch to 1-column layout on smaller widths */
+        grid-auto-flow: row;
+        grid-template-columns: 1fr; } }
   .card-grid .card {
     padding: 40px;
     border: 0; }
diff --git a/tool/template-footer.html b/tool/template-footer.html
index 5586c0e350..7ad2c83688 100644
--- a/tool/template-footer.html
+++ b/tool/template-footer.html
@@ -1,34 +1,41 @@
-<footer class="ripple-footer" role="contentinfo">
-  <section class="container-fluid px-1 px-sm-5 pt-3 pb-0">
-      <div class="row">
-        {% set funnels = [] %}
-        {% for page in pages %}
-          {% if page.funnel is defined and page.funnel not in funnels %}
-            {% set parent_page = pages|selectattr('funnel', 'defined_and_equalto', page.funnel)|first %}
+<footer class="xrpl-footer" role="contentinfo">
+  <section class="container-fluid card-grid card-grid-Nx1">
+    {% set funnels = [] %}
+    {% for page in pages %}
+      {% if page.funnel is defined and page.funnel not in funnels %}
+        {% set parent_page = pages|selectattr('funnel', 'defined_and_equalto', page.funnel)|first %}
 
-            <div class="col mx-xl-5 my-3 foot-nav-col">
-              <h5><a class="foot-nav-link" href="{{ parent_page.html }}">{{ parent_page.name }}</a><hr /></h5>
-              {% set depth = 1 %}
-              {% include 'template-page-children.html' %}
-            </div><!--/.foot-nav-col -->
+        <div class="card">
+          <div class="card-header">
+            <h5><a href="{{ parent_page.html }}">{{ parent_page.name }}</a></h5>
+          </div><!--/.card-header-->
+          <div class="card-body">
+            {% set depth = 1 %}
+            {% set count = 5 %}
+            {% include 'template-page-children.html' %}
+          </div><!--/.card-body-->
+        </div><!--/.card -->
 
-            {% set _ = funnels.append(page.funnel) %}
-          {% endif %}
-        {% endfor %}
+        {% set _ = funnels.append(page.funnel) %}
+      {% endif %}
+    {% endfor %}
 
-            <div class="col mx-xl-5 my-3 foot-nav-col">
-              <h5><a class="foot-nav-link" href="https://ripple.com/" target="_blank">Ripple <i class="fa fa-external-link"></i></a><hr /></h5>
-              <div class="children-display">
-                <ul>
-                  <li class="level-1"><a class="foot-nav-link" href="https://ripple.com/company/careers/" target="_blank">Ripple Careers <i class="fa fa-external-link"></i></a></li>
-                  <li class="level-1"><a href="https://ripple.com/collateral/#xrp" target="_blank">XRP Resources <i class="fa fa-external-link"></i></a></li>
-                </ul>
-              </div>
-            </div><!--/.foot-nav-col -->
-      </div><!--/.row-->
+        <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>
+          </div><!--/.card-header-->
+          <div class="card-body">
+            <div class="children-display">
+              <ul>
+                <li class="level-1"><a href="https://ripple.com/company/careers/" target="_blank">Ripple Careers <i class="fa fa-external-link"></i></a></li>
+                <li class="level-1"><a href="https://ripple.com/collateral/#xrp" target="_blank">XRP Resources <i class="fa fa-external-link"></i></a></li>
+              </ul>
+            </div>
+          </div><!--/.card-body-->
+        </div><!--/.card -->
   </section>
 
-  <section class="container-fluid pb-5 px-5">
+  <section class="container-fluid p-5">
 
     <div class="build-disclaimer">
       <p>
diff --git a/tool/xrpl.scss b/tool/xrpl.scss
index 6e6b0d2b99..91e097fe77 100644
--- a/tool/xrpl.scss
+++ b/tool/xrpl.scss
@@ -64,7 +64,9 @@ h1, h2, h3, h4, h5 {
   font-weight: 700;
 }
 
-.landing section {
+.landing section,
+.xrpl-footer .card-grid,
+#main_content_wrapper {
   border-bottom: 1px solid map-get($theme-colors, primary);
 }
 
@@ -152,6 +154,21 @@ h1, h2, h3, h4, h5 {
     }
   }
 
+  &.card-grid-Nx1 {
+    /* 1 row of equal sized columns */
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    grid-template-rows: auto;
+
+    /* No "hero" blocks expected here. */
+
+    @include media-breakpoint-down(md) {
+      /* Switch to 1-column layout on smaller widths */
+      grid-auto-flow: row;
+      grid-template-columns: 1fr;
+    }
+  }
+
   .card {
     padding: 40px;
     border: 0;