pandoc-markdown-jekyll-theme 0.16.0 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98baa39b8f49cae59e4e11b367641634a33c84c7d1d90861d76020957270ad1a
-  data.tar.gz: 85660e4a5eb2f9d6393e7ac71ee2f6d0613ee41e67501d8f53d09626ff8fb56a
+  metadata.gz: 28fe564cdc5cca4dd6beb87d3b9fffdcde844bfcbdc85387c90073175f7fed03
+  data.tar.gz: 3d2cb0e2c945e7476563ffa9807abd5a7fc794d6e1e1b5e7bb5997ffea9d0a74
 SHA512:
-  metadata.gz: c7dd503985f7ea7e230cd87aa068dcbe87c25967683761b1485a3c5cddb4725e1b19e81308f580f6bd6475a4a77dd0668f9f40c431c58408b1c895699079ebb0
-  data.tar.gz: 7457f7e18541d5872ba6d99b35df43d7d155fb8bf125e8f373fbf02123d284c40cdaff0a19e1bc761a5514b2c7e2978f0d729b14ec4b41105501e363ea4456d8
+  metadata.gz: e93ad6edda47e9d731684af8e11f8a18e5b0d856b536cb9bc0145c20fcd7569afa5d2f5445ee1b1d991e7358ed0d06f35823c3884c81bc07dca268c838ac7684
+  data.tar.gz: 5699a081795c049031dfaef74b0cfdc30062b5133d0a8cde6f946ee67d015c90e69c4b2dcf4218ca46a270a29c63b622c1f448549901e8e08216088b997ceaa7

data/README.md

@@ -17,7 +17,10 @@ installation is as easy as:
 
 ```bash
 brew install pandoc
-brew install jez/formulae/pandoc-sidenote
+
+curl --remote-name --no-clobber --create-dirs \
+  --output-dir "${XDG_DATA_DIR:-$HOME/.local/share/}/pandoc/filters" \
+  -sSL "https://github.com/jez/pandoc-sidenote/raw/refs/heads/master/pandoc-sidenote.lua"
 ```
 
 Next, add this line to your Jekyll site's Gemfile:
@@ -55,7 +58,7 @@ markdown: Pandoc
 pandoc:
   extensions:
     - from: 'markdown+smart+tex_math_single_backslash'
-    - filter: 'pandoc-sidenote'
+    - lua-filter: 'pandoc-sidenote.lua'
     - template: '_template'
     - katex
     - toc
@@ -109,9 +112,10 @@ The following variables are used by this theme.
 - `page.dir`
   - Sets the HTML dir attribute. Default: `'ltr'`
 
-You can also define:
+You can also define either of:
 
 - `_includes/enable_checkboxes.html`
+- `_includes/block_based_side_notes.html`
 
 to be an empty file in your project to remove the only non-math JavaScript.
 

data/_includes/block_based_side_notes.html

@@ -0,0 +1 @@
+  <script src="{{ site.baseurl }}/assets/js/block_based_side_notes.js"></script>

data/_includes/default.html

@@ -11,6 +11,7 @@
 
   {% include footer.html %}
   {% include enable_checkboxes.html %}
+  {% include block_based_side_notes.html %}
   {% include after.html %}
 </body>
 </html>

data/assets/css/theme.css

@@ -206,22 +206,36 @@ body {
   margin-top: var(--side-note-baseline-offset);
 }
 
+:is(.sidenote, .marginnote) figcaption {
+  font-size: var(--side-note-font-size);
+  line-height: var(--side-note-line-height);
+}
+
 .sidenote code,
 .marginnote code {
   color: var(--color-sidenote);
 }
 
+/* Make paragraph breaks within sidenotes smaller. */
+main > .sidenote-wrapper > :is(.marginnote, .sidenote) {
+  margin-bottom: var(--side-note-line-height);
+}
+
 main {
-  counter-reset: sidenote-counter;
+  counter-reset: sidenote-counter-anchor sidenote-counter;
 }
 
