From 1ddba21a965656d676f9a35125d83f5777be782d Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:06:26 +0200
Subject: Improve footer styling + fix minor bugs after the Lato font was
 deleted

---
 sass/footer.sass    | 75 +++++++++++++++++++++++++++++++++--------------------
 templates/main.html | 20 +++++++-------
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/sass/footer.sass b/sass/footer.sass
index 68f3640..0c9faf1 100644
--- a/sass/footer.sass
+++ b/sass/footer.sass
@@ -37,42 +37,58 @@ footer
 
         div.footer__column
           display: grid
-          grid-template-rows: 50px 1fr
-          margin-right: 80px
-          &:last-child
-            margin-right: 0
+          grid-template-rows: auto 1fr
+          margin-right: 48px
           +resp(lg)
-            margin-right: 32px
+            margin-right: 28px
           +resp(md)
-            width: 50%
             margin: 0 0 30px
             grid-template-rows: 34px 1fr
-          h3.footer__links-title
-            font-weight: 600
-            font-size: 21px
-            color: $black
+          &:nth-child(1)
+            +resp(lg)
+              width: 16%
+            +resp(md)
+              width: 40%
+          &:nth-child(2)
+            +resp(lg)
+              width: 18%
+            +resp(md)
+              width: 60%
+          &:nth-child(3)
+            +resp(lg)
+              width: 20%
+            +resp(md)
+              width: 40%
+          &:nth-child(4)
+            margin-right: 0
             +resp(lg)
-              line-height: 50px
+              width: 32%
             +resp(md)
-              line-height: 150%
-              font-size: 16px
-              margin-bottom: 0px
+              width: 60%
 
-          ul.footer__links-item
+          h3
+            font-weight: 600
+            font-size: 18px
+            padding: 0 0 17px 0
+            color: $black
+
+          ul
             padding-left: 0
             list-style: none
-            a
-              list-style: none
-              font-weight: normal
-              font-size: 16px
-              line-height: 230%
-              color: #747577
-              text-decoration: none
-              +resp(md)
-                font-size: 14px
-              &:hover
-                color: $orange
-                text-decoration: underline
+            li
+              padding: 5px 0
+              a
+                list-style: none
+                font-weight: normal
+                font-size: 16px
+                line-height: 1.7
+                color: #747577
+                text-decoration: none
+                +resp(md)
+                  font-size: 14px
+                &:hover
+                  color: $orange
+                  text-decoration: underline
 
       div.footer__trustpilot
         justify-self: end
@@ -104,6 +120,7 @@ footer
           +resp(md)
             padding-right: 8px
             display: none
+
       div.footer__rights
         display: flex
         p, a
@@ -154,4 +171,6 @@ footer
               &:hover
                 text-decoration: underline
               &:first-child
-                margin-right: 20px
\ No newline at end of file
+                margin-right: 20px
+          div.footer__sm__rights
+            text-align: center
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index d9f5c82..d11e2e0 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -49,8 +49,6 @@
       <a href="#">COMMERCIAL SERVICES</a>
     </nav>
 
-
-
     <main>
       <div class="container small" id="content">
         <!-- content is automatically inserted here -->
@@ -89,30 +87,30 @@
           <div class="footer__links-trustpilot">
             <div class="footer__links">
               <div class="footer__column">
-                <h3 class="footer__links-title">Get VyOS</h3>
-                <ul class="footer__links-item">
+                <h3>Get VyOS</h3>
+                <ul>
                   <li><a href="/nightly-builds">Nightly builds</a></li>
                   <li><a href="/snapshots">Snapshots</a></li>
                   <li><a href="/lts">LTS release</a></li>
                 </ul>
               </div>
               <div class="footer__column">
-                <h3 class="footer__links-title">Contribute</h3>
-                <ul class="footer__links-item">
+                <h3>Contribute</h3>
+                <ul>
                   <li><a href="/contribute">Contributing guidelines</a></li>
                   <li><a href="https://github.com/vyos">Code on GitHub</a></li>
                   <li><a href="https://phabricator.vyos.net/maniphest">Open tasks</a></li>
                 </ul>
               </div>
               <div class="footer__column">
-                <h3 class="footer__links-title">Report a Bug</h3>
-                <ul class="footer__links-item">
+                <h3>Report a Bug</h3>
+                <ul>
                   <li><a href="https://phabricator.vyos.net/">Bug Tracker</a></li>
                 </ul>
               </div>
               <div class="footer__column">
-                <h3 class="footer__links-title">Commercial Services</h3>
-                <ul class="footer__links-item">
+                <h3>Commercial Services</h3>
+                <ul>
                   <li><a href="https://vyos.io/subscriptions/support/">Commercial supports</a></li>
                   <li><a href="https://vyos.io/subscriptions/software/">LTS release subscriptions</a></li>
                   <li><a href="http://vyos.io/contact-us/">Custom development and consulting</a></li>
@@ -190,7 +188,7 @@
                   <a href='https://www.vyos.io/terms-and-conditions'>Terms & Conditions</a>
                 </div>
                 <div class="footer__sm__rights">
-                  <p>© 2020 vyos.io. All rights reserved.</p>
+                  <p>© 2021 vyos.io. All rights reserved.</p>
                 </div>
               </div>
 
-- 
cgit v1.2.3