use meaningful section names rather than numbers

Saver3011 · Oct 23, 2021 · 68abcd7 · 68abcd7
1 parent 1ac7c37
commit 68abcd7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
@@ -82,31 +82,31 @@ section {
   height: 100vh;
 }
 
-section#section1 {
+section#welcome {
   background: var(--tw-color-blue-medium);
 }
 
-section#section2 {
+section#top10 {
   background: var(--tw-color-purple-medium);
 }
 
-section#section3 {
+section#locations {
   background: var(--tw-color-green-medium);
 }
 
-section#section4 {
+section#heat {
   background: var(--tw-color-orange-medium);
 }
 
-section#section5 {
+section#light {
   background: var(--tw-color-yellow-deep);
 }
 
-section#section6 {
+section#love {
   background: var(--tw-color-red-medium);
 }
 
-section#section7 {
+section#follow {
   background: var(--tw-color-blue-medium);
 }
 
@@ -468,39 +468,39 @@ span.metric-name {
 /* Hardcoded breakpoints for when window height is too small and causes content to overflow */
 /* Header - when content overflows section */
 @media (max-height: 544px) and (min-width: 1080px) {
-  section#section1 {
+  section#welcome {
     height: auto;
     padding: calc(var(--feather-grid-mega) * 1.5) 0;
   }
 }
 
 /* Top 10 repos - when content overflows section */
 @media (max-height: 652px) and (min-width: 1080px) {
-  section#section2 {
+  section#top10 {
     height: auto;
     padding: calc(var(--feather-grid-mega) * 1.5) 0;
   }
 }
 
 /* Locations - when content overflows section */
 @media (max-height: 772px) and (min-width: 1080px) {
-  section#section3 {
+  section#locations {
     height: auto;
     padding: calc(var(--feather-grid-mega) * 1.5) 0;
   }
 }
 
 /* Metrics - when content overflows section */
 @media (max-height: 658px) and (min-width: 1080px) {
-  section#section4, section#section5, section#section6 {
+  section#heat, section#light, section#love {
     height: auto;
     padding: calc(var(--feather-grid-mega) * 1.5) 0;
   }
 }
 
 /* Tweet - when content overflows section */
 @media (max-height: 721px) and (min-width: 1080px) {
-  section#section7 {
+  section#follow {
     height: auto;
     padding: calc(var(--feather-grid-mega) * 1.5) 0;
   }

diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
@@ -54,13 +54,13 @@
 
     <!-- Only in mobile -->
     <ul id="nav-menu">
-      <li><a href="#section1">Welcome</a></li>
-      <li><a href="#section2">Top 10 repos</a></li>
-      <li><a href="#section3">Locations</a></li>
-      <li><a href="#section4">Heat metrics</a></li>
-      <li><a href="#section5">Light metrics</a></li>
-      <li><a href="#section6">Love metrics</a></li>
-      <li><a href="#section7">@TwitterOSS</a></li>
+      <li><a href="#welcome">Welcome</a></li>
+      <li><a href="#top10">Top 10 repos</a></li>
+      <li><a href="#locations">Locations</a></li>
+      <li><a href="#heat">Heat metrics</a></li>
+      <li><a href="#light">Light metrics</a></li>
+      <li><a href="#love">Love metrics</a></li>
+      <li><a href="#follow">@TwitterOSS</a></li>
     </ul>
   </nav>
 
@@ -70,49 +70,49 @@
       <div class="YIR-nav-wrapper" id="YIR-navbar">
         <ul class="nav">
           <li class="active">
-            <a href="#section1">
+            <a href="#welcome">
               <span class="YIR-nav-title">Welcome</span>
               <p class="YIR-nav-body">This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
             </a>
           </li>
 
           <li>
-            <a href="#section2">
+            <a href="#top10">
               <span class="YIR-nav-title">Top 10 repos</span>
               <p class="YIR-nav-body">These are our top 10 GitHub repositories, ranked by total commit counts.</p>
             </a>
           </li>
 
           <li>
-            <a href="#section3">
+            <a href="#locations">
               <span class="YIR-nav-title">Locations</span>
               <p class="YIR-nav-body">Our contributors are located all around the world. This list is based on self reported locations from our contributors’ GitHub profiles.</p>
             </a>
           </li>
 
           <li>
-            <a href="#section4">
+            <a href="#heat">
               <span class="YIR-nav-title">Heat metrics</span>
               <p class="YIR-nav-body">Heat means work. We measure heat by the number and frequency of commits and committers across our repos.</p>
             </a>
           </li>
 
           <li>
-            <a href="#section5">
+            <a href="#light">
               <span class="YIR-nav-title">Light metrics</span>
               <p class="YIR-nav-body">Light means visibility. We measure visibility by number of watchers subscribed to updates, and number of people who have favorited our projects.</p>
             </a>
           </li>
 
           <li>
-            <a href="#section6">
+            <a href="#love">
               <span class="YIR-nav-title">Love metrics</span>
               <p class="YIR-nav-body">Love means culture and support. We measure love by the number of users who have copied our projects and contributed changes back upstream.</p>
             </a>
           </li>
 
           <li>
-            <a href="#section7">
+            <a href="#follow">
               <span class="YIR-nav-title">@TwitterOSS</span>
               <p class="YIR-nav-body">Making it simple to trust, ship, and grow Open Source at Twitter and beyond. Follow @TwitterOSS to stay updated!</p>
             </a>
@@ -121,7 +121,7 @@
       </div> <!-- End of YIR-nav-wrapper -->
     </div> <!-- End of YIR-container -->
 
-    <section class="section1" id="section1">
+    <section id="welcome">
       <div class="YIR-container-section">
         <div class="YIR-header">
           <!-- id="type" -->
@@ -137,7 +137,7 @@ <h1 class="YIR-subheading" id="type">An overview of the past 12 months of activi
       </div>
     </section>
 
-    <section class="section2" id="section2">
+    <section id="top10">
       <div class="YIR-container-section">
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
@@ -156,7 +156,7 @@ <h1>Top 10 repos</h1>
       </div>
     </section>
 
-    <section class="section3" id="section3">
+    <section id="locations">
       <div class="YIR-container-section">
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
@@ -210,7 +210,7 @@ <h1 class="large-title">Locations</h1>
       </div>
     </section>
 
-    <section class="section4" id="section4">
+    <section id="heat">
       <div class="YIR-container-section">
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
@@ -249,7 +249,7 @@ <h1>Heat metrics</h1>
       </div>
     </section>
 
-    <section class="section5" id="section5">
+    <section id="light">
       <div class="YIR-container-section">
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
@@ -291,7 +291,7 @@ <h1>Light metrics</h1>
       </div>
     </section>
 
-    <section class="section6" id="section6">
+    <section id="love">
       <div class="YIR-container-section">
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
@@ -331,7 +331,7 @@ <h1>Love metrics</h1>
       </div>
     </section>
 
-    <section class="section7" id="section7">
+    <section id="follow">
       <div class="YIR-container-section">
         <!-- Only visible in mobile -->
         <div class="mobile-heading">