Change footer UI

src/css/footer.css

@@ -4,6 +4,7 @@
   padding: 2.5rem 0;
   position: relative;
   z-index: var(--z-index-footer);
+  box-shadow: 0 0 10px -5px #999;
 }
 
 .footer a {
@@ -21,18 +22,17 @@
   height: 1px;
   background-color: var(--color-footer-text);
   transform: scale3d(0, 0.9999, 0.9999);
-  transition: transform 0.1s;
+  transition: transform 0.3s;
 }
 
-.footer a.icon::after,
-.footer a.btn::after {
+.footer .footer-logo a.icon::after {
   content: none;
 }
 
 .footer a:focus::after,
 .footer a:hover::after {
   transform: scale3d(1, 0.9999, 0.9999);
-  transition-duration: 0.05s;
+  transition-duration: 0.3s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -45,7 +45,7 @@
 }
 
 .footer-links .col {
-  flex-basis: 33.3333%;
+  flex-basis: 100%;
   padding-top: 0.625rem;
 }
 
@@ -54,10 +54,6 @@
   padding: 0 0 1.25rem;
 }
 
-.footer-links .col:nth-child(5) {
-  flex-basis: 100%;
-}
-
 .footer-logo {
   padding: 1rem 0;
   width: 193px;
@@ -135,41 +131,26 @@
   justify-content: center;
   flex-wrap: wrap;
   margin-top: -4px;
+  flex-direction: column;
 }
 
 .footer-links .social-icons li {
-  display: inline-block;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
   padding: 0;
+  margin-bottom: 1rem;
 }
 
 .footer-links .social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 45px;
-  height: 45px;
-  margin: 0 0.125rem;
+  margin: 0 0 0 0.5rem;
   border-radius: 50%;
   transition: background-color 0.3s ease-in-out;
 }
 
-.footer-links .social-icons svg {
-  fill: var(--color-footer-text);
-  width: 35px;
-  height: 29px;
-  transition: fill 0.3s ease-in-out;
-}
-
-.footer-links .social-icons a:focus,
-.footer-links .social-icons a:hover {
-  background-color: var(--color-footer-text);
-}
-
-.footer-links .social-icons a:focus svg,
-.footer-links .social-icons a:hover svg {
-  fill: var(--color-footer-bg);
-}
-
 .footer-terms {
   font-size: 0.875rem;
   line-height: 1;
@@ -190,16 +171,18 @@
   margin: 0.625rem 0.3125rem;
 }
 
-@media screen and (min-width: 769px) {
+.footer-terms-links a {
+  font-weight: var(--weight-bold);
+}
+
+/* Responsive css */
+
+@media screen and (min-width: 768px) {
   .footer-links .col {
-    flex-basis: 22%;
+    flex-basis: 24%;
   }
 
   .footer-links .col:nth-child(1) {
-    flex-basis: 34%;
-  }
-
-  .footer-links .col:nth-child(5) {
     flex-basis: 100%;
   }
 
@@ -228,22 +211,14 @@
   }
 
   .footer-links .col {
-    flex-basis: 17%;
+    flex-basis: calc((100% - 27%) / 4);
   }
 
   .footer-links .col:nth-child(1) {
     flex-basis: 27%;
     padding: 0 1.25rem;
   }
 
-  .footer-links .col:nth-child(2) {
-    flex-basis: 16%;
-  }
-
-  .footer-links .col:nth-child(5) {
-    flex-basis: 23%;
-  }
-
   .footer-links li a {
     font-size: inherit;
   }
@@ -253,22 +228,7 @@
     padding-right: 0.75rem;
   }
 
-  .footer-terms {
-    text-align: left;
-  }
-
   .footer-terms span {
     margin-left: 0.125rem;
   }
 }
-
-@media screen and (min-width: 1200px) {
-  .footer-links .social-icons a {
-    width: 52px;
-    height: 52px;
-  }
-
-  .footer-links .social-icons svg {
-    width: 50px;
-  }
-}

src/css/vars.css

@@ -56,8 +56,9 @@
   --color-shade: #f3f3f3;
   --color-navbar-bg: var(--color-brand-black);
   --color-navbar-text: var(--color-brand-white);
