sticky subheadings

1 files changed, 67 insertions, 3 deletions

diff --git a/src/static/site2.css b/src/static/site2.css
index 33553e84..070d89ee 100644
--- a/src/static/site2.css
+++ b/src/static/site2.css
@@ -983,11 +983,15 @@ li > ul {
 
 /* sticky headers */
 
-#content:not(.no-sticky-heading) h1:first-of-type,
+#content:not(.no-sticky-heading) > h1:first-of-type,
 .sidebar:not(.no-sticky-heading) h1:first-of-type {
   position: sticky;
   top: 0;
+}
 
+#content .content-sticky-heading-container h1,
+#content:not(.no-sticky-heading) > h1:first-of-type,
+.sidebar:not(.no-sticky-heading) h1:first-of-type {
   margin: calc(-1 * var(--content-padding));
   margin-bottom: calc(0.5 * var(--content-padding));
   padding:
@@ -997,14 +1001,74 @@ li > ul {
     20px;
 
   background: var(--bg-black-color);
-  border-bottom: 1px dotted rgba(180, 180, 180, 0.4);
+  border-bottom: 1px dotted rgba(220, 220, 220, 0.4);
 
   -webkit-backdrop-filter: blur(6px);
           backdrop-filter: blur(6px);
 }
 
-#content:not(.no-sticky-heading) h1:first-of-type {
+#content .content-sticky-heading-container {
+  position: sticky;
+  top: 0;
+
+  /* Safari doesn't always play nicely with position: sticky,
+   * this seems to fix images sometimes displaying above the
+   * position: absolute subheading (h2) child
+   *
+   * See also: https://stackoverflow.com/questions/50224855/
+   */
+  transform: translate3d(0, 0, 0);
   z-index: 1;
+}
+
+#content .content-sticky-heading-container h1 {
+  margin-bottom: 0;
+}
+
+#content .content-sticky-heading-container h2 {
+  position: absolute;
+  margin: 0 calc(-1 * var(--content-padding));
+  width: 100%;
+  padding: 10px 40px 5px 20px;
+
+  font-size: 0.9em;
+  font-weight: normal;
+  font-style: oblique;
+  color: #eee;
+
+  background: var(--bg-black-color);
+  border-bottom: 1px dotted rgba(220, 220, 220, 0.4);
+
+  -webkit-backdrop-filter: blur(3px);
+          backdrop-filter: blur(3px);
+
+  transition: margin-top 0.35s, opacity 0.25s;
+}
+
+#content .content-sticky-heading-container h2:not(.visible) {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+#content .content-sticky-heading-container h2.visible {
+  margin-top: 0;
+  opacity: 1;
+}
+
+#content:not(.no-sticky-heading) > h1:first-of-type {
+  z-index: 1;
+  box-shadow:
+    inset 0 10px 10px -5px var(--shadow-color),
+    0 4px 4px rgba(0, 0, 0, 0.8);
+}
+
+#content .content-sticky-heading-container h1 {
+  box-shadow:
+    inset 0 10px 10px -5px var(--shadow-color),
+    0 4px 4px rgba(0, 0, 0, 0.8);
+}
+
+#content .content-sticky-heading-container h2.visible {
   box-shadow:
     inset 0 10px 10px -5px var(--shadow-color),
     0 4px 4px rgba(0, 0, 0, 0.8);