feat: Update footer in BYU Web Components with official BYU logos (Ma…

…tch Brightspot)
byuweb · Sep 7, 2023 · 68bdad1 · 68bdad1
1 parent 9ba4a7a
commit 68bdad1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/components/byu-footer/byu-footer.js b/components/byu-footer/byu-footer.js
@@ -54,7 +54,11 @@ export class BYUFooter extends LitElement {
             </div>
         </div>
         <div class="university-footer-lt-1440">
-            <div class="university-logo"><a href="https://www.byu.edu/">Brigham Young University</a></div>
+            <div class="university-logo">
+              <a href="https://byu.edu" target="_blank">
+                <img class="university-logo-image" src="https://cdn.byu.edu/shared-icons/latest/logos/monogram-white.svg" alt="BYU">
+              </a>
+            </div>
             <div class="university-info">
                 <span class="info-text">Provo, UT 84602, USA</span>
                 <span class="info-text"><a class="contact-phone" href="tel:18014224636">801-422-4636</a></span>

diff --git a/components/byu-footer/byu-footer.sass b/components/byu-footer/byu-footer.sass
@@ -57,6 +57,10 @@ $tabletBreak: 1024px // Put exact px to match Brightspot and so info doesn't wor
     a:hover
       text-decoration: none
 
+  .university-logo-image
+    height: 23px
+    font-size: 10px
+
   .university-info
     display: flex
     margin-top: $spacing2
@@ -68,7 +72,7 @@ $tabletBreak: 1024px // Put exact px to match Brightspot and so info doesn't wor
     display: none
 
   .university-footer-lt-1440
-    display: flex
+    display: grid
     align-items: center
     flex-direction: column
     width: 100%
@@ -84,7 +88,7 @@ $tabletBreak: 1024px // Put exact px to match Brightspot and so info doesn't wor
   @media (min-width: $tabletBreak)
     .university-footer-lt-1440
       display: grid
-      grid-template-columns: 1fr 2fr
+      grid-template-columns: 0fr 2fr
       grid-template-rows: auto
       padding: 30px 80px
       font-size: 14px