-  --color-footer-bg: var(--color-brand-black);
-  --color-footer-text: var(--color-brand-white);
+  --color-footer-bg: var(--color-shade);
+  --color-footer-bg-gray: var(--color-brand-black);
+  --color-footer-text: var(--color-text);
 
   /* Color for code block  */
   --hljs-attr: #407787;

src/partials/footer-content.hbs

@@ -4,7 +4,7 @@
       <div class="col">
         <div class="footer-logo">
           <a href="https://www.couchbase.com" class="icon">
-            <img src="{{{uiRootPath}}}/img/logo.svg" alt="Couchbase">
+            <img src="{{{uiRootPath}}}/img/couchbase_logo_black.svg" alt="Couchbase">
           </a>
         </div>
       </div>
@@ -32,30 +32,37 @@
       <div class="col">
         <ul class="social-icons">
           <li>
+            <svg  width="14" height="14" viewBox="0 0 32 32"> <path id="facebook" class="cls-1" d="M29,0H3A2.652,2.652,0,0,0,0,3V29a2.652,2.652,0,0,0,3,3H16V18H12V14h4V12a6.452,6.452,0,0,1,6-6h4v4H22a2.151,2.151,0,0,0-2,2v2h6l-1,4H20V32h9a2.652,2.652,0,0,0,3-3V3A2.652,2.652,0,0,0,29,0Z"/></svg>
             <a href="https://www.facebook.com/Couchbase" class="icon">
-              <svg width="50px" height="50px" viewBox="26.363 116.363 560.215 560.215"><path d="m586.58 209.58c0-48.96-44.252-93.212-93.212-93.212h-373.79c-48.96 0-93.212 44.252-93.212 93.212v373.79c0 48.96 44.252 93.212 93.212 93.212h186.42v-211.85h-68.732v-93.212h68.732v-36.72c0-63.083 47.077-119.58 105.45-119.58h75.323v93.212h-75.323c-8.474 0-17.889 10.357-17.889 25.422v37.662h93.212v93.212h-93.212v211.85h99.803c48.96 0 93.212-44.252 93.212-93.212v-373.79z"/></svg>
+            Facebook
             </a>
           </li>
           <li>
+            <svg  width="14" height="14" viewBox="0 0 32.1 26.1"> <path id="twitter" class="cls-1" d="M32,7.1a11.836,11.836,0,0,1-3.8,1,6.462,6.462,0,0,0,2.9-3.6,12.606,12.606,0,0,1-4.2,1.6A6.492,6.492,0,0,0,22.1,4a6.594,6.594,0,0,0-6.6,6.6,7.719,7.719,0,0,0,.2,1.5A18.458,18.458,0,0,1,2.2,5.2a6.294,6.294,0,0,0-.9,3.3A6.765,6.765,0,0,0,4.2,14a6.109,6.109,0,0,1-3-.8v.1a6.543,6.543,0,0,0,5.3,6.4,4.678,4.678,0,0,1-1.7.2,4.869,4.869,0,0,1-1.2-.1,6.679,6.679,0,0,0,6.1,4.6,12.917,12.917,0,0,1-8.2,2.8,9.151,9.151,0,0,1-1.6-.1,18.438,18.438,0,0,0,10.1,3c12.1,0,18.7-10,18.7-18.7v-.8A13.336,13.336,0,0,0,32,7.2Z" transform="translate(0.1 -4)"/></svg>
             <a href="https://twitter.com/couchbase" class="icon">
-              <svg width="50px" height="50px" viewBox="32.012 176.622 542.326 437.815"><path d="m574.34 227.46c-19.772 8.474-41.428 15.065-64.025 17.889 22.597-14.123 40.486-35.778 48.96-61.2-21.655 13.182-45.194 21.655-70.615 27.305-20.714-21.655-48.96-34.837-80.972-34.837-61.2 0-111.1 49.902-111.1 111.1 0 8.474 0.942 16.948 2.825 25.422-92.271-5.649-174.18-49.902-229.74-117.69-9.415 16.006-15.065 35.778-15.065 55.551 0 38.603 19.772 72.498 49.902 92.271-17.889-0.942-35.778-5.649-50.843-14.123v0.942c0 53.668 38.603 98.862 89.446 109.22-9.415 2.825-18.831 3.766-29.188 3.766-7.532 0-14.123-0.942-20.714-1.883 14.123 44.252 55.551 76.265 103.57 77.206-37.662 30.129-85.68 48.018-138.41 48.018-9.415 0-17.889-0.941-26.363-1.883 48.96 32.012 107.34 49.902 170.42 49.902 204.31 0 316.36-169.48 316.36-316.36v-14.123c21.656-14.125 40.487-33.897 55.551-56.494z"/></svg>
+              Twitter
             </a>
           </li>
           <li>
