add blockquote styling and stagger effect to masonry

BumpyClock · Apr 11, 2024 · 9a01834 · 9a01834
1 parent ea96a84
commit 9a01834
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/scripts.js b/src/scripts.js
@@ -243,8 +243,8 @@ function initializeMasonry() {
     itemSelector: ".card",
     columnWidth: ".card",
     gutter: 24,
-    transitionDuration: '0.25s', // set the transition duration
-    stagger: 30 // set the stagger delay
+    transitionDuration: '0.2s', // set the transition duration
+    stagger: 10 // set the stagger delay
 });
   document.querySelectorAll(".masonry-item").forEach(item => {
     item.addEventListener("load", () => {

diff --git a/src/scripts/cards.js b/src/scripts/cards.js
@@ -12,13 +12,13 @@ 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;
+    const imageProxyURL = "https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:0:300:0/g:no/plain/" + thumbnailUrl+"@webp";
     const imageContainer = createElement('div', { className: 'image-container loading' });
     const cardbg = createElement('div', { className: 'card-bg' });
 
     if (thumbnailUrl) {
-        imageContainer.innerHTML = `<img data-src="${imageProxyURL}" id="thumbnail-image" alt="${siteTitle} Thumbnail" class="thumbnail-image lazyload masonry-item">`;
-        cardbg.innerHTML = `<div class=noise></div><img data-src="${imageProxyURL}" alt="${siteTitle} Thumbnail" class="card-bg lazyload">`;
+        imageContainer.innerHTML = `<img data-src="${thumbnailUrl}" id="thumbnail-image" alt="${siteTitle} Thumbnail" class="thumbnail-image lazyload masonry-item">`;
+        cardbg.innerHTML = `<div class=noise></div><img data-src="${thumbnailUrl}" alt="${siteTitle} Thumbnail" class="card-bg lazyload">`;
 
     }
 

diff --git a/src/styles.css b/src/styles.css
@@ -682,6 +682,34 @@ cite {
   opacity:.7;
   font-size: .9rem;
 }
+
+.reader-view-page-content blockquote {
+
+  opacity: .8;
+  background: var(--reading-progress-container-background-color);
+  border-left: 8px solid var(--border-color);
+  box-shadow: inset 0 0 0 1px var(--border-color);
+  border-radius: 7px;
+  margin: 1.5em 12px;
+  padding: 1.5em 1.5rem;
+  quotes: "\201C""\201D""\2018""\2019";
+
+}
+
+.reader-view-page-content blockquote p{
+  margin: 0;
+  padding: 0;
+  font-size: 1.15rem;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.8;
+  font-family: var(--font-family);
+  color: var(--color);
+  margin-bottom: 1rem;
+  margin:auto;
+}
+
+
 .reader-view-modal hr.solid {
   border-top: 1px solid #bbb
 }