basic left,right layout

quartz/components/TagList.tsx

@@ -6,7 +6,7 @@ function TagList({ fileData }: QuartzComponentProps) {
   const tags = fileData.frontmatter?.tags
   const slug = fileData.slug!
   const baseDir = resolveToRoot(slug)
-  if (tags) {
+  if (tags && tags.length > 0) {
     return <ul class="tags">{tags.map(tag => {
       const display = `#${tag}`
       const linkDest = baseDir + `/tags/${slugAnchor(tag)}`

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()

quartz/components/styles/darkmode.scss

@@ -4,10 +4,6 @@
   min-width: 30px;
   position: relative;
 
-  @media all and (max-width: 450px) {
-    padding: 1rem;
-  }
-
   & > .toggle {
     display: none;
     box-sizing: border-box;