Improve footer styling + fix minor bugs after the Lato font was deleted

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>