basic left,right layout

quartz/components/scripts/callout.inline.ts

@@ -6,19 +6,21 @@ function toggleCallout(this: HTMLElement) {
   outerBlock.style.maxHeight = height + `px`
 }
 
-function setupCallout(div: HTMLElement) {
-  const collapsed = div.classList.contains(`is-collapsed`)
-  const title = div.firstElementChild!
-  const height = collapsed ? title.scrollHeight : div.scrollHeight
-  div.style.maxHeight = height + `px`
-}
-
-document.addEventListener(`nav`, () => {
+function setupCallout() {
   const collapsible = document.getElementsByClassName(`callout is-collapsible`) as HTMLCollectionOf<HTMLElement>
   for (const div of collapsible) {
     const title = div.firstElementChild
-    setupCallout(div)
-    title?.removeEventListener(`click`, toggleCallout)
-    title?.addEventListener(`click`, toggleCallout)
+
+    if (title) {
+      title.removeEventListener(`click`, toggleCallout)
+      title.addEventListener(`click`, toggleCallout)
+
+      const collapsed = div.classList.contains(`is-collapsed`)
+      const height = collapsed ? title.scrollHeight : div.scrollHeight
+      div.style.maxHeight = height + `px`
+    }
   }
-})
+}
+
+document.addEventListener(`nav`, setupCallout)
+window.addEventListener(`resize`, setupCallout)

quartz/components/scripts/toc.inline.ts

@@ -14,19 +14,24 @@ const observer = new IntersectionObserver(entries => {
   }
 })
 
-function toggleCollapsible(this: HTMLElement) {
+function toggleToc(this: HTMLElement) {
   this.classList.toggle("collapsed")
   const content = this.nextElementSibling as HTMLElement
   content.classList.toggle("collapsed")
   content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }
 
-document.addEventListener("nav", () => {
+function setupToc() {
   const toc = document.getElementById("toc")!
   const content = toc.nextElementSibling as HTMLElement
   content.style.maxHeight = content.scrollHeight + "px"
-  toc.removeEventListener("click", toggleCollapsible)
-  toc.addEventListener("click", toggleCollapsible)
+  toc.removeEventListener("click", toggleToc)
+  toc.addEventListener("click", toggleToc)
+}
+
+window.addEventListener("resize", setupToc)
+document.addEventListener("nav", () => {
+  setupToc()
 
   // update toc entry highlighting
   observer.disconnect()