yir: rename mobile-heading to inline-heading

Saver3011 · Oct 30, 2021 · b74b5be · b74b5be
1 parent 688c655
commit b74b5be
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 23 deletions.
diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
@@ -63,15 +63,15 @@ p {
 
 
 /* All content */
-.mobile-heading, .YIR-header, table, .locations, .metric-wrapper, .YIR-tweet-wrapper {
+.inline-heading, .YIR-header, table, .locations, .metric-wrapper, .YIR-tweet-wrapper {
   width: var(--content-width);
 }
 
-.mobile-heading {
+.inline-heading {
   padding-bottom: var(--feather-grid-mega);
 }
 
-.mobile-heading h1 {
+.inline-heading h1 {
   font-size: var(--font-size-xxjumbo);
   line-height: var(--line-height-xxjumbo);
   padding-bottom: var(--feather-grid-xsmall);
@@ -277,11 +277,11 @@ h1#YIR-heading-text, .YIR-subheading {
   }
 }
 
-#YIR-header-mobile-heading {
+#YIR-header-inline-heading {
   padding: 0;
 }
 
-#YIR-header-mobile-heading p {
+#YIR-header-inline-heading p {
   padding: 0;
   padding-top: var(--feather-grid-large);
 }
@@ -521,7 +521,7 @@ span.metric-name {
     display: none;
   }
 
-  .mobile-heading {
+  .inline-heading {
     display: block;
   }
 
@@ -581,7 +581,7 @@ span.metric-name {
 
 /* Less than content-width + 2 * feather-grid-large */
 @media (max-width: 568px) {
-  .mobile-heading, .YIR-header, table, .locations, .metric-wrapper, .YIR-tweet-wrapper {
+  .inline-heading, .YIR-header, table, .locations, .metric-wrapper, .YIR-tweet-wrapper {
     width: 100%;
   }
 
@@ -590,7 +590,7 @@ span.metric-name {
   }
 
   /* Decrease font sizes */
-  .mobile-heading h1 {
+  .inline-heading h1 {
     font-size: var(--font-size-mini-jumbo);
     line-height: var(--line-height-mini-jumbo);
   }

diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
@@ -85,17 +85,15 @@ <h1 id="YIR-heading-text">Year in Review</h1>
           <h1 class="YIR-subheading" id="type">An overview of the past 12 months of activity on Twitter’s Open Source projects.</h1>
         </div>
 
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading" id="YIR-header-mobile-heading">
+        <div class="inline-heading" id="YIR-header-inline-heading">
           <p class="section-description">This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
         </div>
       </div>
     </section>
 
     <section id="top10">
       <div class="YIR-container-section">
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading">
+        <div class="inline-heading">
           <h1>Top 10 repos</h1>
           <p class="section-description">These are our top 10 GitHub repositories, ranked by total commit counts.</p>
         </div>
@@ -124,8 +122,7 @@ <h1>Top 10 repos</h1>
 
     <section id="locations">
       <div class="YIR-container-section">
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading">
+        <div class="inline-heading">
           <h1 class="large-title">Locations</h1>
           <p class="section-description">Our contributors are located all around the world. This list is based on self reported locations from our contributors’ GitHub profiles.</p>
         </div>
@@ -144,8 +141,7 @@ <h1 class="large-title">Locations</h1>
 
     <section id="heat">
       <div class="YIR-container-section">
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading">
+        <div class="inline-heading">
           <h1>Heat metrics</h1>
           <p class="section-description">Heat means work. We measure heat by the number and frequency of commits and committers across our repos.</p>
         </div>
@@ -183,8 +179,7 @@ <h1>Heat metrics</h1>
 
     <section id="light">
       <div class="YIR-container-section">
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading">
+        <div class="inline-heading">
           <h1>Light metrics</h1>
           <p class="section-description">Light means visibility. We measure visibility by number of watchers subscribed to updates, and number of people who have favorited our projects.</p>
         </div>
@@ -225,8 +220,7 @@ <h1>Light metrics</h1>
 
     <section id="love">
       <div class="YIR-container-section">
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading">
+        <div class="inline-heading">
           <h1>Love metrics</h1>
           <p class="section-description">Love means culture and support. We measure love by the number of users who have copied our projects and contributed changes back upstream.</p>
         </div>
@@ -265,8 +259,7 @@ <h1>Love metrics</h1>
 
     <section id="follow">
       <div class="YIR-container-section">
-        <!-- Only visible in mobile -->
-        <div class="mobile-heading">
+        <div class="inline-heading">
           <h1>@TwitterOSS</h1>
           <p class="section-description">Making it simple to trust, ship, and grow Open Source at Twitter and beyond. Follow @TwitterOSS to stay updated!</p>
         </div>

diff --git a/static/js/year-in-review.js b/static/js/year-in-review.js
@@ -25,7 +25,7 @@ if (window.matchMedia("(prefers-reduced-motion: no-preference)").matches) {
   });
 
   // hide inline headings
-  for (element of document.getElementsByClassName("mobile-heading")) {
+  for (element of document.getElementsByClassName("inline-heading")) {
     element.classList.add("hide")
   }