From 5aecbffc4c91c2a2bd8cec08acdb8e73d68f1fc4 Mon Sep 17 00:00:00 2001
From: Will Norris <will@willnorris.com>
Date: Sat, 23 Oct 2021 16:12:40 -0700
Subject: [PATCH] allow svgs and links to display properly without js

---
 assets/css/year-in-review.scss       | 4 ++++
 layouts/_default/year-in-review.html | 6 +++---
 static/js/year-in-review.js          | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
index 7e135290f..d68e0e41a 100644
--- a/assets/css/year-in-review.scss
+++ b/assets/css/year-in-review.scss
@@ -35,6 +35,10 @@ html {
   }
 }
 
+a {
+  color: white;
+}
+
 .YIR-wrapper {
   color: white;
   min-height: 100vh;
diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
index fea8d7a0d..8322366df 100644
--- a/layouts/_default/year-in-review.html
+++ b/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"/>
diff --git a/static/js/year-in-review.js b/static/js/year-in-review.js
index 4351c1c0c..2f7dd0b9e 100644
--- a/static/js/year-in-review.js
+++ b/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);
 });