1 files changed, 62 insertions, 0 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-sticky-header.scss b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
new file mode 100644
index 0000000..e5baac2
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
@@ -0,0 +1,62 @@
+/*
+ * sticky header and container for sections
+ */
+
+$sticky-title-height: 10rem !default;
+.sticky-title {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
+  padding: .5em .75em;
+  background: inherit;
+  z-index: 11;
+}
+.sticky-title--onTop {
+  box-shadow: none;
+}
+.sticky-title--noPadding {
+  padding: 0;
+}
+
+.container-section-sticky {
+  padding: 3em 2em 0 2em;
+  max-width: 120ch; // avoid too long lines
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container-section-sticky.pt0 { // 😓
+  padding-top: 0;
+}
+
+.container-section-sticky--fullwidth {
+  max-width: none;
+}
+
+.container-section-sticky-section {
+  margin-bottom: 8rem;
+}
+
+
+/* trick for fixing anchor links */
+.header-height-anchor {
+  position: absolute;
+  top: -#{$sticky-title-height};
+}
+
+// not sticky on mobile
+@include respond-to($breakpoint-small) {
+  .sticky-title:not(.onmobile-remain-sticky) {
+    position: static;
+    box-shadow: none;
+  }
+  .container-section-sticky-section {
+    margin-bottom: 8rem;
+  }
+  .header-height-anchor {
+    position: static;
+    top: 0;
+  }
+}
+