From 24f90f36a070ddc260dbe3bfcb962ee0d3850af6 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 2 Apr 2026 22:52:42 -0700
Subject: [PATCH] add styles for side-note page bg

---
 app/globals.css | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 9c75c91c..c86b2665 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -592,18 +592,28 @@ pre.shiki {
 }
 
 .footnote-side-item {
-  max-height: 4.5em;
   overflow: hidden;
   transition:
     max-height 200ms ease,
-    mask-image 200ms ease;
-}
-.footnote-side-item.has-overflow {
-  mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
+    opacity 200ms ease;
+  background: rgba(var(--bg-page), var(--bg-page-alpha));
+  border-radius: 4px;
+  padding: 4px 6px;
+}
+.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused) {
+  max-height: calc(4.5em + 8px);
+  opacity: calc(var(--bg-page-alpha) * 0.7);
+}
+.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused) .footnote-item > div:last-of-type {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .footnote-side-item:hover,
 .footnote-side-item:focus-within,
 .footnote-side-item.footnote-side-focused {
   max-height: 40em;
-  mask-image: none;
+  opacity: var(--bg-page-alpha);
 }
-- 
2.51.2