From 63932a356d7d854c3462c6a846f2ac714c49cf23 Mon Sep 17 00:00:00 2001
From: Nicholas Jitkoff <nicholas@jitkoff.com>
Date: Wed, 29 Jun 2022 08:33:49 -0700
Subject: [PATCH] fade in thumbnails

---
 docs/render/recipe.css | 6 +++---
 docs/render/recipe.js  | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index eb772cc..f29aea7 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -22,12 +22,12 @@ body {
   width: 100%;
   padding-top: 61.8%;
   max-height:1vh;
-  background-color: var(--image-placeholder-color);
   background-size: cover;
   background-position: center;
   margin-bottom:2em;
   box-sizing: border-box;
-  transition:background-image 1s;
+  transition: opacity 200ms ease-out;
+  opacity:0;
   /* margin: 0 -2em; */
   }
 
@@ -335,7 +335,7 @@ a.action .icon {
   }
   #thumbnail-container {
     margin: 0 -8vw;
-
+    background-color: var(--image-placeholder-color);
   }
   #thumbnail {
       padding-top: 56.25%;
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index 90172f2..781aacb 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -284,7 +284,7 @@ function render() {
       alert(isLoaded);
   }
 
-  
+
   var bgImg = new Image();
   bgImg.onload = function(){
     let thumbnail = document.querySelector("#thumbnail");
@@ -292,6 +292,7 @@ function render() {
     thumbnail.style.backgroundImage = 'url(' + bgImg.src + ')';
     thumbnail.style.filter = `blur(${thumbnailContainer.offsetHeight / bgImg.naturalHeight}px)`;
     thumbnail.style.transform = `scale(1.1)`;  
+    setTimeout(() => thumbnail.style.opacity = 1.0, 100);
   };
   bgImg.src = image;