allow svgs and links to display properly without js

Author: willnorris

assets/css/year-in-review.scss

@@ -35,6 +35,10 @@ html {
   }
 }
 
+a {
+  color: white;
+}
+
 .YIR-wrapper {
   color: white;
   min-height: 100vh;

layouts/_default/year-in-review.html

@@ -230,7 +230,7 @@ <h1>Heat metrics</h1>
         </div>
 
         <div class="metric-wrapper">
-          <svg class="fire-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          <svg class="fire-svg in-view" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width='220px' height ='220px' viewBox="-1 -1 38 38" xml:space="preserve" >
             <path class="fire-st0" d="M35,19c0-2.1-0.4-4-1-5.9c-0.5,5.4-3.3,8.2-6.3,6.9c-2.8-1.2-0.9-5.9-0.8-8.2c0.2-3.8,0-8.2-6.9-11.8
               c2.9,5.5,0.3,8.9-2.3,9.1c-3,0.2-5.7-2.5-4.7-7c-3.2,2.4-3.3,6.4-2.3,9c1,2.7,0,5-2.6,5.2c-2.8,0.3-4.4-3-3-8.3c-2.5,3-4,6.8-4,11
@@ -269,7 +269,7 @@ <h1>Light metrics</h1>
         </div>
 
         <div class="metric-wrapper">
-          <svg class="sun-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          <svg class="sun-svg in-view" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width='220px' height ='220px' viewBox="-1 -1 38 38" xml:space="preserve">
             <path class="sun-st0" d="M8,18a10,10 0 1,0 20,0a10,10 0 1,0 -20,0"/>
             <path class="sun-st1" d="M16,2c0,0,0-2,2-2s2,2,2,2v2c0,0,0,2-2,2s-2-2-2-2V2z"/>
@@ -311,7 +311,7 @@ <h1>Love metrics</h1>
         </div>
 
         <div class="metric-wrapper">
-          <svg class="heart-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          <svg class="heart-svg in-view" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width='220px' height ='220px' viewBox="-1 -1 38 38" xml:space="preserve">
             <path class="heart-st0" d="M31.6,22.9c2-2.8,3.5-5.8,4-8.8c0.2-0.7,0.3-1.5,0.3-2.2C35.9,6.4,31.5,2,26,2c-3.3,0-6.2,1.6-8,4.1
               C16.2,3.6,13.3,2,10,2c-5.4,0-9.9,4.4-9.9,9.9c0,0.8,0.1,1.5,0.3,2.2C1.8,22.6,11.2,31.6,18,34c2.6-0.9,5.6-2.8,8.4-5.3"/>

static/js/year-in-review.js

@@ -19,6 +19,7 @@ observer = new IntersectionObserver((entries) => {
   });
 }, config);
 document.querySelectorAll('.YIR-wrapper svg').forEach(image => {
+  image.classList.remove('in-view');
   observer.observe(image);
 });