3 files changed, 45 insertions, 0 deletions
diff --git a/http/src/css/base.uppcss b/http/src/css/base.uppcss
index b0e8565..e67e5c0 100644
--- a/http/src/css/base.uppcss
+++ b/http/src/css/base.uppcss
@@ -464,6 +464,15 @@ form {
   }
 }
 
+button {
+  background-color: var(--colour-primary-bg-accent);
+  color: var(--colour-primary-fg-accent);
+  outline: none;
+  border: solid 1px var(--colour-primary-fg-accent);
+  padding-inline: var(--spacing-inline-xs);
+  cursor: pointer;
+}
+
 /* dialogs */
 
 dialog {
diff --git a/http/src/css/feed.uppcss b/http/src/css/feed.uppcss
index 60fcd6d..8724b9f 100644
--- a/http/src/css/feed.uppcss
+++ b/http/src/css/feed.uppcss
@@ -43,3 +43,14 @@
 .h-feed :is(a.full-feed-link, .full-feed-link a)::after {
   content: ' >';
 }
+
+.e-content:not(.e-content--expanded) {
+  height: 10rem;
+  border-bottom: solid 1px;
+}
+
+.h-entry > button {
+  width: min-content;
+  align-self: center;
+  margin-block-start: var(--spacing-block-xs);
+}
diff --git a/http/src/js/feed-condense-content.js b/http/src/js/feed-condense-content.js
new file mode 100644
index 0000000..02361b5
--- /dev/null
+++ b/http/src/js/feed-condense-content.js
@@ -0,0 +1,25 @@
+const expandedClass = "e-content--expanded";
+
+function toggleContentExpanded(id) {
+  const content = document.querySelector(`[data-content-id=${id}`);
+  if (!content) {
+    throw new Error(`No content found with ID: ${id}`);
+  }
+  const classes = content.getAttribute("class").split(" ");
+  if (classes.includes(expandedClass)) {
+    const newClasses = classes.filter((c) => c != expandedClass);
+    content.setAttribute("class", newClasses.join(" "));
+  } else {
+    content.setAttribute("class", [...classes, expandedClass].join(" "));
+  }
+}
+
+function addExpandItemButtons() {
+  for (const content of document.querySelectorAll(".e-content")) {
+    const contentId = crypto.randomUUID();
+    content.setAttribute("data-content-id", contentId);
+    const button = new HTMLButtonElement();
+    button.onclick = `toggleContentExpanded(${contentId})`;
+    content.insertAdjacentElement("afterend", button);
+  }
+}