Footer in bootstrap container (ultrawide).

Author: jholdstock

internal/webapi/public/css/vspd.css

@@ -79,30 +79,42 @@ body {
  */
 
 .vsp-footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0;
-    font-size: 0.8rem;
-    background-color: #091440;
-    flex-shrink: 0;
+    line-height: 1.2rem;
     font-size: 0.8rem;
+    position: relative;
     background-color: #091440;
     color: #8997a5;
-    width: 100%;
 }
 
-.vsp-footer-left,
-.vsp-footer-right {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.vsp-footer-bg-left,
+.vsp-footer-bg-right {
+    position: absolute;
+    height: 100%;
+}
+
+.vsp-footer-bg-right {
+    right: 0;
+    bottom: 0;
+    background-color: #202a52;
+}
+
+@media (max-width: 768px) {
+    .vsp-footer-bg-left,
+    .vsp-footer-bg-right {
+        height: 50%;
+    }
+}
+
+.vsp-footer-left {
+    background-color: #091440;
 }
 
 .vsp-footer-right {
-    background-color: rgba(237,239,241,.1);
-    text-align: right;
-    color: #8997a5;
+    background-color: #202a52;
+    /* Top & bottom padding to ensure right is same height as left despite
+    having one less line of text */
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
 }
 
 /* 

internal/webapi/templates/footer.html

@@ -2,8 +2,13 @@
 
   </div> <!-- vsp-page-content -->
 
-  <footer class="vsp-footer">
-        <div class="vsp-footer-left col-md-8 col-12">
+  <footer class="vsp-footer flex-md-row flex-row-reverse">
+    <div class="vsp-footer-bg-left d-none d-sm-block col-md-6 col-12"></div>
+    <div class="vsp-footer-bg-right d-none d-sm-block col-md-6 col-12"></div>
+
+    <div class="container d-flex flex-wrap px-0 px-sm-2 mx-0 mx-sm-auto">
+
+        <div class="vsp-footer-left col-md-8 col-12 justify-content-center justify-content-md-start px-0">
             <p class="py-4 m-0">
               <strong>Stats&nbsp;updated:</strong>&nbsp;{{ timeAgo .WebApiCache.UpdateTime }}
               <br />
@@ -13,13 +18,15 @@
             </p>
         </div>
 
-        <div class="vsp-footer-right col-md-4 col-12 text-center text-md-right">
+        <div class="vsp-footer-right col-md-4 col-12 justify-content-center justify-content-md-end text-center text-md-right px-0">
             <p class="py-4 m-0">
                 Decred Developers | 2020-2024
                 <br />
                 The source code is available on <a href="https://github.com/decred/vspd" target="_blank" rel="noopener noreferrer">GitHub</a>
             </p>
         </div>
+  
+    </div>
   </footer>
 
 </body>