refactoring: Minor changes of homepage

app/assets/stylesheets/tpi/_footer.scss

@@ -45,6 +45,7 @@
     justify-content: space-around;
 
     @include mobile {
+      flex-direction: column;
       font-size: 14px;
     }
 

app/assets/stylesheets/tpi/pages/home.scss

@@ -159,7 +159,7 @@
       gap: 20px;
       justify-content: space-between;
 
-      @include tablet {
+      @include from($desktop) {
         flex-direction: row;
       }
 
@@ -169,7 +169,8 @@
     }
 
     .at-glance-note {
-      font-size: $size-6;
+      font-size: $size-8;
+      margin-top: 1rem;
     }
 
     .at-glance-container:before {
@@ -185,10 +186,17 @@
 
       .stat-boxes {
         display: grid;
-        grid-template-columns: 1fr 1fr;
         gap: 30px;
         padding: 30px 0px;
 
+        @include mobile {
+          grid-template-columns: 1fr;
+        }
+
+        @include from($tablet) {
+          grid-template-columns: 1fr 1fr;
+        }
+
         @include desktop {
           gap: 30px 25px;
         }
@@ -315,20 +323,29 @@
         display: flex;
         gap: 20px;
         margin: 10px 0;
+
+        @include mobile {
+          flex-direction: column;
+        }
+
+        img {
+          max-height: 70px;
+
+          @include mobile {
+            max-height: 100%;
+            max-width: 150px;
+            margin: auto;
+          }
+        }
       }
 
       .info {
-        color: $blue-ribbon;
         font-family: $font-family-bold;
 
         a {
           text-decoration: underline;
         }
       }
-
-      img {
-        max-height: 70px;
-      }
     }
   }
 

app/views/layouts/tpi/_footer.html.erb

@@ -1,15 +1,10 @@
 <section class="footer__information">
   <div class="container">
-    <div class="contact-button-container is-hidden-tablet">
-      <button class="button is-primary">
-        <a href="mailto:[email protected]" class="footer-link">Contact Us</a>
-      </button>
-    </div>
     <div class="columns footer__menu">
       <div class="column is-9 footer__menu-list">
-        <div>
-          <a href="/use-of-the-centre-s-data" class="link is-large" target="_blank">Use of TPI Centre data</a>
-        </div>
+        <button class="button is-primary">
+          <a href="/use-of-the-centre-s-data" class="footer-link" target="_blank" style="padding: 0 10px;">Use of TPI Centre data</a>
+        </button>
         <div>
           <a href="https://www.lse.ac.uk/lse-information/terms-of-use" class="link is-large is-hidden-touch" target="_blank">LSE Terms of use</a>
           <a href="https://www.lse.ac.uk/lse-information/terms-of-use" class="link is-large is-hidden-desktop" target="_blank">Terms of use</a>

app/views/tpi/home/index.html.erb

@@ -23,7 +23,7 @@
 <section class="section tpi-home__assessment-types">
   <div class="container">
     <h2 class="section-title is-size-5-mobile is-size-2">
-      Check out TPI Centre's Assessment Tools
+      Check out TPI Centre's assessment tools
     </h2>
 
     <div class="container">
@@ -48,7 +48,7 @@
 <section class="section tpi-home__stats-news">
   <div class="container">
     <h2 class="section-title is-size-5-mobile is-size-2">
-      At a Glance
+      At a glance
     </h2>
 
     <div class="at-glance-container">
@@ -70,7 +70,7 @@
             <div class="stat-box__icon"><%= image_tag 'tpi/home/aum.png' %></div>
             <div class="stat-box__content">
               <div class="stat-box__number"><%= @home_content[:stats][:combined_aum] %></div>
-              <div class="stat-box__title">AUM</div>
+              <div class="stat-box__title">AUM*</div>
             </div>
           </div>
         </div>
@@ -128,15 +128,15 @@
     </div>
 
     <div class="at-glance-note">
-      Assets Under Management (and Advice) are subject to market-price and foreign-exchange fluctuations. As the sum of self-reported data by TPI supporters, they may double-count assets.
+      * Assets Under Management (and Advice) are subject to market-price and foreign-exchange fluctuations. As the sum of self-reported data by TPI supporters, they may double-count assets.
     </div>
   </div>
 </section>
 
   <section class="section tpi-home__case-studies-supporters">
     <div class="container">
       <h2 class="section-title is-size-5-mobile is-size-2">
-        Become a Supporter
+        Become a supporter
       </h2>
 
       <div class="benefits">
@@ -162,7 +162,7 @@
 <section class="section tpi-home__latest-research">
   <div class="container">
     <h2 class="section-title is-size-5-mobile is-size-2">
-      Featured News and Analysis
+      Featured news and analysis
     </h2>
 
     <div class="section-description">
@@ -198,18 +198,18 @@
 <section class="section tpi-home__funders">
   <div class="container">
     <h2 class="section-title is-size-5-mobile is-size-2">
-      Funding Partners
+      Funding partners
     </h2>
     <div class="section-description">
       <div class="subtitle">TPI Centre is supported by</div>
       <div class="images">
         <img src="<%= asset_path 'tpi/funders/climate-arc.png' %>" />
-        <img src="<%= asset_path 'tpi/funders/fte-russell.png' %>" />
+        <img src="<%= asset_path 'tpi/funders/ftse-russell-horizontal.png' %>" />
         <img src="<%= asset_path 'tpi/funders/lseg-foundation.png' %>" />
         <img src="<%= asset_path 'tpi/funders/tpi.png' %>" />
       </div>
       <br />
-      <div class="info">If you would like to discuss funding the TPI Centre's work, please <a href="mailto:[email protected]" class="footer-link">Contact Us</a></div>
+      <div class="info">If you would like to discuss funding TPI Centre's work, please <a href="mailto:[email protected]" class="footer-link">Contact Us</a></div>
     </div>
   </div>
 </section>
@@ -222,9 +222,9 @@
       </div>
 
       <div class="column is-5-desktop subscribe__container">
-        <h2 class="is-size-4 is-hidden-touch">Subscribe to the Newsletter</h2>
+        <h2 class="is-size-4 is-hidden-touch">Subscribe to the newsletter</h2>
         <div class="subscribe-title is-hidden-desktop">
-          <div>Subscribe to the TPI newsletter</div>
+          <div>Subscribe to the newsletter</div>
           <img src="<%= asset_path 'newsletter_background/newsletter_img_new.png' %>" alt="tpi newsletter logo">
         </div>