Infra: update canonical banners to not stick on small screens (#3559)

Updates small media sizes to not have a sticky banner
Adds a helper close button to optionally close banner

Closes #3536

pep_sphinx_extensions/pep_processor/parsing/pep_banner_directive.py

@@ -34,6 +34,9 @@ class PEPBanner(rst.Directive):
         else:
             pre_text = self.admonition_pre_text
 
+        close_button_node = nodes.paragraph('', '', nodes.Text('×'), classes=['close-button'])
+        close_button_node['classes'].append('close-button')
+
         pre_text_node = nodes.paragraph(pre_text)
         pre_text_node.line = self.lineno
         pre_node, pre_msg = self.state.inline_text(pre_text, self.lineno)
@@ -50,6 +53,7 @@ class PEPBanner(rst.Directive):
             "\n".join(source_lines), classes=["pep-banner"] + self.css_classes)
 
         admonition_node.append(pre_text_node)
+        admonition_node.append(close_button_node)
         if self.content:
             self.state.nested_parse(
                 self.content, self.content_offset, admonition_node)

pep_sphinx_extensions/pep_theme/static/sticky_banner.js

@@ -22,6 +22,16 @@ document.addEventListener("DOMContentLoaded", () => {
     node.replaceChildren(text);
   }
 
+  const closeButton = document.querySelector('.close-button');
+  if (closeButton) {
+    closeButton.addEventListener('click', () => {
+      const stickyBanner = document.querySelector('.sticky-banner');
+      if (stickyBanner) {
+        stickyBanner.style.display = 'none';
+      }
+    });
+  }
+
   adjustBannerMargin();
   document.addEventListener("resize", adjustBannerMargin);
   document.addEventListener("load", adjustBannerMargin);

pep_sphinx_extensions/pep_theme/static/style.css

@@ -407,8 +407,31 @@ dl.footnote > dd {
 }
 
 /* Sticky banners */
+/* Default styles, sticky for larger screens */
 .sticky-banner {
   top: 0;
   position: sticky;
   z-index: 1;
 }
+
+/* Override for smaller screens, non-sticky */
+@media (max-width: 600px) {
+  .sticky-banner {
+    position: static;
+    padding: 5px;
+    font-size: 12px;
+  }
+}
+
+.close-button {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.5em;
+  font-size: 1.5em;
+  border: none;
+  background: transparent;
+  color: inherit;
+  margin-top: 0;
+}