-.sidenote-number {
-  counter-increment: sidenote-counter;
+.sidenote-number:after {
+  counter-increment: sidenote-counter-anchor;
+  content: counter(sidenote-counter-anchor);
 }
 
-.sidenote-number:after,
 .sidenote:before {
+  counter-increment: sidenote-counter;
   content: counter(sidenote-counter);
+}
+.sidenote-number:after,
+.sidenote:before {
   position: relative;
 }
 
@@ -248,10 +262,11 @@ sup {
   font-weight: inherit;
 }
 
-/* Make the superscript hang. */
-.sidenote:before { left: var(--side-note-number-hang-left); }
-/* Get first first column of first row to line up with other rows. */
-.sidenote { text-indent: var(--side-note-text-indent); }
+/* Make the superscript hang in the margin. */
+.sidenote:before {
+  position: absolute;
+  right: calc(100% + 0.5ch);
+}
 
 /*}}} */
 /* --- Side note input controls --- {{{ */
@@ -345,18 +360,60 @@ h3 {
   font-weight: bold;
 }
 
-h1:not(.title) + *, h1:not(.title) + p { margin-top: var(--h1-margin-bottom); }
-h2 + *, h2 + p                         { margin-top: var(--h2-margin-bottom); }
-h3 + *, h3 + p                         { margin-top: 0; }
+/* No one should ever have more than 4 sidenotes immediately after a heading */
+/* 0 */ h1:not(.title) + :is(*:not(.sidenote-wrapper), p),
+/* 1 */ h1:not(.title) + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 2 */ h1:not(.title) + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 3 */ h1:not(.title) + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 4 */ h1:not(.title) + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p) {
+  margin-top: var(--h1-margin-bottom);
+}
+/* 0 */ h2 + :is(*:not(.sidenote-wrapper), p),
+/* 1 */ h2 + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 2 */ h2 + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 3 */ h2 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 4 */ h2 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p) {
+  margin-top: var(--h2-margin-bottom);
+}
+/* 0 */ h3 + :is(*:not(.sidenote-wrapper), p),
+/* 1 */ h3 + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 2 */ h3 + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 3 */ h3 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 4 */ h3 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p) {
+  margin-top: 0;
+}
 
 /* }}} */
 /* ----- Prose --------------------------------------------------------- {{{ */
 