-            <a href="https://www.linkedin.com/company/couchbase" class="icon">
-              <svg width="50px" height="50px" viewBox="31.071 119.188 539.537 540.443"><path d="m531.97 119.19h-461.35c-21.655 0-39.545 16.948-39.545 38.603v463.24c0 21.655 17.889 38.603 39.545 38.603h460.41c21.655 0 39.545-16.948 39.545-38.603v-463.24c0.942-21.656-16.947-38.603-38.603-38.603zm-337.07 451.94h-81.914v-243.86h81.914v243.86zm-40.486-276.81c-28.246 0-46.135-18.831-46.135-42.369s17.889-42.369 46.135-42.369 45.194 17.889 45.194 42.369c0.942 23.538-16.948 42.369-45.194 42.369zm335.19 276.81h-81.914v-129.93c0-32.954-12.24-55.551-41.428-55.551-22.597 0-35.778 15.065-41.428 30.129-1.883 5.649-2.825 12.24-2.825 19.772v136.52h-81.914s0.942-221.26 0-243.86h81.914v34.837c11.298-16.948 30.129-40.486 73.44-40.486 53.668 0 94.154 34.837 94.154 110.16l1e-3 138.41zm-168.54-208.08s0.941-0.941 0 0z"/></svg>
+          <svg  width="14" height="14" viewBox="0 0 32 32"> <path id="linkedin" class="cls-1" d="M29,0H3A3.076,3.076,0,0,0,0,3V29a3.009,3.009,0,0,0,3,3H29a2.946,2.946,0,0,0,3-3V3A3.009,3.009,0,0,0,29,0ZM12,26H8V12h4ZM10,10a2,2,0,1,1,2-2A2.006,2.006,0,0,1,10,10ZM26,26H22V18a2,2,0,0,0-4,0v8H14V12h4v2.5c.8-1.1,2.1-2.5,3.5-2.5A4.736,4.736,0,0,1,26,17Z"/></svg>
+              <a href="https://www.linkedin.com/company/couchbase" class="icon">
+             Linkedin
             </a>
           </li>
         </ul>
       </div>
     </div>
     <div class="footer-terms">
-      <span>{{{year}}} COUCHBASE All rights reserved.</span>
-      <a href="https://www.couchbase.com/privacy-policy">Privacy Policy</a>
-      <a href="https://www.couchbase.com/cookie-policy">Cookie Policy</a>
-      <a href="https://www.couchbase.com/support-policy">Support Policy</a>
-      <a href="https://www.couchbase.com/terms-of-use">Terms of Use</a>
-      <a href="https://info.couchbase.com/unsubscribe-or-manage-preferences.html" target="_blank" rel="noopener">Marketing Preference Center</a>
+      <div class="footer-terms-copyright">
+          <span>© {{{year}}} Couchbase, Inc. Couchbase, Couchbase Lite and the Couchbase logo are registered trademarks of Couchbase, Inc.</span>
+      </div>
+      <div class="footer-terms-links">
+        <a href="https://www.couchbase.com/terms-of-use">Terms of Use</a>
+        <a href="https://www.couchbase.com/privacy-policy">Privacy Policy</a>
+        <a href="https://www.couchbase.com/cookie-policy">Cookie Policy</a>
+        <a href="https://www.couchbase.com/support-policy">Support Policy</a>
+        <a href="https://info.couchbase.com/unsubscribe-or-manage-preferences.html" target="_blank" rel="noopener">Marketing Preference Center</a>
+      </div>
     </div>
   </div>
 </footer>