Improve scroll-to-read robustness and add visual feedback for read items across all themes

1 files changed, 15 insertions, 4 deletions

diff --git a/web/dist/v3/themes/sakura.css b/web/dist/v3/themes/sakura.css
index 48a1c0a..948e22e 100644
--- a/web/dist/v3/themes/sakura.css
+++ b/web/dist/v3/themes/sakura.css
@@ -184,7 +184,7 @@ body {
   padding: 2.5rem 2rem;
 }
 
-.main-content > * {
+.main-content>* {
   max-width: 34em;
 }
 
@@ -195,10 +195,20 @@ body {
   margin-top: 2.5rem;
   border-radius: 0;
   border-bottom: none;
+  transition: opacity 0.4s ease;
+}
+
+.feed-item.read {
+  opacity: 0.4;
+}
+
+.feed-item.read .item-title {
+  color: var(--sakura-stone);
+  font-weight: 400;
 }
 
 /* Subtle separator -- a single thin rule, Japanese-style restraint */
-.feed-item + .feed-item {
+.feed-item+.feed-item {
   border-top: 1px solid var(--sakura-shadow);
   padding-top: 2.5rem;
 }
@@ -462,6 +472,7 @@ select:focus {
 }
 
 /* ---- Loading/Empty ---- */
-.loading, .empty {
+.loading,
+.empty {
   color: var(--sakura-stone);
-}
+}
\ No newline at end of file