From fb1449689b548b67c037975db52fc60082a96a90 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Wed, 5 Feb 2025 01:32:33 -0800
Subject: [PATCH] css tweaks

---
 static/css/style.css | 14 ++++++++++++++
 static/js/app.js     |  7 ++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/static/css/style.css b/static/css/style.css
index 76089de..d9e674e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -515,6 +515,20 @@ button:disabled {
     border-radius: 8px;
     padding: 1.5rem;
     margin-bottom: 1rem;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.feed-entry.read {
+    background-color: var(--dark-bg);
+    opacity: 0.8;
+}
+
+.feed-entry.read .feed-entry-title a {
+    color: var(--text-muted);
+}
+
+.feed-entry.read .feed-entry-summary {
+    color: var(--text-muted);
 }
 
 .feed-entry-title {
diff --git a/static/js/app.js b/static/js/app.js
index 33143cc..96e89b6 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -40,8 +40,11 @@ function renderFeedEntries(entries) {
     mainContent.innerHTML = '';
 
     entries.forEach(entry => {
-        const entryDiv = document.createElement('div');
+        const entryDiv = document.createElement('article');
         entryDiv.className = 'feed-entry';
+        if (entry.marked_read) {
+            entryDiv.classList.add('read');
+        }
 
         const title = document.createElement('h2');
         title.className = 'feed-entry-title';
@@ -70,6 +73,7 @@ function renderFeedEntries(entries) {
                     readToggle.innerHTML = entry.marked_read 
                         ? '<i class="fa-solid fa-square-check"></i>'
                         : '<i class="fa-regular fa-square"></i>';
+                    entryDiv.classList.toggle('read', entry.marked_read);
                 } else {
                     console.error('Failed to update read state:', response.status);
                 }
@@ -99,6 +103,7 @@ function renderFeedEntries(entries) {
                         entry.marked_read = true;
                         readToggle.title = 'Mark as unread';
                         readToggle.innerHTML = '<i class="fa-solid fa-square-check"></i>';
+                        entryDiv.classList.add('read');
                     } else {
                         console.error('Failed to update read state:', response.status);
                     }