Update transition duration in scripts.js, expand value in cards.js, a…

…nd adjust color for theme in dropshadow.js

src/scripts.js

@@ -243,7 +243,7 @@ function initializeMasonry() {
     itemSelector: ".card",
     columnWidth: ".card",
     gutter: 24,
-    transitionDuration: '0.12s', // set the transition duration
+    transitionDuration: '0.08s', // set the transition duration
     stagger: 5, // set the stagger delay
     fitwidth: true,
     isFitWidth: true,
@@ -707,7 +707,7 @@ function setSearchPreference(state) {
 // Setup NTP
 async function setupNTP() {
   setupSearch();
-  lazySizes.cfg.expand = 300;
+  lazySizes.cfg.expand = 600;
   lazySizes.cfg.preloadAfterLoad = true;
   lazySizes.cfg.loadMode = 2;
   lazySizes.cfg.expFactor = 3;

src/scripts/cards.js

@@ -12,7 +12,9 @@ function sanitizeHTML(html) {
 }
 
 function createImageContainer(thumbnailUrl, siteTitle) {
-    const imageProxyURL = "https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:0:300:0/g:no/plain/" + thumbnailUrl+"@webp";
+    // const imageProxyURL = "https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:0:300:0/g:no/plain/" + thumbnailUrl+"@webp";
+        const imageProxyURL =  thumbnailUrl;
+
     const imageContainer = createElement('div', { className: 'image-container loading' });
     const cardbg = createElement('div', { className: 'card-bg' });
 

src/scripts/utils/dropshadow.js

@@ -24,6 +24,7 @@ function generateBoxShadow(color, elevation, opacity, blur, ) {
 }
 
 function adjustColorForTheme(color, theme) {
+  const percent = 10;
   const hsl = color.toHsl();
   if (hsl.l <= 0.2) { // if the color is already dark
     hsl.l += (1 - hsl.l) * (percent / 100); // Lighten the color

src/styles.css

@@ -236,6 +236,15 @@ body > :not(.background-image-container)::selection {
 }
 
 
+.lazyload,
+.lazyloading {
+	opacity: 0;
+}
+.lazyloaded {
+	opacity: 1;
+	transition: opacity 300ms;
+}
+
 .card:active .card-bg {
   filter: blur(90px) brightness(1.1);
   transform: scale(1.15);