make footer same as webflow

edgeworx · Nov 14, 2023 · d568cc9 · d568cc9
1 parent 1e867c1
commit d568cc9
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 77 deletions.
diff --git a/assets/scss/layouts/_footer.scss b/assets/scss/layouts/_footer.scss
@@ -1,14 +1,13 @@
 .footer {
   border-top: 1px solid hsla(0, 0%, 100%, 0.1);
-  background-color: #e3e8f1;
-  padding-top: 4rem;
-  padding-bottom: 3rem;
+  background-color: $edgeneutral-1;
+  padding: 7rem 2.5rem;
   font-size: 1rem;
 
   .footer-layout {
     padding-right: 8px;
     padding-left: 8px;
-    border-top-color: #a9b2bc;
+    border-top-color: $edgeneutral-2;
     text-align: center;
 
     img {
@@ -29,7 +28,7 @@
       display: grid;
       margin-top: 1.5rem;
       grid-auto-columns: 1fr;
-      color: #002131;
+      color: $edgeneutral-6;
 
       .footer-navstack {
         display: -webkit-box;
@@ -45,10 +44,9 @@
         .footer-head {
           margin-top: 0;
           margin-bottom: 8px;
-          color: $edgeneutral-3;
-          font-size: 0.85em;
-          line-height: 1.5;
-          font-weight: 600;
+          color: $edgeneutral-4;
+          font-size: 1.35em;
+          font-weight: 500;
         }
 
         .footer-navlink {
@@ -57,7 +55,7 @@
           -ms-grid-row-align: center;
           align-self: center;
           font-weight: 400;
-          font-size: 0.75em;
+          font-size: 1.13em;
           color: $edgeneutral-3;
 
           &:hover {
@@ -71,21 +69,21 @@
     .social {
       display: grid;
       margin-top: 1rem;
-      padding-top: 1rem;
+      padding-top: 4px;
       padding-bottom: 0;
       -webkit-box-pack: justify;
       -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
       justify-content: space-between;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-      -ms-flex-align: center;
-      align-items: center;
+      -webkit-box-align: start;
+      -webkit-align-items: start;
+      -ms-flex-align: start;
+      align-items: start;
       grid-auto-columns: 1fr;
       gap: 16px;
       -ms-grid-rows: auto;
       grid-template-rows: auto;
-      border-top: 1px solid $edgeneutral-4;
+      border-top: 1px solid $edgeneutral-2;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
       -webkit-flex-direction: column;
@@ -96,30 +94,19 @@
 
       .logo {
         justify-self: center;
-        order: -1;
       }
 
       .legal {
-        color: #002131;
-        font-size: 0.74em;
+        color: $edgeneutral-6;
+        font-size: 0.8em;
         display: flex;
         justify-self: center;
-      }
-
-      .copyright {
-        color: $edgeneutral-2;
-        text-align: right;
-      }
-
-      .legal-links {
-        display: flex;
         flex-direction: row;
         margin-left: 8px;
+        margin-top: 8px;
 
         div {
           padding-left: 4px;
-          color: $edgeneutral-3;
-          font-weight: 600;
         }
       }
 
@@ -141,29 +128,49 @@
         grid-template-columns: 1fr 1fr 1fr 1fr;
         -ms-grid-rows: auto;
         grid-template-rows: auto;
-        order: -1;
-        margin-bottom: 16px;
         opacity: 0.5;
+      }
 
-        .social-link-block {
-          width: 1.7em;
-          margin: 4px;
-        }
+      .social-link-block {
+        margin: 4px;
+        color: $edgeneutral-6;
+      }
+      .copyright {
+        margin-right: 4px;
+      }
+      .logo-container {
+        margin-top: 8px;
       }
     }
   }
 }
 
 @media screen and (max-width: 820px) {
+  .footer {
+    padding: 3rem;
+    .footer-layout {
+      .footer-nav {
+        margin: 0;
+        .footer-navstack .footer-navlink {
+          font-size: 1rem;
+        }
+      }
+    }
+
+  }
+
+  .logo-container {
+    padding-top: 24px;
+    margin-bottom: 12px;
+  }
+
   .legal {
     flex-direction: column;
   }
 }
 
 @media screen and (min-width: 480px) {
   .footer {
-    padding-left: 16px;
-    padding-right: 16px;
 
     .footer-layout {
       text-align: left;
@@ -178,10 +185,12 @@
         grid-template-columns: 1fr 1fr 1fr;
         -ms-grid-rows: auto;
         grid-template-rows: auto;
-        color: #002131;
+        color: $edgeneutral-6;
         justify-items: start;
 
         .footer-navstack {
+          border-left: 1px solid $edgeneutral-2;
+          padding-left: 12px;
           .footer-navlink {
             align-self: flex-start;
             margin-top: 0;
@@ -200,25 +209,17 @@
         }
 
         .logo {
-          order: unset;
           justify-self: end;
         }
 
         .social-buttons {
-          order: unset;
           margin-bottom: 0;
         }
       }
     }
   }
 }
 
-@media screen and (min-width: 1200px) {
-  .footer-nav {
-    margin-right: 50%;
-  }
-}
-
 @media screen and (min-width: 1440px) {
   .footer {
     font-size: 19px;

diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -54,10 +54,10 @@ lqipWidth = "20x"
 smallLimit = "300"
 
 # Footer
-footer = "©2023 Edgeworx Inc"
+footer = "©2023 Edgeworx"
 
 # Feed
-copyRight = "©2023 Edgeworx Inc"
+copyRight = "©2023 Edgeworx"
 
 # Alert
 alert = false

diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
@@ -1,47 +1,45 @@
 <footer class="footer">
   <div class="footer-layout">
     <div class="footer-nav">
-      <div id="w-node-c9636e96-9447-38e2-ab75-14632ebdb513-2ebdb50e" class="footer-navstack">
-        <h4 class="footer-head">Edgeworx Products</h4>
-        <a href="https://www.edgeworx.io" class="footer-navlink w-inline-block"><div>Edgeworx Cloud</div></a>
+      <div class="footer-navstack">
+        <h5 class="footer-head">Product</h4>
+        <a href="https://www.edgeworx.io" class="footer-navlink"><div>Edgeworx Cloud</div></a>
       </div>
-      <div id="w-node-c9636e96-9447-38e2-ab75-14632ebdb522-2ebdb50e" class="footer-navstack">
-        <h4 class="footer-head">Developers</h4>
-        <a href="/" class="footer-navlink w-inline-block"><div>Docs</div></a>
-        <a href="https://discuss.edgeworx.io" class="footer-navlink w-inline-block"><div>Forums</div></a>
-        <a href="https://github.com/edgeworx" target="_blank" class="footer-navlink w-inline-block"><div>GitHub</div></a>
-        <a href="https://status.edgeworx.io"  class="footer-navlink w-inline-block"><div>Status</div></a>
+      <div class="footer-navstack">
+        <h5 class="footer-head">Developers</h4>
+        <a href="/" class="footer-navlink "><div>Developer docs</div></a>
+        <a href="https://github.com/edgeworx" target="_blank" class="footer-navlink "><div>GitHub</div></a>
+        <a href="https://status.edgeworx.io"  class="footer-navlink "><div>Status</div></a>
       </div>
-      <div id="w-node-c9636e96-9447-38e2-ab75-14632ebdb534-2ebdb50e" class="footer-navstack">
-        <h4 class="footer-head">Company</h4>
-        <a data-w-id="8d0639c1-f353-51fc-d2da-316cc99ba386" href="mailto:support@edgeworx.io" class="footer-navlink w-inline-block"><div>Contact Us</div></a>
+      <div class="footer-navstack">
+        <h5 class="footer-head">Company</h4>
+        <a href="https://edgeworx.io/support" class="footer-navlink "><div>Support</div></a>
+        <a href="https://discuss.edgeworx.io" class="footer-navlink "><div>Forums</div></a>
+        <a 
+          href="mailto:support@edgeworx.io" 
+          class="footer-navlink ">
+          <div>Contact Us</div>
+        </a>
       </div>
     </div>
     <div class="social">
       <a href="https://www.edgeworx.io" class="logo-container">
-        <img src="/images/footer/foot-logo-edgeworx.png" loading="lazy" width="150" class="logo" alt="">
+        <img src="/images/footer/foot-logo-edgeworx.svg" loading="lazy" width="165" class="logo" alt="">
       </a>
       <div class="social-buttons">
-        <a href="https://github.com/edgeworx" target="_blank" class="social-link-block w-inline-block">
-          <img src="/images/footer/Github.png" loading="lazy" id="w-node-c9636e96-9447-38e2-ab75-14632ebdb55b-2ebdb50e" alt="" class="social-icon">
-        </a>
-        <a href="https://twitter.com/EdgeworxIO"  class="social-link-block w-inline-block">
-          <img src="/images/footer/Twitter.png" loading="lazy" alt="" class="social-icon">
+        <a href="https://www.linkedin.com/company/edgeworxio/"  class="social-link-block">
+          <img src="/images/footer/linkedin.svg" loading="lazy" alt="">
         </a>
-        <a href="https://www.youtube.com/channel/UCebgDK_-yzV3eOvTLgLW4Zw"  class="social-link-block w-inline-block">
-          <img src="/images/footer/YouTube.png" loading="lazy" alt="" class="social-icon">
-        </a>
-        <a href="https://www.linkedin.com/company/edgeworxio/"  class="social-link-block w-inline-block">
-          <img src="/images/footer/Linkedin.png" loading="lazy" alt="" class="social-icon">
+        <a href="https://github.com/edgeworx" target="_blank" class="social-link-block">
+          <img src="/images/footer/github.svg" loading="lazy" alt="">
         </a>
       </div>
-      <div class="legal">
+      <div class="legal legal-links">
         <div class="copyright">{{ $.Site.Params.copyRight }}</div>
-        <div class="legal-links">
-        <div>Terms of use </div>
         <div>|</div>
-        <div>Privacy</div>
-        </div>
+        <div><a href="https://www.edgeworx.io/privacy" target="_blank" class="social-link-block">Privacy</a></div>
+        <div>|</div>
+        <div><a href="https://www.edgeworx.io/terms" target="_blank" class="social-link-block">Terms</a></div>
       </div>
     </div>
   </div>

diff --git a/static/images/footer/Github.png b/static/images/footer/Github.png
diff --git a/static/images/footer/Linkedin.png b/static/images/footer/Linkedin.png
diff --git a/static/images/footer/foot-logo-darcy.png b/static/images/footer/foot-logo-darcy.png
diff --git a/static/images/footer/foot-logo-edgeworx.svg b/static/images/footer/foot-logo-edgeworx.svg
diff --git a/static/images/footer/github.svg b/static/images/footer/github.svg
diff --git a/static/images/footer/linkedin.svg b/static/images/footer/linkedin.svg