Merge pull request #311 from torchbox/fix-wide-footer-logos-recreated-with-access

Adjust horizontal footer logos style

Author: albinazs

tbx/project_styleguide/templates/patterns/organisms/footer/footer.html

@@ -1,37 +1,39 @@
 {% load wagtailcore_tags wagtailimages_tags wagtail_cache navigation_tags %}
-
 <footer class="footer">
-
     <div class="grid footer__top ">
         <span class="grid__footer-line footer__line"></span>
         {% with contact=page.footer_contact %}
             {% if contact %}
                 {% include "patterns/molecules/footer-cta/footer-cta.html" with contact_heading=contact.title contact_text=contact.text contact_link=contact.link contact_name=contact.name contact_role=contact.role contact_image=contact.image contact_action=contact.button_text contact_email=contact.email_text %}
             {% endif %}
         {% endwith %}
-
         <div class="grid__footer-links">
             {% wagtailcache 600 "footerlinks" current_site.pk is_pattern_library %}
                 {% footerlinks %}
             {% endwagtailcache %}
-
             <ul class="footer__socials">
                 <li>
-                    <a aria-label="Follow us on Twitter" href="https://twitter.com/torchbox" class="footer__social-link">
+                    <a aria-label="Follow us on Twitter"
+                       href="https://twitter.com/torchbox"
+                       class="footer__social-link">
                         <svg width="24" height="24" aria-hidden="true" class="footer__social-icon">
                             <use xlink:href="#twitter" />
                         </svg>
                     </a>
                 </li>
                 <li>
-                    <a aria-label="Connect with us on LinkedIn" href="https://www.linkedin.com/company/torchbox" class="footer__social-link">
+                    <a aria-label="Connect with us on LinkedIn"
+                       href="https://www.linkedin.com/company/torchbox"
+                       class="footer__social-link">
                         <svg width="24" height="24" aria-hidden="true" class="footer__social-icon">
                             <use xlink:href="#linkedin" />
                         </svg>
                     </a>
                 </li>
                 <li>
-                    <a aria-label="Follow us on Instagram" href="https://www.instagram.com/torchboxltd/" class="footer__social-link">
+                    <a aria-label="Follow us on Instagram"
+                       href="https://www.instagram.com/torchboxltd/"
+                       class="footer__social-link">
                         <svg width="24" height="24" aria-hidden="true" class="footer__social-icon">
                             <use xlink:href="#instagram" />
                         </svg>
@@ -40,7 +42,6 @@
             </ul>
         </div>
     </div>
-
     <div class="footer__bottom-container">
         <div class="grid footer__bottom">
             <div class="grid__footer-logos">
@@ -52,7 +53,11 @@
                                     <li>
                                         {% with logo.link as link %}
                                             <a class="footer__logo-link" href="{{ link.url }}">
-                                                {% image logo.image max-100x100 format-webp loading="lazy" class="footer__logo" alt=logo.alt_text|default:logo.image.title %}
+                                                {% if logo.image.width > logo.image.height %}
+                                                    {% image logo.image max-200x100 format-webp loading="lazy" class="footer__logo" alt=logo.alt_text|default:logo.image.title %}
+                                                {% else %}
+                                                    {% image logo.image max-100x100 format-webp loading="lazy" class="footer__logo footer__logo--narrow" alt=logo.alt_text|default:logo.image.title %}
+                                                {% endif %}
                                             </a>
                                         {% endwith %}
                                     </li>
@@ -65,18 +70,16 @@
             <div class="grid__footer-company">
                 <div class="footer__company">
                     <div class="footer__company-address">
-                        <p>© Torchbox {% now "Y" %} - </p><address>3rd Floor, 15 Colston St, Bristol, BS1 5AP</address>
+                        <p>© Torchbox {% now "Y" %} -</p>
+                        <address>3rd Floor, 15 Colston St, Bristol, BS1 5AP</address>
                     </div>
                     <div>
                         <p>Registered in England &amp; Wales. Company no. 3983354, VAT no. 752981011</p>
                     </div>
                 </div>
             </div>
         </div>
-
         {% include "patterns/molecules/carbon-impact/carbon-impact.html" %}
     </div>
-
     {% include "patterns/molecules/cookie-message/cookie-message.html" %}
-
 </footer>

tbx/static_src/sass/components/_footer.scss

@@ -85,11 +85,15 @@
 
     &__logo {
         filter: grayscale(1) invert(1) brightness(0.52);
-        max-width: 70px;
+        max-width: 150px;
 
         @include high-contrast-light-mode() {
             filter: none;
         }
+
+        &--narrow {
+            max-width: 70px;
+        }
     }
 
     &__company {