From 5bb8b633909f5b6ca843e67aadd16d1f3cccb7ae Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Mon, 19 Feb 2024 22:13:47 +0100
Subject: [PATCH] [BUGFIX] tiny sticky issues

---
 templates/app.js    |  2 +-
 templates/style.css | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/templates/app.js b/templates/app.js
index 86759ca..9946f1d 100644
--- a/templates/app.js
+++ b/templates/app.js
@@ -76,7 +76,7 @@ window.addEventListener('scroll', function() {
 })
 
 function apply_stickies() {
-    var _$stickies = [].slice.call(document.querySelectorAll('.sticky'))
+    var _$stickies = [].slice.call(document.querySelectorAll('details[open] .sticky'))
     _$stickies.forEach(function(_$sticky) {
         if (CSS.supports && CSS.supports('position', 'sticky')) {
             apply_sticky_class(_$sticky)
diff --git a/templates/style.css b/templates/style.css
index c4f79fc..e4ef6d6 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -76,15 +76,16 @@ summary h5 {
   flex-grow: 1;
 }
 
-summary.js-is-sticky {
+details[open] summary.js-is-sticky {
   padding: 1.5rem 0;
   background: linear-gradient(0deg, transparent 0%, var(--pico-background-color) 30%);
+  top: -1px;
 }
 
-summary.js-is-sticky h2,
-summary.js-is-sticky h3,
-summary.js-is-sticky h4,
-summary.js-is-sticky h5 { 
+details[open] summary.js-is-sticky h2,
+details[open] summary.js-is-sticky h3,
+details[open] summary.js-is-sticky h4,
+details[open] summary.js-is-sticky h5 { 
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;