-p, main > ul, main > ol, div.sourceCode, main > pre, img, table {
+p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote {
   margin-top: var(--line-height);
   margin-bottom: var(--line-height)
 }
 
+:is(.marginnote, .sidenote) :is(p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote) {
+  margin-top: var(--side-note-font-size);
+  margin-bottom: var(--side-note-font-size);
+}
+
+/* Block-style sidenotes will have `p` tags in them, but we need to not have extra margins. */
+.sidenote-wrapper > :is(.marginnote, .sidenote) > :is(p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote):first-child {
+  margin-top: 0;
+}
+.sidenote-wrapper > :is(.marginnote, .sidenote) > :is(p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote):last-child {
+  margin-bottom: 0;
+}
+
+.wide > p:first-child,
+.wide > table:first-child,
+:is(p, figure) > img:first-child {
+  margin-top: 0;
+}
+.wide > p:last-child,
+:is(p, figure) > img:last-child {
+  margin-bottom: 0;
+}
+
 ul:not(.task-list) {
   margin-left: var(--ul-indent-size);
 }
@@ -528,11 +585,6 @@ pre > code {
   padding: 0 var(--code-block-side-padding);
 }
 
-code.sourceCode::selection {
-  /* Prevent bug where far right edge of text box shows as selected. */
-  background: transparent;
-}
-
 .wide > pre, .wide > div.sourceCode {
   /* Put this in front of the table of contents */
   transform: translateZ(0px);
@@ -550,7 +602,7 @@ pre > code.sourceCode > span {
   line-height: var(--line-height);
 
   display: inline-block;
-  min-width: 100%;
+  position: relative;
 }
 
 div.sourceCode {
@@ -568,8 +620,7 @@ pre.numberSource > code.sourceCode > span {
   counter-increment: source-line;
   padding-left: var(--line-numbers-width);
   text-indent: var(--line-numbers-negative-width);
-  position: relative;
-  left: var(--line-numbers-negative-width);
+  margin-left: var(--line-numbers-negative-width);
 }
 pre.numberSource > code.sourceCode > span > a:first-child::before {
   -webkit-touch-callout: none;
@@ -626,12 +677,16 @@ pre > code.sourceCode > span::after {
   position: absolute;
   background-color: var(--color-code-highlight-bg);
   z-index: -1;
-  left: calc(var(--line-numbers-width) - var(--code-block-side-padding));
-  right: calc(var(--line-numbers-negative-width) - var(--code-block-side-padding));
+  left: calc(-1 * var(--code-block-side-padding));
+  right: calc(-1 * var(--code-block-side-padding));
   top: 0;
   height: 100%;
 }
 
+pre.numberSource > code.sourceCode > span::after {
+  left: calc(var(--line-numbers-width) - var(--code-block-side-padding));
+}
+
 pre.hl-1  > code.sourceCode > span:nth-of-type(1)::after  { content: ""; }
 pre.hl-2  > code.sourceCode > span:nth-of-type(2)::after  { content: ""; }
 pre.hl-3  > code.sourceCode > span:nth-of-type(3)::after  { content: ""; }
@@ -673,6 +728,107 @@ pre.hl-38 > code.sourceCode > span:nth-of-type(38)::after { content: ""; }
 pre.hl-39 > code.sourceCode > span:nth-of-type(39)::after { content: ""; }
 pre.hl-40 > code.sourceCode > span:nth-of-type(40)::after { content: ""; }
 
+/**
+ * The span needs to be at least as big as the enclosing code block, or else
+ * the ::after highlight will not be wide enough.
+ *
+ * Ideally, we would set this on all spans, regardless of whether it's got a
+ * highlight or not. But in Chrome, setting a min-width on an inline-block
+ * element makes Chrome think that the newline character is at the very end of
+ * the element. It's like Chrome puts empty space bewteen the last character of
+ * the line and the newline to get it up to the min-width, instead of putting
+ * that extra space after the newline.
+ *
+ * This is normally invisible, unless you're selecting text to copy it, in
+ * which case it's jarring to see Chrome selecting a newline character off in
+ * space. We want to minimize that so that it happens as little as possible.
+ * Namely, selecting code that does not have a background `.hl-*` will not show
+ * a weird floating newline.
+ *
+ * This seems to only affect Chrome, because only Chrome shows the newline as a
+ * part of the selection.
+ */
+pre.hl-1  > code.sourceCode > span:nth-of-type(1)  { min-width: 100%; }
+pre.hl-2  > code.sourceCode > span:nth-of-type(2)  { min-width: 100%; }
+pre.hl-3  > code.sourceCode > span:nth-of-type(3)  { min-width: 100%; }
+pre.hl-4  > code.sourceCode > span:nth-of-type(4)  { min-width: 100%; }
+pre.hl-5  > code.sourceCode > span:nth-of-type(5)  { min-width: 100%; }
+pre.hl-6  > code.sourceCode > span:nth-of-type(6)  { min-width: 100%; }
+pre.hl-7  > code.sourceCode > span:nth-of-type(7)  { min-width: 100%; }
+pre.hl-8  > code.sourceCode > span:nth-of-type(8)  { min-width: 100%; }
+pre.hl-9  > code.sourceCode > span:nth-of-type(9)  { min-width: 100%; }
+pre.hl-10 > code.sourceCode > span:nth-of-type(10) { min-width: 100%; }
+pre.hl-11 > code.sourceCode > span:nth-of-type(11) { min-width: 100%; }
+pre.hl-12 > code.sourceCode > span:nth-of-type(12) { min-width: 100%; }
+pre.hl-13 > code.sourceCode > span:nth-of-type(13) { min-width: 100%; }
+pre.hl-14 > code.sourceCode > span:nth-of-type(14) { min-width: 100%; }
+pre.hl-15 > code.sourceCode > span:nth-of-type(15) { min-width: 100%; }
+pre.hl-16 > code.sourceCode > span:nth-of-type(16) { min-width: 100%; }
+pre.hl-17 > code.sourceCode > span:nth-of-type(17) { min-width: 100%; }
+pre.hl-18 > code.sourceCode > span:nth-of-type(18) { min-width: 100%; }
+pre.hl-19 > code.sourceCode > span:nth-of-type(19) { min-width: 100%; }
+pre.hl-20 > code.sourceCode > span:nth-of-type(20) { min-width: 100%; }
+pre.hl-21 > code.sourceCode > span:nth-of-type(21) { min-width: 100%; }
+pre.hl-22 > code.sourceCode > span:nth-of-type(22) { min-width: 100%; }
+pre.hl-23 > code.sourceCode > span:nth-of-type(23) { min-width: 100%; }
+pre.hl-24 > code.sourceCode > span:nth-of-type(24) { min-width: 100%; }
+pre.hl-25 > code.sourceCode > span:nth-of-type(25) { min-width: 100%; }
+pre.hl-26 > code.sourceCode > span:nth-of-type(26) { min-width: 100%; }
+pre.hl-27 > code.sourceCode > span:nth-of-type(27) { min-width: 100%; }
+pre.hl-28 > code.sourceCode > span:nth-of-type(28) { min-width: 100%; }
+pre.hl-29 > code.sourceCode > span:nth-of-type(29) { min-width: 100%; }
+pre.hl-30 > code.sourceCode > span:nth-of-type(30) { min-width: 100%; }
+pre.hl-31 > code.sourceCode > span:nth-of-type(31) { min-width: 100%; }
+pre.hl-32 > code.sourceCode > span:nth-of-type(32) { min-width: 100%; }
+pre.hl-33 > code.sourceCode > span:nth-of-type(33) { min-width: 100%; }
+pre.hl-34 > code.sourceCode > span:nth-of-type(34) { min-width: 100%; }
+pre.hl-35 > code.sourceCode > span:nth-of-type(35) { min-width: 100%; }
+pre.hl-36 > code.sourceCode > span:nth-of-type(36) { min-width: 100%; }
+pre.hl-37 > code.sourceCode > span:nth-of-type(37) { min-width: 100%; }
+pre.hl-38 > code.sourceCode > span:nth-of-type(38) { min-width: 100%; }
+pre.hl-39 > code.sourceCode > span:nth-of-type(39) { min-width: 100%; }
+pre.hl-40 > code.sourceCode > span:nth-of-type(40) { min-width: 100%; }
+pre.numberSource.hl-1  > code.sourceCode > span:nth-of-type(1)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-2  > code.sourceCode > span:nth-of-type(2)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-3  > code.sourceCode > span:nth-of-type(3)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-4  > code.sourceCode > span:nth-of-type(4)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-5  > code.sourceCode > span:nth-of-type(5)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-6  > code.sourceCode > span:nth-of-type(6)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-7  > code.sourceCode > span:nth-of-type(7)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-8  > code.sourceCode > span:nth-of-type(8)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-9  > code.sourceCode > span:nth-of-type(9)  { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-10 > code.sourceCode > span:nth-of-type(10) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-11 > code.sourceCode > span:nth-of-type(11) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-12 > code.sourceCode > span:nth-of-type(12) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-13 > code.sourceCode > span:nth-of-type(13) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-14 > code.sourceCode > span:nth-of-type(14) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-15 > code.sourceCode > span:nth-of-type(15) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-16 > code.sourceCode > span:nth-of-type(16) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-17 > code.sourceCode > span:nth-of-type(17) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-18 > code.sourceCode > span:nth-of-type(18) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-19 > code.sourceCode > span:nth-of-type(19) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-20 > code.sourceCode > span:nth-of-type(20) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-21 > code.sourceCode > span:nth-of-type(21) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-22 > code.sourceCode > span:nth-of-type(22) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-23 > code.sourceCode > span:nth-of-type(23) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-24 > code.sourceCode > span:nth-of-type(24) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-25 > code.sourceCode > span:nth-of-type(25) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-26 > code.sourceCode > span:nth-of-type(26) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-27 > code.sourceCode > span:nth-of-type(27) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-28 > code.sourceCode > span:nth-of-type(28) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-29 > code.sourceCode > span:nth-of-type(29) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-30 > code.sourceCode > span:nth-of-type(30) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-31 > code.sourceCode > span:nth-of-type(31) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-32 > code.sourceCode > span:nth-of-type(32) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-33 > code.sourceCode > span:nth-of-type(33) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-34 > code.sourceCode > span:nth-of-type(34) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-35 > code.sourceCode > span:nth-of-type(35) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-36 > code.sourceCode > span:nth-of-type(36) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-37 > code.sourceCode > span:nth-of-type(37) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-38 > code.sourceCode > span:nth-of-type(38) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-39 > code.sourceCode > span:nth-of-type(39) { min-width: calc(100% + var(--line-numbers-width)); }
+pre.numberSource.hl-40 > code.sourceCode > span:nth-of-type(40) { min-width: calc(100% + var(--line-numbers-width)); }
+
 /* }}} */
 
 /* }}} */
@@ -687,7 +843,10 @@ figure + p {
   margin-top: var(--captioned-figure-gap);
 }
 
-figure > img, figure > pre, figure > div.sourceCode {
+figure > img, figure > pre, figure > div.sourceCode, figure:not(.wide) > div.sourceCode {
+  margin-bottom: var(--figcaption-gap);
+}
+:is(.sidenote, .marginnote) :is(figure > img, figure > pre, figure > div.sourceCode, figure:not(.wide) > div.sourceCode) {
   margin-bottom: var(--figcaption-gap);
 }
 
@@ -1085,6 +1244,11 @@ nav#TOC > input:checked + ul {
 
   .wide {
     width: var(--main-width);
+  }
+  .sidenote-wrapper .wide {
+    width: 100%;
+  }
+  .wide {
     overflow-x: auto;
     overflow-y: hidden;
   }
@@ -1121,10 +1285,20 @@ nav#TOC > input:checked + ul {
     margin-right: var(--line-height);
   }
 
-  .sidenote,
-  .marginnote {
+  .margin-toggle:not(:checked) + .marginnote {
     display: none;
   }
+  .margin-toggle:not(:checked) + .sidenote {
+    /* .sidenote is special because .sidenote:before tracks the counter,
+     * and counters don't increment for display: none;
+     * https://stackoverflow.com/a/36600119
+     * */
+    position: absolute;
+    left: -9999px;
+    max-height: 0px;
+    overflow: hidden;
+    opacity: 0;
+  }
 
   .margin-toggle:checked + .sidenote,
   .margin-toggle:checked + .marginnote {

data/assets/js/block_based_side_notes.js

@@ -0,0 +1,46 @@
+;(function() {
+  function hoistAbove() {
+    const toHoist = document.querySelectorAll('main > .sidenote-wrapper + :not(.sidenote-wrapper)');
+    for (let i = toHoist.length - 1; i >= 0; i--) {
+      const source = toHoist[i];
+      let target = source.previousElementSibling;
+      while (target.previousElementSibling.classList.contains('sidenote-wrapper')) {
+        target = target.previousElementSibling;
+      }
+      source.parentNode.insertBefore(source, target);
+    }
+  }
+
+  function sinkBelow() {
+    const toHoist = document.querySelectorAll('main > :not(.sidenote-wrapper) + .sidenote-wrapper');
+    for (let i = 0; i < toHoist.length; i++) {
+      const source = toHoist[i].previousElementSibling;
+      let target = source.nextElementSibling;
+      while (target.classList.contains('sidenote-wrapper')) {
+        target = target.nextElementSibling;
+      }
+      source.parentNode.insertBefore(source, target);
+    }
+  }
+
+  if (window.matchMedia('screen')) {
+    if (window.innerWidth <= 796) {
+      hoistAbove();
+    }
+    let prevSize = window.innerWidth;
+    // Needs to mirror breakpoints in :root settings in CSS variables
+    // 745px = --main-width-narrow
+    // 26px = --line-height
+    // 169px = side note min width narrow
+    const breakpoint = 26 + 550 + 26 + 169 + 26 - 1;
+    window.addEventListener('resize', function() {
+      const newSize = window.innerWidth;
+      if (prevSize >= breakpoint && newSize < breakpoint) {
+        hoistAbove();
+      } else if (prevSize < breakpoint && newSize >= breakpoint) {
+        sinkBelow();
+      }
+      prevSize = newSize;
+    });
+  }
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pandoc-markdown-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.16.0
+  version: 0.18.0
 platform: ruby
 authors:
 - Jake Zimmerman
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-01 00:00:00.000000000 Z
+date: 2026-01-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll-pandoc
@@ -66,7 +66,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
-description: 
+description:
 email:
 - zimmerman.jake@gmail.com
 executables: []
@@ -76,6 +76,7 @@ files:
 - README.md
 - _includes/after.html
 - _includes/before.html
+- _includes/block_based_side_notes.html
 - _includes/default.html
 - _includes/enable_checkboxes.html
 - _includes/footer.html
@@ -88,6 +89,7 @@ files:
 - _template.html5
 - assets/css/skylighting-solarized-theme.css
 - assets/css/theme.css
+- assets/js/block_based_side_notes.js
 - assets/js/enable_checkboxes.js
 - assets/js/enable_katex.js
 - assets/libs/KaTeX/0.11.1/fonts/KaTeX_AMS-Regular.ttf
@@ -156,7 +158,7 @@ homepage: https://github.com/jez/pandoc-markdown-jekyll-theme
 licenses:
 - BlueOak-1.0.0
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -171,8 +173,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3.1
-signing_key: 
+rubygems_version: 3.1.2
+signing_key:
 specification_version: 4
 summary: A Jekyll theme based on jez/pandoc-markdown-css-theme
 test_files: []