diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index 8334ea2ee..a6a6b5378 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
 
       - name: Build Link Index
-        uses: jackyzha0/hugo-obsidian@v2.13
+        uses: jackyzha0/hugo-obsidian@v2.17
         with:
           index: true
           input: content
diff --git a/.gitignore b/.gitignore
index 1f6e10c94..616d3a702 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ assets/indices/contentIndex.json
 content/vault/textbooks/
 content/vault/private/
 content/vault/pocket/
+linkmap
\ No newline at end of file
diff --git a/Makefile b/Makefile
index 0d29bdacf..5a88927fa 100644
--- a/Makefile
+++ b/Makefile
@@ -17,4 +17,4 @@ update-force: ## Forcefully pull all changes and don't ask to patch
 	git checkout upstream/hugo -- layouts .github Makefile assets/js assets/styles/base.scss assets/styles/darkmode.scss config.toml data
 
 serve: ## Serve Quartz locally
-	hugo-obsidian -input=content -output=assets/indices -index -root=. && hugo server --enableGitInfo
+	hugo-obsidian -input=content -output=assets/indices -index -root=. && hugo server --enableGitInfo --minify
diff --git a/README.md b/README.md
index 125514a3f..717103c1a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Quartz
 
-Host your second brain and [digital garden](https://jzhao.xyz/posts/digital-gardening) for free. Quartz features
+Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-thought) for free. Quartz features
 
 1. Extremely fast full-text search by pressing `Ctrl` + `k`
 2. Customizable and hackable design based on Hugo
@@ -8,6 +8,8 @@ Host your second brain and [digital garden](https://jzhao.xyz/posts/digital-gard
 4. Built-in CJK + Latex Support
 5. Support for both Markdown Links and Wikilinks
 
+Check out some of the [amazing gardens that community members](https://quartz.jzhao.xyz/notes/showcase/) have published with Quartz!
+
 > “[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.” — Richard Hamming
 
 🔗 Get Started: https://quartz.jzhao.xyz/
diff --git a/assets/js/callouts.js b/assets/js/callouts.js
new file mode 100644
index 000000000..080bbb489
--- /dev/null
+++ b/assets/js/callouts.js
@@ -0,0 +1,6 @@
+const addCollapsibleCallouts = () => {
+    const collapsibleCallouts = document.querySelectorAll("blockquote.callout-collapsible");
+    collapsibleCallouts.forEach(el => el.addEventListener('click', event => {
+        event.currentTarget.classList.toggle("callout-collapsed");
+    }));
+}
diff --git a/assets/js/clipboard.js b/assets/js/clipboard.js
new file mode 100644
index 000000000..cd928c1a4
--- /dev/null
+++ b/assets/js/clipboard.js
@@ -0,0 +1,40 @@
+const svgCopy =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
+const svgCheck =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
+
+
+const addCopyButtons = () => {
+    let els = document.getElementsByClassName("highlight");
+    // for each highlight
+    for (let i = 0; i < els.length; i++) {
+        if (els[i].getElementsByClassName("clipboard-button").length) continue;
+
+        // find pre > code inside els[i]
+        let codeBlocks = els[i].getElementsByTagName("code");
+
+         // line numbers are inside first code block
+        let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
+        const button = document.createElement("button");
+        button.className = "clipboard-button";
+        button.type = "button";
+        button.innerHTML = svgCopy;
+        // remove every second newline from lastCodeBlock.innerText
+        button.addEventListener("click", () => {
+            navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
+                () => {
+                    button.blur();
+                    button.innerHTML = svgCheck;
+                    setTimeout(() => {
+                    	button.innerHTML = svgCopy
+                    	button.style.borderColor = ""
+                    }, 2000);
+                },
+                (error) => (button.innerHTML = "Error")
+            );
+        });
+        // find chroma inside els[i]
+        let chroma = els[i].getElementsByClassName("chroma")[0];
+        els[i].insertBefore(button, chroma);
+    }
+}
diff --git a/assets/js/code-title.js b/assets/js/code-title.js
new file mode 100644
index 000000000..698edc9b6
--- /dev/null
+++ b/assets/js/code-title.js
@@ -0,0 +1,13 @@
+
+function addTitleToCodeBlocks() {
+  var els = document.getElementsByClassName("highlight");
+  for (var i = 0; i < els.length; i++) {
+    if (els[i].title.length) {
+      let div = document.createElement("div");
+      if (els[i].getElementsByClassName("code-title").length) continue;
+      div.textContent=els[i].title;
+      div.classList.add("code-title")
+      els[i].insertBefore(div, els[i].firstChild);
+    }
+  }
+};
diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
index d95a281ac..8168d77e3 100644
--- a/assets/js/darkmode.js
+++ b/assets/js/darkmode.js
@@ -1,18 +1,26 @@
 const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
 const currentTheme = localStorage.getItem('theme') ?? userPref
+const syntaxTheme = document.querySelector("#theme-link");
+
+
+{{ $darkSyntax := resources.Get "styles/_dark_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify  }}
+{{ $lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify  }}
 
 if (currentTheme) {
   document.documentElement.setAttribute('saved-theme', currentTheme);
+  syntaxTheme.href = currentTheme === 'dark' ?  '{{ $darkSyntax.Permalink }}' :  '{{ $lightSyntax.Permalink }}';
 }
 
 const switchTheme = (e) => {
   if (e.target.checked) {
-    document.documentElement.setAttribute('saved-theme', 'dark')
-    localStorage.setItem('theme', 'dark')
+    document.documentElement.setAttribute('saved-theme', 'dark');
+    localStorage.setItem('theme', 'dark');
+    syntaxTheme.href = '{{ $darkSyntax.Permalink }}';
   }
   else {
     document.documentElement.setAttribute('saved-theme', 'light')
     localStorage.setItem('theme', 'light')
+    syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
   }
 }
 
diff --git a/assets/js/full-text-search.js b/assets/js/full-text-search.js
new file mode 100644
index 000000000..a8f7f23c6
--- /dev/null
+++ b/assets/js/full-text-search.js
@@ -0,0 +1,61 @@
+; (async function() {
+  const encoder = (str) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+  const contentIndex = new FlexSearch.Document({
+    cache: true,
+    charset: "latin:extra",
+    optimize: true,
+    index: [
+      {
+        field: "content",
+        tokenize: "reverse",
+        encode: encoder,
+      },
+      {
+        field: "title",
+        tokenize: "forward",
+        encode: encoder,
+      },
+    ],
+  })
+
+  const { content } = await fetchData
+  for (const [key, value] of Object.entries(content)) {
+    contentIndex.add({
+      id: key,
+      title: value.title,
+      content: removeMarkdown(value.content),
+    })
+  }
+
+  const formatForDisplay = (id) => ({
+    id,
+    url: id,
+    title: content[id].title,
+    content: content[id].content,
+  })
+
+  registerHandlers((e) => {
+    term = e.target.value
+    const searchResults = contentIndex.search(term, [
+      {
+        field: "content",
+        limit: 10,
+      },
+      {
+        field: "title",
+        limit: 5,
+      },
+    ])
+    const getByField = (field) => {
+      const results = searchResults.filter((x) => x.field === field)
+      if (results.length === 0) {
+        return []
+      } else {
+        return [...results[0].result]
+      }
+    }
+    const allIds = new Set([...getByField("title"), ...getByField("content")])
+    const finalResults = [...allIds].map(formatForDisplay)
+    displayResults(finalResults, true)
+  })
+})()
diff --git a/assets/js/graph.js b/assets/js/graph.js
index 174d4946d..c89877b9a 100644
--- a/assets/js/graph.js
+++ b/assets/js/graph.js
@@ -155,7 +155,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
   const nodeRadius = (d) => {
     const numOut = index.links[d.id]?.length || 0
     const numIn = index.backlinks[d.id]?.length || 0
-    return 3 + (numOut + numIn) / 4
+    return 2 + Math.sqrt(numOut + numIn)
   }
 
   // draw individual nodes
diff --git a/assets/js/popover.js b/assets/js/popover.js
index 494cd84e1..c7b116500 100644
--- a/assets/js/popover.js
+++ b/assets/js/popover.js
@@ -24,9 +24,16 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
         } else {
           const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
           if (linkDest) {
+            let splitLink = li.href.split("#")
+            let cleanedContent = removeMarkdown(linkDest.content)
+            if (splitLink.length > 1) {
+              let headingName = splitLink[1].replace(/\-/g, " ")
+              let headingIndex = cleanedContent.toLowerCase().indexOf("<b>" + headingName + "</b>")
+              cleanedContent = cleanedContent.substring(headingIndex, cleanedContent.length)
+            }
             const popoverElement = `<div class="popover">
     <h3>${linkDest.title}</h3>
-    <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
+    <p>${cleanedContent.split(" ", 20).join(" ")}...</p>
     <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 </div>`
             el = htmlToElement(popoverElement)
@@ -46,7 +53,18 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
               throwOnError: false
             })
           }
+
           li.addEventListener("mouseover", () => {
+            // fix tooltip positioning
+            window.FloatingUIDOM.computePosition(li, el, {
+              middleware: [window.FloatingUIDOM.offset(10), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
+            }).then(({ x, y }) => {
+              Object.assign(el.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+              })
+            })
+
             el.classList.add("visible")
           })
           li.addEventListener("mouseout", () => {
diff --git a/assets/js/router.js b/assets/js/router.js
index 3bdc81023..efaa10e8a 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -3,7 +3,7 @@ import {
   navigate,
   prefetch,
   router,
-} from "https://unpkg.com/million@1.9.8-0/dist/router.mjs"
+} from "https://unpkg.com/million@1.11.5/dist/router.mjs"
 
 export const attachSPARouting = (init, rerender) => {
   // Attach SPA functions to the global Million namespace
diff --git a/assets/js/semantic-search.js b/assets/js/semantic-search.js
new file mode 100644
index 000000000..4382817ce
--- /dev/null
+++ b/assets/js/semantic-search.js
@@ -0,0 +1,38 @@
+const apiKey = "{{$.Site.Data.config.operandApiKey}}"
+
+async function searchContents(query) {
+  const response = await fetch('https://prod.operand.ai/v3/search/objects', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: apiKey,
+    },
+    body: JSON.stringify({
+      query,
+      max: 10
+    }),
+  });
+  return (await response.json());
+}
+
+function debounce(func, timeout = 200) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => { func.apply(this, args); }, timeout)
+  };
+}
+
+registerHandlers(debounce((e) => {
+  term = e.target.value
+  if (term !== "") {
+    searchContents(term)
+      .then((res) => res.results.map(entry => ({
+        url: entry.object.properties.url,
+        content: entry.snippet,
+        title: entry.object.metadata.title
+      })
+      ))
+      .then(results => displayResults(results))
+  }
+}))
diff --git a/assets/js/search.js b/assets/js/util.js
similarity index 59%
rename from assets/js/search.js
rename to assets/js/util.js
index 5896061ba..06db3c1b7 100644
--- a/assets/js/search.js
+++ b/assets/js/util.js
@@ -45,24 +45,23 @@ const removeMarkdown = (
       .replace(/(`{3,})(.*?)\1/gm, "$2")
       .replace(/`(.+?)`/g, "$1")
       .replace(/\n{2,}/g, "\n\n")
+      .replace(/\[![a-zA-Z]+\][-\+]? /g, "")
   } catch (e) {
     console.error(e)
     return markdown
   }
   return output
 }
-// -----
 
 const highlight = (content, term) => {
   const highlightWindow = 20
-
   // try to find direct match first
   const directMatchIdx = content.indexOf(term)
   if (directMatchIdx !== -1) {
-    const h = highlightWindow / 2
+    const h = highlightWindow
     const before = content.substring(0, directMatchIdx).split(" ").slice(-h)
     const after = content
-      .substring(directMatchIdx + term.length, content.length - 1)
+      .substring(directMatchIdx + term.length, content.length - 2)
       .split(" ")
       .slice(0, h)
     return (
@@ -103,68 +102,49 @@ const highlight = (content, term) => {
     })
     .join(" ")
     .replaceAll('</span> <span class="search-highlight">', " ")
-  return `${startIndex === 0 ? "" : "..."}${mappedText}${
-    endIndex === splitText.length ? "" : "..."
-  }`
+  return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..."
+    }`
 }
 
-;(async function () {
-  const encoder = (str) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])+/)
-  const contentIndex = new FlexSearch.Document({
-    cache: true,
-    charset: "latin:extra",
-    optimize: true,
-    index: [
-      {
-        field: "content",
-        tokenize: "reverse",
-        encode: encoder,
-      },
-      {
-        field: "title",
-        tokenize: "forward",
-        encode: encoder,
-      },
-    ],
-  })
+// Common utilities for search
+const resultToHTML = ({ url, title, content }) => {
+  return `<button class="result-card" id="${url}">
+      <h3>${title}</h3>
+      <p>${content}</p>
+  </button>`
+}
 
-  const { content } = await fetchData
-  for (const [key, value] of Object.entries(content)) {
-    contentIndex.add({
-      id: key,
-      title: value.title,
-      content: removeMarkdown(value.content),
-    })
-  }
-
-  const resultToHTML = ({ url, title, content, term }) => {
-    const text = removeMarkdown(content)
-    const resultTitle = highlight(title, term)
-    const resultText = highlight(text, term)
-    return `<button class="result-card" id="${url}">
-        <h3>${resultTitle}</h3>
-        <p>${resultText}</p>
-    </button>`
-  }
-
-  const redir = (id, term) => {
-    // SPA navigation
-    window.Million.navigate(
-      new URL(`${BASE_URL.replace(/\/$/g, "")}${id}#:~:text=${encodeURIComponent(term)}/`),
-      ".singlePage",
-    )
-    closeSearch()
-  }
-
-  const formatForDisplay = (id) => ({
-    id,
-    url: id,
-    title: content[id].title,
-    content: content[id].content,
-  })
+const redir = (id, term) => {
+  // SPA navigation
+  window.Million.navigate(
+    new URL(`${BASE_URL.replace(/\/$/g, "")}${id}#:~:text=${encodeURIComponent(term)}/`),
+    ".singlePage",
+  )
+  closeSearch()
+}
 
+function openSearch() {
   const source = document.getElementById("search-bar")
   const results = document.getElementById("results-container")
+  const searchContainer = document.getElementById("search-container")
+  if (searchContainer.style.display === "none" || searchContainer.style.display === "") {
+    source.value = ""
+    results.innerHTML = ""
+    searchContainer.style.display = "block"
+    source.focus()
+  } else {
+    searchContainer.style.display = "none"
+  }
+}
+
+function closeSearch() {
+  const searchContainer = document.getElementById("search-container")
+  searchContainer.style.display = "none"
+}
+
+const registerHandlers = (onInputFn) => {
+  const source = document.getElementById("search-bar")
+  const searchContainer = document.getElementById("search-container")
   let term
   source.addEventListener("keyup", (e) => {
     if (e.key === "Enter") {
@@ -172,68 +152,7 @@ const highlight = (content, term) => {
       redir(anchor.id, term)
     }
   })
-  source.addEventListener("input", (e) => {
-    term = e.target.value
-    const searchResults = contentIndex.search(term, [
-      {
-        field: "content",
-        limit: 10,
-      },
-      {
-        field: "title",
-        limit: 5,
-      },
-    ])
-    const getByField = (field) => {
-      const results = searchResults.filter((x) => x.field === field)
-      if (results.length === 0) {
-        return []
-      } else {
-        return [...results[0].result]
-      }
-    }
-    const allIds = new Set([...getByField("title"), ...getByField("content")])
-    const finalResults = [...allIds].map(formatForDisplay)
-
-    // display
-    if (finalResults.length === 0) {
-      results.innerHTML = `<button class="result-card">
-                    <h3>No results.</h3>
-                    <p>Try another search term?</p>
-                </button>`
-    } else {
-      results.innerHTML = finalResults
-        .map((result) =>
-          resultToHTML({
-            ...result,
-            term,
-          }),
-        )
-        .join("\n")
-      const anchors = [...document.getElementsByClassName("result-card")]
-      anchors.forEach((anchor) => {
-        anchor.onclick = () => redir(anchor.id, term)
-      })
-    }
-  })
-
-  const searchContainer = document.getElementById("search-container")
-
-  function openSearch() {
-    if (searchContainer.style.display === "none" || searchContainer.style.display === "") {
-      source.value = ""
-      results.innerHTML = ""
-      searchContainer.style.display = "block"
-      source.focus()
-    } else {
-      searchContainer.style.display = "none"
-    }
-  }
-
-  function closeSearch() {
-    searchContainer.style.display = "none"
-  }
-
+  source.addEventListener("input", onInputFn)
   document.addEventListener("keydown", (event) => {
     if (event.key === "k" && (event.ctrlKey || event.metaKey)) {
       event.preventDefault()
@@ -246,16 +165,45 @@ const highlight = (content, term) => {
   })
 
   const searchButton = document.getElementById("search-icon")
-  searchButton.addEventListener("click", (evt) => {
+  searchButton.addEventListener("click", (_) => {
     openSearch()
   })
-  searchButton.addEventListener("keydown", (evt) => {
+  searchButton.addEventListener("keydown", (_) => {
     openSearch()
   })
-  searchContainer.addEventListener("click", (evt) => {
+  searchContainer.addEventListener("click", (_) => {
     closeSearch()
   })
   document.getElementById("search-space").addEventListener("click", (evt) => {
     evt.stopPropagation()
   })
-})()
+}
+
+const displayResults = (finalResults, extractHighlight = false) => {
+  const results = document.getElementById("results-container")
+  if (finalResults.length === 0) {
+    results.innerHTML = `<button class="result-card">
+                    <h3>No results.</h3>
+                    <p>Try another search term?</p>
+                </button>`
+  } else {
+    results.innerHTML = finalResults
+      .map((result) => {
+          if (extractHighlight) {
+            return resultToHTML({
+              url: result.url,
+              title: highlight(result.title, term),
+              content: highlight(removeMarkdown(result.content), term)
+            })
+          } else {
+            return resultToHTML(result)
+          }
+        }
+      )
+      .join("\n")
+    const anchors = [...document.getElementsByClassName("result-card")]
+    anchors.forEach((anchor) => {
+      anchor.onclick = () => redir(anchor.id, term)
+    })
+  }
+}
diff --git a/assets/styles/_callouts.scss b/assets/styles/_callouts.scss
new file mode 100644
index 000000000..04fd2f662
--- /dev/null
+++ b/assets/styles/_callouts.scss
@@ -0,0 +1,170 @@
+:root {
+  --callout-summary: #00b0ff;
+  --callout-summary-accent: #7fd7ff;
+  --callout-bug: #f50057;
+  --callout-bug-accent: #ff7aa9;
+  --callout-danger: #ff1744;
+  --callout-danger-accent: #ff8aa1;
+  --callout-example: #7c4dff;
+  --callout-example-accent: #bda5ff;
+  --callout-fail: #ff5252;
+  --callout-fail-accent: #ffa8a8;
+  --callout-info: #00b8d4;
+  --callout-info-accent: #69ebff;
+  --callout-note: #448aff;
+  --callout-note-accent: #a1c4ff;
+  --callout-question: #64dd17;
+  --callout-question-accent: #b0f286;
+  --callout-quote: #9e9e9e;
+  --callout-quote-accent: #cecece;
+  --callout-done: #00c853;
+  --callout-done-accent: #63ffa4;
+  --callout-important: #00bfa5;
+  --callout-important-accent: #5fffe9;
+  --callout-warning: #ff9100;
+  --callout-warning-accent: #ffc87f;
+}
+
+[saved-theme=dark] {
+  --callout-summary: #00b0ff !important;
+  --callout-summary-accent: #00587f !important;
+  --callout-bug: #f50057 !important;
+  --callout-bug-accent: #7a002b !important;
+  --callout-danger: #ff1744 !important;
+  --callout-danger-accent: #8b001a !important;
+  --callout-example: #7c4dff !important;
+  --callout-example-accent: #2b00a6 !important;
+  --callout-fail: #ff5252 !important;
+  --callout-fail-accent: #a80000 !important;
+  --callout-info: #00b8d4 !important;
+  --callout-info-accent: #005c6a !important;
+  --callout-note: #448aff !important;
+  --callout-note-accent: #003ca1 !important;
+  --callout-question: #64dd17 !important;
+  --callout-question-accent: #006429 !important;
+  --callout-quote: #9e9e9e !important;
+  --callout-quote-accent: #4f4f4f !important;
+  --callout-done: #00c853 !important;
+  --callout-done-accent: #006429 !important;
+  --callout-important: #00bfa5 !important;
+  --callout-important-accent: #005f52 !important;
+  --callout-warning: #ff9100 !important;
+  --callout-warning-accent: #7f4800 !important;
+}
+
+blockquote.callout-collapsible {
+  cursor: pointer;
+
+  &.callout-collapsible::after {
+    content: '-';
+    right: 6px;
+    font-weight: bolder;
+    font-family: Courier New, Courier, monospace;
+  }
+}
+
+blockquote.callout-collapsed {
+  & > p { border-bottom-right-radius: 5px !important; }
+  padding-bottom: 0 !important;
+  &::after {
+    content: '+' !important;
+  }
+  & > *:not(:first-child) {
+    display: none !important;
+  }
+}
+
+blockquote[class*="-callout"] {
+  margin-right: 0;
+  border-radius: 5px;
+  position: relative;
+  padding-left: 0 !important;
+  padding-bottom: 0.25em;
+  color: var(--dark);
+  background-color: var(--lightgray);
+  border-left: 6px solid var(--primary) !important;
+  & > p {
+    border-top-right-radius: 5px;
+    padding: 0.5em 1em;
+    margin: 0;
+    color: var(--gray);
+    &:first-child {
+      font-weight: 600;
+      color: var(--dark);
+      padding: 0.4em 30px;
+    }
+  }
+}
+
+blockquote[class*="-callout"] > p:first-child::after, blockquote.callout-collapsible::after {
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  position: absolute;
+  top: 0.4em;
+  margin: 0.2em 0.4em;
+}
+
+blockquote[class*="-callout"] > p:first-child {
+  font-weight: bold;
+  padding: 0.4em 35px;
+
+  &::after {
+    left: 0;
+  }
+}
+
+$summary: summary, abstract, tldr;
+$bug: bug;
+$danger: danger, error;
+$example: example;
+$fail: fail, failure, missing;
+$info: info, todo;
+$note: note;
+$question: question, help, faq;
+$quote: quote, cite;
+$done: done, success, check;
+$important: important, tip, hint;
+$warning: warning, caution, attention;
+$types: $summary, $bug, $danger, $example, $fail, $info, $note, $question, $quote, $done, $important, $warning;
+$svgs: ();
+$svgs: map-merge($svgs, ($summary: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='book' class='svg-inline--callout-fa fa-book fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($bug: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='bug' class='svg-inline--callout-fa fa-bug fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($danger: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='bolt' class='svg-inline--callout-fa fa-bolt fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($example: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='list-ol' class='svg-inline--callout-fa fa-list-ol fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($fail: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='times-circle' class='svg-inline--callout-fa fa-times-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($info: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='info-circle' class='svg-inline--callout-fa fa-info-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($note: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='pencil-alt' class='svg-inline--callout-fa fa-pencil-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($question: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='question-circle' class='svg-inline--callout-fa fa-question-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($quote: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='quote-right' class='svg-inline--callout-fa fa-quote-right fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($done: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='check-circle' class='svg-inline--callout-fa fa-check-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($important: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='fire' class='svg-inline--callout-fa fa-fire fa-w-12' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z'%3E%3C/path%3E%3C/svg%3E")));
+$svgs: map-merge($svgs, ($warning: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-icon='exclamation-triangle' class='svg-inline--callout-fa fa-exclamation-triangle fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E")));
+
+@function getstr($l) {
+  $v: nth($l, 1);
+  @return $v;
+}
+
+@each $type in $types {
+  @each $s in $type {
+    blockquote.#{$s}-callout {
+      border-left: 6px solid var(--callout-#{getstr($type)}) !important;
+      & > p:first-child {
+        background-color: var(--callout-#{getstr($type)}-accent) !important;
+        &::after {
+          content: '';
+          -webkit-mask: map-get($svgs, $type);
+          mask: map-get($svgs, $type);
+          background-color: var(--callout-#{getstr($type)}) !important;
+          -webkit-mask-size: contain;
+          mask-size: contain;
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-position: center;
+          mask-position: center;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/styles/_dark_syntax.scss b/assets/styles/_dark_syntax.scss
new file mode 100644
index 000000000..9d2019a8a
--- /dev/null
+++ b/assets/styles/_dark_syntax.scss
@@ -0,0 +1,85 @@
+/* Background */ .bg { color: #f8f8f2; background-color: #282a36; }
+/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err {  }
+/* CodeLine */ .chroma .cl {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #ff79c6 }
+/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
+/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
+/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
+/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
+/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
+/* KeywordType */ .chroma .kt { color: #8be9fd }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #50fa7b }
+/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #50fa7b }
+/* NameConstant */ .chroma .no {  }
+/* NameDecorator */ .chroma .nd {  }
+/* NameEntity */ .chroma .ni {  }
+/* NameException */ .chroma .ne {  }
+/* NameFunction */ .chroma .nf { color: #50fa7b }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+/* NameNamespace */ .chroma .nn {  }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #ff79c6 }
+/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #f1fa8c }
+/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
+/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
+/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
+/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
+/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
+/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
+/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
+/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
+/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
+/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
+/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
+/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
+/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
+/* LiteralNumber */ .chroma .m { color: #bd93f9 }
+/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+/* Operator */ .chroma .o { color: #ff79c6 }
+/* OperatorWord */ .chroma .ow { color: #ff79c6 }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #6272a4 }
+/* CommentHashbang */ .chroma .ch { color: #6272a4 }
+/* CommentMultiline */ .chroma .cm { color: #6272a4 }
+/* CommentSingle */ .chroma .c1 { color: #6272a4 }
+/* CommentSpecial */ .chroma .cs { color: #6272a4 }
+/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
+/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ff5555 }
+/* GenericEmph */ .chroma .ge { text-decoration: underline }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh { font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
+/* GenericOutput */ .chroma .go { color: #44475a }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs {  }
+/* GenericSubheading */ .chroma .gu { font-weight: bold }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/assets/styles/_light_syntax.scss b/assets/styles/_light_syntax.scss
new file mode 100644
index 000000000..d0f452e03
--- /dev/null
+++ b/assets/styles/_light_syntax.scss
@@ -0,0 +1,85 @@
+/* Background */ .bg { color: #272822; background-color: #fafafa; }
+/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { }
+/* CodeLine */ .chroma .cl {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #00a8c8 }
+/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
+/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
+/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
+/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
+/* KeywordType */ .chroma .kt { color: #00a8c8 }
+/* Name */ .chroma .n { color: #111111 }
+/* NameAttribute */ .chroma .na { color: #75af00 }
+/* NameBuiltin */ .chroma .nb { color: #111111 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
+/* NameClass */ .chroma .nc { color: #75af00 }
+/* NameConstant */ .chroma .no { color: #00a8c8 }
+/* NameDecorator */ .chroma .nd { color: #75af00 }
+/* NameEntity */ .chroma .ni { color: #111111 }
+/* NameException */ .chroma .ne { color: #75af00 }
+/* NameFunction */ .chroma .nf { color: #75af00 }
+/* NameFunctionMagic */ .chroma .fm { color: #111111 }
+/* NameLabel */ .chroma .nl { color: #111111 }
+/* NameNamespace */ .chroma .nn { color: #111111 }
+/* NameOther */ .chroma .nx { color: #75af00 }
+/* NameProperty */ .chroma .py { color: #111111 }
+/* NameTag */ .chroma .nt { color: #f92672 }
+/* NameVariable */ .chroma .nv { color: #111111 }
+/* NameVariableClass */ .chroma .vc { color: #111111 }
+/* NameVariableGlobal */ .chroma .vg { color: #111111 }
+/* NameVariableInstance */ .chroma .vi { color: #111111 }
+/* NameVariableMagic */ .chroma .vm { color: #111111 }
+/* Literal */ .chroma .l { color: #ae81ff }
+/* LiteralDate */ .chroma .ld { color: #d88200 }
+/* LiteralString */ .chroma .s { color: #d88200 }
+/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
+/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
+/* LiteralStringChar */ .chroma .sc { color: #d88200 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
+/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
+/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
+/* LiteralStringEscape */ .chroma .se { color: #8045ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
+/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
+/* LiteralStringOther */ .chroma .sx { color: #d88200 }
+/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
+/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
+/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
+/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+/* Operator */ .chroma .o { color: #f92672 }
+/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Punctuation */ .chroma .p { color: #111111 }
+/* Comment */ .chroma .c { color: #75715e }
+/* CommentHashbang */ .chroma .ch { color: #75715e }
+/* CommentMultiline */ .chroma .cm { color: #75715e }
+/* CommentSingle */ .chroma .c1 { color: #75715e }
+/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* CommentPreproc */ .chroma .cp { color: #75715e }
+/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd {  }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh {  }
+/* GenericInserted */ .chroma .gi {  }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu {  }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 1c353f338..2b3d90758 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -1,34 +1,60 @@
+// Replace this with your own font imports!
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
 :root {
-  --lt-colours-light: var(--light) !important;
-  --lt-colours-lightgray: var(--lightgray) !important;
-  --lt-colours-dark: var(--secondary) !important;
-  --lt-colours-secondary: var(--tertiary) !important;
-  --lt-colours-gray: var(--outlinegray) !important;
+  --font-body: "Source Sans Pro";
+  --font-header: "Inter";
+  --font-mono: "Fira Code"
 }
 
-h1, h2, h3, h4, h5, h6, ol, ul, thead {
-  font-family: Inter;
+// typography
+html {
+  scroll-behavior: smooth;
+  &:lang(ar) {
+    & p, & h1, & h2, & h3, article {
+      direction: rtl;
+      text-align: right;
+    }
+  }
+}
+
+.singlePage {
+  padding: 4em 30vw;
+  @media all and (max-width: 1200px) {
+    padding: 25px 5vw;
+  }
+}
+
+
+body {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: var(--light);
+}
+
+h1, h2, h3, h4, h5, h6, thead {
+  font-family: var(--font-header);
   color: var(--dark);
   font-weight: revert;
-  margin: revert;
-  padding: revert;
+  margin: 2rem 0 0;
+  padding: 2rem auto 1rem;
 
   &:hover > .hanchor {
-    opacity: 1;
+    color: var(--secondary);
   }
 }
 
 .hanchor {
-  font-family: Inter;
-  margin-left: -1em;
-  opacity: 0.3;
-  transition: opacity 0.3s ease;
-  color: var(--secondary);
-
+  font-family: var(--font-header);
+  opacity: 0.8;
+  transition: color 0.3s ease;
+  color: var(--dark);
 }
 
-p, ul, text {
-  font-family: 'Source Sans Pro', sans-serif;
+p, ul, text, a, tr, td, li, ol, ul {
+  font-family: var(--font-body);
   color: var(--gray);
   fill: var(--gray);
   font-weight: revert;
@@ -36,21 +62,26 @@ p, ul, text {
   padding: revert;
 }
 
+tbody, li, p {
+  line-height: 1.5em;
+}
+
 .mainTOC {
-  background: var(--lightgray);
   border-radius: 5px;
-  padding: 0.75em 1em;
-}
+  padding: 0.75em 0;
 
-.mainTOC details summary {
-  cursor: zoom-in;
-  font-family: Inter;
-  color: var(--dark);
-  font-weight: 700;
-}
+  & details {
+    & summary {
+      cursor: zoom-in;
+      font-family: var(--font-header);
+      color: var(--dark);
+      font-weight: 700;
+    }
 
-.mainTOC details[open] summary {
-    cursor: zoom-out;
+    &[open] summary {
+      cursor: zoom-out;
+    }
+  }
 }
 
 #TableOfContents > ol {
@@ -75,22 +106,30 @@ p, ul, text {
   }
 
   & > li::marker, & > li > ol > li::marker {
-    font-family: Source Sans Pro;
+    font-family: var(--font-body);
     font-weight: 700;
   }
 }
 
 table {
+  border: 1px solid var(--outlinegray);
   width: 100%;
+  padding: 1.5em;
+  border-collapse: collapse;
+}
+
+td, th {
+  padding: 0.2em 1em;
+  border: 1px solid var(--outlinegray);
 }
 
 img {
-  width: 100%;
+  max-width: 100%;
   border-radius: 3px;
   margin: 1em 0;
 }
 
-p>img+em {
+p > img + em {
   display: block;
   transform: translateY(-1em);
 }
@@ -99,29 +138,11 @@ sup {
   line-height: 0
 }
 
-p, tbody, li {
-  font-family: Source Sans Pro;
-  color: var(--gray);
-  line-height: 1.5em;
-}
-
 blockquote {
   margin-left: 0em;
   border-left: 3px solid var(--secondary);
   padding-left: 1em;
   transition: border-color 0.2s ease;
-
-  &:hover {
-    border-color: var(--tertiary);
-  }
-}
-
-table {
-  padding: 1.5em;
-}
-
-td, th {
-  padding: 0.1em 0.5em;
 }
 
 .footnotes p {
@@ -148,31 +169,24 @@ td, th {
       background-color: transparent !important;
     }
 
-    & a[href$="#"] {
+    & a[href$="#"], &.active a {
       opacity: 0.2;
     }
   }
 }
 
-.section {
-  & h3 > a {
-    font-weight: 700;
-    font-family: Inter;
-    margin: 0;
-  }
-  & p {
-    margin-top: 0;
-  }
-}
-
 article {
+  & > h1 {
+    margin-top: 2em;
+    font-size: 2em;
+  }
+  
   & > .meta {
-    margin: -1.5em 0 1em 0;
+    margin: 0 0 1em 0;
     opacity: 0.7;
   }
 
   & a {
-    font-family: Source Sans Pro;
     font-weight: 600;
 
     &.internal-link {
@@ -199,6 +213,7 @@ article {
   padding-left: 0;
 
   & .meta {
+    margin: 1.5em 0;
     & > h1 {
       margin: 0;
     }
@@ -234,55 +249,39 @@ sup > a {
   padding: 0 0.1em 0 0.2em;
 }
 
+#page-title {
+  margin: 0;
+  & > a {
+    font-family: var(--font-header);
+  }
+}
+
 a {
-  font-family: Inter, sans-serif;
   font-size: 1em;
   font-weight: 700;
   text-decoration: none;
   transition: all 0.2s ease;
   color: var(--secondary);
-
   &:hover {
     color: var(--tertiary) !important;
   }
 }
 
 pre {
-  font-family: 'Fira Code';
+  font-family: var(--font-mono);
   padding: 0.75em;
   border-radius: 3px;
   overflow-x: scroll;
 }
 
 code {
-  font-family: 'Fira Code';
+  font-family: var(--font-mono);
   font-size: 0.85em;
   padding: 0.15em 0.3em;
   border-radius: 5px;
   background: var(--lightgray);
 }
 
-html {
-  scroll-behavior: smooth;
-
-  &:lang(ar) {
-    & p, & h1, & h2, & h3, article {
-      direction: rtl;
-      text-align: right;
-    }
-  }
-}
-
-body {
-  margin: 0;
-  height: 100vh;
-  width: 100vw;
-  //overflow-x: hidden;
-  max-width: 100%;
-  box-sizing: border-box;
-  background-color: var(--light);
-}
-
 @keyframes fadeIn {
   0% {opacity:0;}
   100% {opacity:1;}
@@ -306,14 +305,6 @@ hr {
   background-color: var(--dark);
 }
 
-.singlePage {
-  padding: 4em 30vw;
-
-  @media all and (max-width: 1200px) {
-    padding: 25px 5vw;
-  }
-}
-
 .page-end {
   display: flex;
   flex-direction: row;
@@ -330,7 +321,8 @@ hr {
   & > .backlinks-container {
     & > ul {
       list-style: none;
-      padding-left: 0;
+      padding: 0;
+      margin: 0;
 
       & > li {
         margin: 0.5em 0;
@@ -346,6 +338,7 @@ hr {
     border-radius: 5px;
     box-sizing: border-box;
     min-height: 250px;
+    margin: 0.5em 0;
 
     & > svg {
       margin-bottom: -5px;
@@ -358,14 +351,15 @@ hr {
   margin-top: 30vh;
 }
 
-article > h1 {
-  font-size: 2em;
+.spacer {
+  flex: 1 1 auto;
 }
 
 header {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin: 1em 0 2em;
 
   & > h1 {
     font-size: 2em;
@@ -377,15 +371,24 @@ header {
     }
   }
 
-  & > .spacer {
-    flex: 1 1 auto;
+  #search-icon {
+    background-color: var(--lightgray);
+    border-radius: 4px;
+    height: 2em;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    & > p {
+      display: inline;
+      padding: 0 1.5em 0 2em;
+    }
   }
 
-  & > svg {
+  & svg {
     cursor: pointer;
     width: 18px;
     min-width: 18px;
-    margin: 0 1em;
+    margin: 0 0.5em;
 
     &:hover .search-path {
       stroke: var(--tertiary);
@@ -432,7 +435,7 @@ header {
     & > input {
       box-sizing: border-box;
       padding: 0.5em 1em;
-      font-family: Inter, sans-serif;
+      font-family: var(--font-body);
       color: var(--dark);
       font-size: 1.1em;
       border: 1px solid var(--outlinegray);
@@ -493,23 +496,44 @@ header {
 
 .section-ul {
   list-style: none;
+  margin-top: 2em;
   padding-left: 0;
 
-  & > li {
-    border: 1px solid var(--outlinegray);
-    border-radius: 5px;
-    padding: 0 1em;
-    margin-bottom: 1em;
+}
 
-    & h3 {
-      opacity: 1;
+.section-li {
+  margin-bottom: 1em;
+
+  & > .section {
+    display: flex;
+    align-items: center; 
+
+    @media all and (max-width: 600px) {
+      & .tags {
+        display: none;
+      }
+    }
+
+    & h3 > a {
       font-weight: 700;
-      margin-bottom: 0em;
+      margin: 0;
     }
+    
+    & p {
+      margin: 0;
+      padding-right: 1em;
+      flex-basis: 6em; 
+    }
+  }
 
-    & .meta {
-      opacity: 0.6;
-    }
+  & h3 {
+    opacity: 1;
+    font-weight: 700;
+    margin: 0em;
+  }
+
+  & .meta {
+    opacity: 0.6;
   }
 }
 
@@ -522,25 +546,23 @@ header {
   1% {
     display: inline-block;
     opacity: 0;
-    transform: translate(-50%, 40%);
   }
   100% {
     opacity: 1;
     visibility: visible;
-    transform: translate(-50%, 20%);
   }
 }
 
 .popover {
   z-index: 999;
   position: absolute;
-  width: 20em;
+  width: 20rem;
   display: none;
   background-color: var(--light);
-  padding: 1em;
+  padding: 1rem;
+  margin: 1rem;
   border: 1px solid var(--outlinegray);
   border-radius: 5px;
-  transform: translate(-50%, 40%);
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
   user-select: none;
@@ -554,32 +576,34 @@ header {
   &.visible {
     opacity: 1;
     visibility: visible;
-    transform: translate(-50%, 20%);
     display: inline-block;
     animation: dropin 0.2s ease;
   }
 
   & > h3 {
     font-size: 1rem;
-    margin: 0.25em 0;
+    margin: 0.25rem 0;
   }
 
   & > .meta {
-    margin-top: 0.25em;
+    margin-top: 0.25rem;
     opacity: 0.5;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
   }
 
-  & > p, & > a {
+  & > p {
     margin: 0;
+    padding: 0.5rem 0;
+  } 
+
+  & > p, & > a {
+    font-size: 1rem;
     font-weight: 400;
     user-select: none;
   }
 }
 
-
-
 #contact_buttons ul {
   list-style-type: none;
 
@@ -592,4 +616,3 @@ header {
   }
 }
 
-
diff --git a/assets/styles/clipboard.scss b/assets/styles/clipboard.scss
new file mode 100644
index 000000000..7989e248c
--- /dev/null
+++ b/assets/styles/clipboard.scss
@@ -0,0 +1,47 @@
+.clipboard-button {
+  position: absolute;
+  display: flex;
+  float: right;
+  right: 0;
+  padding: 0.69em;
+  margin: 0.5em;
+  color: var(--outlinegray);
+  border-color: var(--dark);
+  background-color: var(--lightgray);
+  filter: contrast(1.1);
+  border: 2px solid;
+  border-radius: 6px;
+  font-size: 0.8em;
+  z-index: 1;
+  opacity: 0;
+  transition: 0.12s;
+  
+  & > svg {
+    fill: var(--light);
+    filter: contrast(0.3);
+  }
+  
+  &:hover {
+    cursor: pointer;
+    border-color: var(--primary);
+    
+    & > svg {
+      fill: var(--primary);
+    }
+  }
+  
+  &:focus {
+    outline: 0;
+  }
+}
+
+.highlight {
+  position: relative;
+  
+  &:hover > .clipboard-button {
+    opacity: 1;
+    transition: 0.2s;
+  }
+}
+
+
diff --git a/assets/styles/code-title.scss b/assets/styles/code-title.scss
new file mode 100644
index 000000000..b384743b8
--- /dev/null
+++ b/assets/styles/code-title.scss
@@ -0,0 +1,20 @@
+.code-title {
+  color: var(--primary) ;
+  font-family: var(--font-mono);
+  width: max-content;
+  overflow-x: auto;
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: normal;
+  line-height: 1em;
+  position: relative;
+  padding: 0.5em 0.6em 0.6em;      // + 1.2 em
+  max-width: calc(100% - 1.2em);   // (-1.2 em) fits article width exactly
+  margin-bottom: -0.2em;
+  z-index: -1;
+  border-top-left-radius: 0.3em;
+  border-top-right-radius: 0.3em;
+  font-size: 0.9em;
+  background-color: var(--lightgray);
+  filter: hue-rotate(-30deg) contrast(1.0) opacity(0.8);
+}
\ No newline at end of file
diff --git a/assets/styles/custom.scss b/assets/styles/custom.scss
index 54dbacef6..a7a2e7992 100644
--- a/assets/styles/custom.scss
+++ b/assets/styles/custom.scss
@@ -1,4 +1,5 @@
 // Add your own CSS here!
+
 :root {
   --light: #faf8f8;
   --dark: #141021;
@@ -22,4 +23,7 @@
   --gray: #d4d4d4 !important;
   --lightgray: #292633 !important;
   --outlinegray: #343434 !important;
-}
\ No newline at end of file
+}
+
+
+
diff --git a/assets/styles/syntax.scss b/assets/styles/syntax.scss
index bada47ab5..62a9fe932 100644
--- a/assets/styles/syntax.scss
+++ b/assets/styles/syntax.scss
@@ -1,99 +1,62 @@
-/* Background */ .chroma { color: #f8f8f2; background-color: #282a36; overflow: hidden }
-/* Other */ .chroma .x {  }
-/* Error */ .chroma .err {  }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* Keyword */ .chroma .k { color: #ff79c6 }
-/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
-/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
-/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
-/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
-/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
-/* KeywordType */ .chroma .kt { color: #8be9fd }
-/* Name */ .chroma .n {  }
-/* NameAttribute */ .chroma .na { color: #50fa7b }
-/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
-/* NameBuiltinPseudo */ .chroma .bp {  }
-/* NameClass */ .chroma .nc { color: #50fa7b }
-/* NameConstant */ .chroma .no {  }
-/* NameDecorator */ .chroma .nd {  }
-/* NameEntity */ .chroma .ni {  }
-/* NameException */ .chroma .ne {  }
-/* NameFunction */ .chroma .nf { color: #50fa7b }
-/* NameFunctionMagic */ .chroma .fm {  }
-/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
-/* NameNamespace */ .chroma .nn {  }
-/* NameOther */ .chroma .nx {  }
-/* NameProperty */ .chroma .py {  }
-/* NameTag */ .chroma .nt { color: #ff79c6 }
-/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
-/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
-/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
-/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
-/* NameVariableMagic */ .chroma .vm {  }
-/* Literal */ .chroma .l {  }
-/* LiteralDate */ .chroma .ld {  }
-/* LiteralString */ .chroma .s { color: #f1fa8c }
-/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
-/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
-/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
-/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
-/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
-/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
-/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
-/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
-/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
-/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
-/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
-/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
-/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
-/* LiteralNumber */ .chroma .m { color: #bd93f9 }
-/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
-/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
-/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
-/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
-/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
-/* Operator */ .chroma .o { color: #ff79c6 }
-/* OperatorWord */ .chroma .ow { color: #ff79c6 }
-/* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #6272a4 }
-/* CommentHashbang */ .chroma .ch { color: #6272a4 }
-/* CommentMultiline */ .chroma .cm { color: #6272a4 }
-/* CommentSingle */ .chroma .c1 { color: #6272a4 }
-/* CommentSpecial */ .chroma .cs { color: #6272a4 }
-/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
-/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd { color: #8b080b }
-/* GenericEmph */ .chroma .ge { text-decoration: underline }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh { font-weight: bold }
-/* GenericInserted */ .chroma .gi { font-weight: bold }
-/* GenericOutput */ .chroma .go { color: #44475a }
-/* GenericPrompt */ .chroma .gp {  }
-/* GenericStrong */ .chroma .gs {  }
-/* GenericSubheading */ .chroma .gu { font-weight: bold }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl { text-decoration: underline }
-/* TextWhitespace */ .chroma .w {  }
+// Overrides
+/* Background */
+.chroma {
+  overflow: hidden !important;
+  background-color: var(--lightgray) !important;
+}
+
+/* LineTable */
+.chroma .lntable {
+  width: auto !important;
+  overflow: auto !important;
+  display: block !important;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  display: block !important;
+  width: 100% !important;
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+  margin-right: 0.0em !important;
+  padding: 0 0.0em 0 0.0em !important;
+}
+
+/* LineNumbers */
+.chroma .ln {
+  margin-right: 0.0em !important;
+  padding: 0 0.0em 0 0.0em !important;
+}
+
+/* GenericDeleted */
+.chroma .gd {
+  color: #8b080b !important;
+}
+
+/* GenericInserted */
+.chroma .gi {
+  font-weight: bold !important;
+}
 
 .lntd:first-of-type > .chroma {
-  padding-right: 0;
+  padding-right: 0 !important;
 }
 
 .chroma code {
-  font-family: 'Fira Code' !important;
-  font-size: 0.85em;
-  line-height: 1em;
-  background: none;
-  padding: 0;
+  font-family: var(--font-mono) !important;
+  font-size: 0.85em !important;
+  line-height: 2em !important;
+  background: none !important;
+  padding: 0 !important;
 }
 
 .chroma {
-  border-radius: 3px;
-  margin: 0;
-}
\ No newline at end of file
+  border-radius: 3px !important;
+  margin: 0 !important;
+}
+
+pre.chroma {
+  -moz-tab-size:4;-o-tab-size:4;tab-size:4;
+}
diff --git a/config.toml b/config.toml
index 1c54a4235..f49de8ef0 100644
--- a/config.toml
+++ b/config.toml
@@ -1,8 +1,7 @@
 baseURL = "https://jaded0.github.io/quartz_personal_site/"
 languageCode = "en-us"
 googleAnalytics = "G-XYFD95KB4J"
-pygmentsUseClasses = true
-relativeURLs = true
+relativeURLs = false
 disablePathToLower = true
 ignoreFiles = [
     "/content/templates/*",
@@ -20,6 +19,7 @@ enableGitInfo = true
         ordered = true
         startLevel = 2
     [markup.highlight]
+        noClasses = false
         anchorLineNos = false
         codeFences = true
         guessSyntax = true
@@ -29,7 +29,8 @@ enableGitInfo = true
         lineNos = true
         lineNumbersInTable = true
         style = "dracula"
-        tabWidth = 4
     [frontmatter]
         lastmod = ["lastmod", ":git", "date", "publishDate"]
         publishDate = ["publishDate", "date"]
+    [markup.goldmark.renderer]
+        unsafe = true
diff --git a/content/notes/callouts.md b/content/notes/callouts.md
new file mode 100644
index 000000000..74b837d61
--- /dev/null
+++ b/content/notes/callouts.md
@@ -0,0 +1,63 @@
+---
+title: "Callouts"
+---
+
+## Callout support
+
+Quartz supports the same Admonition-callout syntax as Obsidian.
+
+This includes
+- 12 Distinct callout types (each with several aliases)
+- Collapsable callouts
+
+See [documentation on supported types and syntax here](https://help.obsidian.md/How+to/Use+callouts#Types).
+
+## Showcase
+
+> [!EXAMPLE] Examples
+>
+> Aliases: example
+
+> [!note] Notes
+>
+> Aliases: note
+
+> [!abstract] Summaries 
+>
+> Aliases: abstract, summary, tldr
+
+> [!info] Info 
+>
+> Aliases: info, todo
+
+> [!tip] Hint 
+>
+> Aliases: tip, hint, important
+
+> [!success] Success 
+>
+> Aliases: success, check, done
+
+> [!question] Question 
+>
+> Aliases: question, help, faq
+
+> [!warning] Warning 
+>
+> Aliases: warning, caution, attention
+
+> [!failure] Failure 
+>
+> Aliases: failure, fail, missing
+
+> [!danger] Error
+>
+> Aliases: danger, error
+
+> [!bug] Bug
+>
+> Aliases: bug
+
+> [!quote] Quote
+>
+> Aliases: quote, cite
diff --git a/content/notes/config.md b/content/notes/config.md
index d04b1528d..e1633a006 100644
--- a/content/notes/config.md
+++ b/content/notes/config.md
@@ -2,36 +2,192 @@
 title: "Configuration"
 tags:
 - setup
+weight: 0
 ---
 
 ## Configuration
 Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.
 
-The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below.
+The majority of configuration can be found under `data/config.yaml`. An annotated example configuration is shown below.
 
-```yaml
-name: Your name here! # Shows in the footer
-enableToc: true # Whether to show a Table of Contents
-enableLinkPreview: true # whether to render card previews for links
-description: Page description to show to search engines
-page_title: Quartz Example Page # Default Page Title
+```yaml {title="data/config.yaml"}
+# The name to display in the footer
+name: Jacky Zhao
 
-links: # Links to show in footer
+# whether to globally show the table of contents on each page
+# this can be turned off on a per-page basis by adding this to the
+# front-matter of that note
+enableToc: true
+
+# whether to by-default open or close the table of contents on each page
+openToc: false
+
+# whether to display on-hover link preview cards
+enableLinkPreview: true
+
+# whether to render titles for code blocks
+enableCodeBlockTitle: true 
+
+# whether to render copy buttons for code blocks
+enableCodeBlockCopy: true 
+
+# whether to render callouts
+enableCallouts: true
+
+# whether to try to process Latex
+enableLatex: true
+
+# whether to enable single-page-app style rendering
+# this prevents flashes of unstyled content and improves
+# smoothness of Quartz. More info in issue #109 on GitHub
+enableSPA: true
+
+# whether to render a footer
+enableFooter: true
+
+# whether backlinks of pages should show the context in which
+# they were mentioned
+enableContextualBacklinks: true
+
+# whether to show a section of recent notes on the home page
+enableRecentNotes: false
+
+# whether to display an 'edit' button next to the last edited field
+# that links to github
+enableGitHubEdit: true
+GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
+
+# whether to use Operand to power semantic search
+# IMPORTANT: replace this API key with your own if you plan on using
+# Operand search!
+enableSemanticSearch: false
+operandApiKey: "REPLACE-WITH-YOUR-OPERAND-API-KEY"
+
+# page description used for SEO
+description:
+  Host your second brain and digital garden for free. Quartz features extremely fast full-text search,
+  Wikilink support, backlinks, local graph, tags, and link previews.
+
+# title of the home page (also for SEO)
+page_title:
+  "🪴 Quartz 3.2"
+
+# links to show in the footer
+links:
   - link_name: Twitter
     link: https://twitter.com/_jzhao
   - link_name: Github
     link: https://github.com/jackyzha0
 ```
 
+### Code Block Titles
+To add code block titles with Quartz:
+
+1. Ensure that code block titles are enabled in Quartz's configuration:
+
+    ```yaml {title="data/config.yaml", linenos=false}
+    enableCodeBlockTitle: true
+    ```
+
+2. Add the `title` attribute to the desired [code block
+   fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences):
+
+      ```markdown {linenos=false}
+       ```yaml {title="data/config.yaml"}
+       enableCodeBlockTitle: true  # example from step 1
+       ```
+      ```
+
+**Note** that if `{title=<my-title>}` is included, and code block titles are not
+enabled, no errors will occur, and the title attribute will be ignored.
+
+### HTML Favicons
+If you would like to customize the favicons of your Quartz-based website, you 
+can add them to the `data/config.yaml` file. The **default** without any set 
+`favicon` key is:
+
+```html {title="layouts/partials/head.html", linenostart=15}
+<link rel="shortcut icon" href="icon.png" type="image/png">
+```
+
+The default can be overridden by defining a value to the `favicon` key in your 
+`data/config.yaml` file. For example, here is a `List[Dictionary]` example format, which is
+equivalent to the default:
+
+```yaml {title="data/config.yaml", linenos=false}
+favicon:
+  - { rel: "shortcut icon", href: "icon.png", type: "image/png" }
+#  - { ... } # Repeat for each additional favicon you want to add
+```
+
+In this format, the keys are identical to their HTML representations.
+
+If you plan to add multiple favicons generated by a website (see list below), it
+may be easier to define it as HTML. Here is an example which appends the 
+**Apple touch icon** to Quartz's default favicon:
+
+```yaml {title="data/config.yaml", linenos=false}
+favicon: |
+  <link rel="shortcut icon" href="icon.png" type="image/png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+```
+
+This second favicon will now be used as a web page icon when someone adds your 
+webpage to the home screen of their Apple device. If you are interested in more 
+information about the current and past standards of favicons, you can read 
+[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).
+
+**Note** that all generated favicon paths, defined by the `href` 
+attribute, are relative to the `static/` directory.
+
 ### Graph View
 To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
 
-```yaml
-enableLegend: false # automatically generate a legend
-enableDrag: true # allow dragging nodes in the graph
-enableZoom: true # allow zooming and panning the graph
-depth: -1 # how many neighbours of the current node to show (-1 is all nodes)
-paths: # colour specific nodes path off of their path
+```yaml {title="data/graphConfig.yaml"}
+# if true, a Global Graph will be shown on home page with full width, no backlink.
+# A different set of Local Graphs will be shown on sub pages.
+# if false, Local Graph will be default on every page as usual
+enableGlobalGraph: false
+
+### Local Graph ###
+localGraph:
+    # whether automatically generate a legend
+    enableLegend: false
+    
+    # whether to allow dragging nodes in the graph
+    enableDrag: true
+    
+    # whether to allow zooming and panning the graph
+    enableZoom: true
+    
+    # how many neighbours of the current node to show (-1 is all nodes)
+    depth: 1
+    
+    # initial zoom factor of the graph
+    scale: 1.2
+    
+    # how strongly nodes should repel each other
+    repelForce: 2
+
+    # how strongly should nodes be attracted to the center of gravity
+    centerForce: 1
+
+    # what the default link length should be
+    linkDistance: 1
+    
+    # how big the node labels should be
+    fontSize: 0.6
+    
+    # scale at which to start fading the labes on nodes
+    opacityScale: 3
+
+### Global Graph ###
+globalGraph:
+	# same settings as above
+
+### For all graphs ###
+# colour specific nodes path off of their path
+paths:
   - /moc: "#4388cc"
 ```
 
@@ -40,7 +196,7 @@ paths: # colour specific nodes path off of their path
 Want to go even more in-depth? You can add custom CSS styling and change existing colours through editing `assets/styles/custom.scss`. If you'd like to target specific parts of the site, you can add ids and classes to the HTML partials in `/layouts/partials`. 
 
 ### Partials
-Partials are what dictate what actually gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`.
+Partials are what dictate what gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`.
 
 For example, the structure of the home page can be edited through `/layouts/index.html`. To customize the footer, you can edit `/layouts/partials/footer.html`
 
@@ -48,7 +204,7 @@ More info about partials on [Hugo's website.](https://gohugo.io/templates/partia
 
 Still having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
 
-## Multilingual
+## Language Support
 [CJK + Latex Support (测试)](notes/CJK%20+%20Latex%20Support%20(测试).md) comes out of the box with Quartz.
 
 Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Quartz) supports this natively.
diff --git a/content/notes/editing.md b/content/notes/editing.md
index c8cefa0cc..4aaf58563 100644
--- a/content/notes/editing.md
+++ b/content/notes/editing.md
@@ -2,29 +2,18 @@
 title: "Editing Content in Quartz"
 tags:
 - setup
+weight: -4
 ---
 
 ## Editing 
 Quartz runs on top of [Hugo](https://gohugo.io/) so all notes are written in [Markdown](https://www.markdownguide.org/getting-started/).
 
-### Obsidian
-I recommend using [Obsidian](http://obsidian.md/) as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of your local files.
-
-This step is **highly recommended**.
-
-🔗 [How to setup your Obsidian Vault to work with Quartz](notes/obsidian.md)
-
-### Ignoring Files
-Only want to publish a subset of all of your notes? Don't worry, Quartz makes this a simple two-step process.
-
-❌ [Excluding pages from being published](notes/ignore%20notes.md)
-
 ### Folder Structure
 Here's a rough overview of what's what.
 
 **All content in your garden can found in the `/content` folder.** To make edits, you can open any of the files and make changes directly and save it. You can organize content into any folder you'd like.
 
-**To edit the main home page, open `/content/_index.md`.*
+**To edit the main home page, open `/content/_index.md`.**
 
 To create a link between notes in your garden, just create a normal link using Markdown pointing to the document in question. Please note that **all links should be relative to the root `/content` path**. 
 
@@ -40,30 +29,38 @@ Example image (source is in content/notes/images/example.png)
 ![Example Image](/content/notes/images/example.png)
 ```
 
+You can also use wikilinks if that is what you are more comfortable with!
+
 ### Front Matter
 Hugo is picky when it comes to metadata for files. Make sure that your title is double-quoted and that you have a title defined at the top of your file like so. You can also add tags here as well.
 
-```markdown
+```yaml
 ---
 title: "Example Title"
 tags:
 - example-tag
-enableToc: false # do not show a table of contents on this page
 ---
 
 Rest of your content here...
 ```
 
+### Obsidian
+I recommend using [Obsidian](http://obsidian.md/) as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of your local files.
+
+This step is **highly recommended**.
+
+> 🔗 Step 3: [How to setup your Obsidian Vault to work with Quartz](notes/obsidian.md)
+
 ## Previewing Changes
 This step is purely optional and mostly for those who want to see the published version of their digital garden locally before opening it up to the internet. This is *highly recommended* but not required.
 
-👀 [Preview Quartz Changes](notes/preview%20changes.md)
+> 👀 Step 4: [Preview Quartz Changes](notes/preview%20changes.md)
 
 For those who like to live life more on the edge, viewing the garden through Obsidian gets you pretty close to the real thing.
 
 ## Publishing Changes
 Now that you know the basics of managing your digital garden using Quartz, you can publish it to the internet!
 
-🌍 [Hosting Quartz online!](notes/hosting.md)
+> 🌍 Step 5: [Hosting Quartz online!](notes/hosting.md)
 
 Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
diff --git a/content/notes/hosting.md b/content/notes/hosting.md
index bb1d912ed..fffcd653a 100644
--- a/content/notes/hosting.md
+++ b/content/notes/hosting.md
@@ -2,9 +2,12 @@
 title: "Deploying Quartz to the Web"
 tags:
 - setup
+weight: -1
+aliases:
+- hosting
 ---
 
-## GitHub Pages
+## Hosting on GitHub Pages
 Quartz is designed to be effortless to deploy. If you forked and cloned Quartz directly from the repository, everything should already be good to go! Follow the steps below.
 
 ### Enable GitHub Actions
@@ -41,7 +44,7 @@ Note: we specifically push to the `hugo` branch here. Our GitHub action automati
 ### Setting up the Site
 Now let's get this site up and running. Never hosted a site before? No problem. Have a fancy custom domain you already own or want to subdomain your Quartz? That's easy too.
 
-Here, we take advantage of GitHub's free page hosting to deploy our site. Change `baseURL` in `/config.toml`.
+Here, we take advantage of GitHub's free page hosting to deploy our site. Change `baseURL` in `/config.toml`. 
 
 Make sure that your `baseURL` has a trailing `/`!
 
@@ -51,7 +54,7 @@ Make sure that your `baseURL` has a trailing `/`!
 baseURL = "https://<YOUR-DOMAIN>/"
 ```
 
-If you are using this under a subdomain (e.g. `<YOUR-GITHUB-USERNAME>.github.io/quartz`), include the trailing `/`.
+If you are using this under a subdomain (e.g. `<YOUR-GITHUB-USERNAME>.github.io/quartz`), include the trailing `/`. **You need to do this especially if you are using GitHub!**
 
 ```toml
 baseURL = "https://<YOUR-GITHUB-USERNAME>.github.io/quartz/"
@@ -63,7 +66,7 @@ Please note that the `cname` field should *not* have any path `e.g. end with /qu
 
 [Reference `deploy.yaml` here](https://github.com/jackyzha0/quartz/blob/hugo/.github/workflows/deploy.yaml)
 
-```yaml
+```yaml {title=".github/workflows/deploy.yaml"}
 - name: Deploy  
   uses: peaceiris/actions-gh-pages@v3  
   with:  
@@ -75,10 +78,15 @@ Please note that the `cname` field should *not* have any path `e.g. end with /qu
 
 Have a custom domain? [Learn how to set it up with Quartz ](notes/custom%20Domain.md).
 
+### Ignoring Files
+Only want to publish a subset of all of your notes? Don't worry, Quartz makes this a simple two-step process.
+
+❌ [Excluding pages from being published](notes/ignore%20notes.md)
+
 ---
 
 Now that your Quartz is live, let's figure out how to make Quartz really *yours*!
 
-🎨 [Customizing Quartz](notes/config.md)
+> Step 6: 🎨 [Customizing Quartz](notes/config.md)
 
 Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
diff --git a/content/notes/obsidian.md b/content/notes/obsidian.md
index 8e5fedd82..c709a70d7 100644
--- a/content/notes/obsidian.md
+++ b/content/notes/obsidian.md
@@ -2,6 +2,7 @@
 title: "Obsidian Vault Integration"
 tags:
 - setup
+weight: -3
 ---
 
 ## Setup
@@ -27,3 +28,5 @@ Inserting front matter everytime you want to create a new Note gets annoying rea
 **If you decide to overwrite the `/content` folder completely, don't remove the `/content/templates` folder!**
 
 Head over to Options > Core Plugins and enable the Templates plugin. Then go to Options > Hotkeys and set a hotkey for 'Insert Template' (I recommend `[cmd]+T`). That way, when you create a new note, you can just press the hotkey for a new template and be ready to go!
+
+> 👀 Step 4: [Preview Quartz Changes](notes/preview%20changes.md)
\ No newline at end of file
diff --git a/content/notes/preview changes.md b/content/notes/preview changes.md
index 7f12f3055..937b99bab 100644
--- a/content/notes/preview changes.md	
+++ b/content/notes/preview changes.md	
@@ -1,5 +1,8 @@
 ---
 title: "Preview Changes"
+tags:
+- setup
+weight: -2
 ---
 
 If you'd like to preview what your Quartz site looks like before deploying it to the internet, here's exactly how to do that!
@@ -9,15 +12,9 @@ Note that both of these steps need to be completed.
 ## Install `hugo-obsidian`
 This step will generate the list of backlinks for Hugo to parse. Ensure you have [Go](https://golang.org/doc/install) (>= 1.16) installed.
 
-```shell
+```bash
 # Install and link `hugo-obsidian` locally
-$ go install github.com/jackyzha0/hugo-obsidian@latest
-
-# Navigate to your local Quartz folder
-$ cd <location-of-your-local-quartz>
-
-# Scrape all links in your Quartz folder and generate info for Quartz
-$ hugo-obsidian -input=content -output=assets/indices -index -root=.
+go install github.com/jackyzha0/hugo-obsidian@latest
 ```
 
 If you are running into an error saying that `command not found: hugo-obsidian`, make sure you set your `GOPATH` correctly! This will allow your terminal to correctly recognize hugo-obsidian as an executable.
@@ -27,12 +24,14 @@ Afterwards, start the Hugo server as shown above and your local backlinks and in
 ##  Installing Hugo
 Hugo is the static site generator that powers Quartz. [Install Hugo with "extended" Sass/SCSS version](https://gohugo.io/getting-started/installing/) first. Then,
 
-```
+```bash
 # Navigate to your local Quartz folder
-$ cd <location-of-your-local-quartz>
+cd <location-of-your-local-quartz>
 
 # Start local server
-$ hugo server
+make serve
 
 # View your site in a browser at http://localhost:1313/
 ```
+
+> 🌍 Step 5: [Hosting Quartz online!](notes/hosting.md)
\ No newline at end of file
diff --git a/content/notes/search.md b/content/notes/search.md
new file mode 100644
index 000000000..ed170f64d
--- /dev/null
+++ b/content/notes/search.md
@@ -0,0 +1,50 @@
+---
+title: "Search"
+---
+
+Quartz supports two modes of searching through content.
+
+## Full-text
+Full-text search is the default in Quartz. It produces results that *exactly* match the search query. This is easier to setup but usually produces lower quality matches.
+
+```yaml {title="data/config.yaml"}
+# the default option
+enableSemanticSearch: false
+```
+
+## Natural Language
+Natural language search is powered by [Operand](https://operand.ai/). It understands language like a person does and finds results that best match user intent. In this sense, it is closer to how Google Search works.
+
+Natural language search tends to produce higher quality results than full-text search.
+
+Here's how to set it up.
+
+1. Create an Operand Account on [their website](https://operand.ai/).
+2. Go to Dashboard > Settings > Integrations.
+3. Follow the steps to setup the GitHub integration. Operand needs access to GitHub in order to index your digital garden properly!
+4. Head over to Dashboard > Objects and press `(Cmd + K)` to open the omnibar and select 'Create Collection'.
+	1. Set the 'Collection Label' to something that will help you remember it.
+	2. You can leave the 'Parent Collection' field empty.
+5. Click into your newly made Collection.
+	1. Press the 'share' button that looks like three dots connected by lines.
+	2. Set the 'Interface Type' to `object-search` and click 'Create'.
+	3. This will bring you to a new page with a search bar. Ignore this for now.
+6. Go back to Dashboard > Settings > API Keys and find your Quartz-specific Operand API key under 'Other keys'.
+	1. Copy the key (which looks something like `0e733a7f-9b9c-48c6-9691-b54fa1c8b910`).
+	2. Open `data/config.yaml`. Set `enableSemanticSearch` to `true` and `operandApiKey` to your copied key.
+
+```yaml {title="data/config.yaml"}
+# the default option
+enableSemanticSearch: true
+operandApiKey: "0e733a7f-9b9c-48c6-9691-b54fa1c8b910"
+```
+7. Make a commit and push your changes to GitHub. See the [[notes/hosting|hosting]] page if you haven't done this already.
+	1. This step is *required* for Operand to be able to properly index your content. 
+	2. Head over to Dashboard > Objects and select the collection that you made earlier
+8. Press `(Cmd + K)` to open the omnibar again and select 'Create GitHub Repo'
+	1. Set the 'Repository Label' to `Quartz`
+	2. Set the 'Repository Owner' to your GitHub username
+	3. Set the 'Repository Ref' to `master`
+	4. Set the 'Repository Name' to the name of your repository (usually just `quartz` if you forked the repository without changing the name)
+	5. Leave 'Root Path' and 'Root URL' empty
+9. Wait for your repository to index and enjoy natural language search in Quartz! Operand refreshes the index every 2h so all you need to do is just push to GitHub to update the contents in the search.
\ No newline at end of file
diff --git a/content/notes/setup.md b/content/notes/setup.md
index 495a43b68..00254159c 100644
--- a/content/notes/setup.md
+++ b/content/notes/setup.md
@@ -2,6 +2,7 @@
 title: "Setup"
 tags:
 - setup
+weight: -5
 ---
 
 ## Making your own Quartz
@@ -20,39 +21,12 @@ Then, Fork the repository into your own GitHub account. If you don't have an acc
 After you've made a fork of the repository, you need to download the files locally onto your machine. Ensure you have `git`, then type the following command replacing `YOUR-USERNAME` with your GitHub username.
 
 ```shell
-$ git clone https://github.com/YOUR-USERNAME/quartz
+git clone https://github.com/YOUR-USERNAME/quartz
 ```
 
 ## Editing
 Great! Now you have everything you need to start editing and growing your digital garden. If you're ready to start writing content already, check out the recommended flow for editing notes in Quartz.
 
-✏️ [Editing Notes in Quartz](notes/editing.md)
+> ✏️ Step 2: [Editing Notes in Quartz](notes/editing.md)
 
 Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
-
-## Updating
-Haven't updated Quartz in a while and want all the cool new optimizations? On Unix/Mac systems you can run the following command for a one-line update! This command will show you a log summary of all commits since you last updated, press `q` to acknowledge this. Then, it will show you each change in turn and press `y` to accept the patch or `n` to reject it. Usually you should press `y` for most of these unless it conflicts with existing changes you've made! 
-
-```shell
-make update
-
-# or, if you don't want the interactive parts and just want the update
-make update-force
-```
-
-Or, manually checkout the changes yourself.
-
-> ⚠️ **WARNING** ⚠️
->
-> If you customized the files in `data/`, or anything inside `layouts/`, your customization may be overwritten!
-> Make sure you have a copy of these changes if you don't want to lose them.
-
-
-```shell
-# add Quartz as a remote host
-git remote add upstream git@github.com:jackyzha0/quartz.git
-
-# index and fetch changes
-git fetch upstream
-git checkout -p upstream/hugo -- layouts .github Makefile assets/js assets/styles/base.scss assets/styles/darkmode.scss config.toml data 
-```
diff --git a/content/notes/showcase.md b/content/notes/showcase.md
index 5c16a0d39..585bbdae1 100644
--- a/content/notes/showcase.md
+++ b/content/notes/showcase.md
@@ -5,7 +5,8 @@ title: "Showcase"
 Want to see what Quartz can do? Here are some cool community gardens :)
 
 - [Quartz Documentation (this site!)](https://quartz.jzhao.xyz/)
-- [Jacky Zhao's Garden](https://garden.jzhao.xyz/)
+- [Jacky Zhao's Garden](https://jzhao.xyz/)
+- [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
 - [AWAGMI Intern Notes](https://notes.awagmi.xyz/)
 - [Shihyu's PKM](https://shihyuho.github.io/pkm/)
 - [Chloe's Garden](https://garden.chloeabrasada.online/)
diff --git a/content/notes/updating.md b/content/notes/updating.md
new file mode 100644
index 000000000..ef4688e99
--- /dev/null
+++ b/content/notes/updating.md
@@ -0,0 +1,34 @@
+---
+title: "Updating"
+aliases:
+- update
+---
+
+Haven't updated Quartz in a while and want all the cool new optimizations? On Unix/Mac systems you can run the following command for a one-line update! This command will show you a log summary of all commits since you last updated, press `q` to acknowledge this. Then, it will show you each change in turn and press `y` to accept the patch or `n` to reject it. Usually you should press `y` for most of these unless it conflicts with existing changes you've made! 
+
+```shell
+make update
+```
+
+Or, if you don't want the interactive parts and just want to force update your local garden (this assumed that you are okay with some of your personalizations been overriden!)
+
+```shell
+make update-force
+```
+
+Or, manually checkout the changes yourself.
+
+> [!warning] Warning!
+>
+> If you customized the files in `data/`, or anything inside `layouts/`, your customization may be overwritten!
+> Make sure you have a copy of these changes if you don't want to lose them.
+
+
+```shell
+# add Quartz as a remote host
+git remote add upstream git@github.com:jackyzha0/quartz.git
+
+# index and fetch changes
+git fetch upstream
+git checkout -p upstream/hugo -- layouts .github Makefile assets/js assets/styles/base.scss assets/styles/darkmode.scss config.toml data 
+```
diff --git a/data/config.yaml b/data/config.yaml
index 7cfed5e1a..5dd04f294 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -3,10 +3,17 @@ enableToc: true
 openToc: false
 enableLinkPreview: true
 enableLatex: true
+enableCodeBlockTitle: true
+enableCodeBlockCopy: true
+enableCallouts: true
 enableSPA: true
 enableFooter: true
 enableContextualBacklinks: true
 enableRecentNotes: true
+enableGitHubEdit: true
+GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
+enableSemanticSearch: false
+operandApiKey: "REPLACE-WITH-YOUR-OPERAND-API-KEY"
 description:
   Jaden Lorenc's site.
 page_title:
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index ff4e8b39c..dbcf732fd 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,8 +1,9 @@
 {{$src := .Destination | safeURL }}
+{{$width := index (split .Text "|") 1 | default "auto" }}
 {{$external := strings.HasPrefix $src "http" }}
 {{- if $external -}}
-<img src="{{ $src }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
+<img src="{{ $src }}" width="{{ $width }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
 {{- else -}}
 {{$fixedUrl := (cond (hasPrefix $src "/") $src (print "/" $src)) | urlize}}
-<img src="{{ $fixedUrl }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
+<img src="{{.Page.Site.BaseURL}}{{ $fixedUrl }}" width="{{ $width }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
 {{- end -}}
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index abdf0b05c..96611c4ce 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -6,14 +6,12 @@
 {{partial "search.html" .}}
 <div class="singlePage">
     <!-- Begin actual content -->
-    <header>
-        <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
-        <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
-        <div class="spacer"></div>
-        {{partial "darkmode.html" .}}
-    </header>
+    {{partial "header.html" .}}
     <article>
         <h1>All {{.Title}}</h1>
+        {{with .Params.description}}
+            <p>{{.}}</p>
+        {{end}}
         {{partial "page-list.html" .Paginator.Pages.ByLastmod.Reverse }}
         {{ template "_internal/pagination.html" .}}
     </article>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 91eda290b..b4dd6dee1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -6,16 +6,12 @@
 {{partial "search.html" .}}
 <div class="singlePage">
     <!-- Begin actual content -->
-    <header>
-        <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
-      <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
-      <div class="spacer"></div>
-      {{partial "darkmode.html" .}}
-  </header>
-  <article>
+    {{partial "header.html" .}}
+    <article>
       {{if .Title}}<h1>{{ .Title }}</h1>{{end}}
       <p class="meta">
-          Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
+          Last updated {{ partial "date-fmt.html" .}} 
+          {{ partial "github.html" . }}
       </p>
       <ul class="tags">
           {{ range (.GetTerms "tags") }}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index e0a1e876c..7e401ae03 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -6,22 +6,20 @@
 {{partial "search.html" .}}
 <div class="singlePage">
     <!-- Begin actual content -->
-    <header>
-        <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
-        <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
-        <div class="spacer"></div>
-        {{partial "darkmode.html" .}}
-    </header>
+    {{partial "header.html" .}}
     <article>
         <h1>All {{.Title}}</h1>
+        {{with .Params.description}}
+            <p>{{.}}</p>
+        {{end}}
         <div class="tags">
             {{ range .Site.Taxonomies.tags.ByCount }}
             <div class="meta">
-                <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h1>
-                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 2}}(showing first 2 results){{end}}</p>
+                <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
+                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 10}}(showing first 10 results){{end}}</p>
             </div>
             {{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}
-            {{partial "page-list.html" (first 2 .Pages.ByLastmod.Reverse)}}
+            {{partial "page-list.html" (first 10 .Pages.ByLastmod.Reverse)}}
             {{ end }}
             {{ end }}
         </div>
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index 58f024bcc..79bd4eb05 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -6,14 +6,12 @@
 {{partial "search.html" .}}
 <div class="singlePage">
     <!-- Begin actual content -->
-    <header>
-        <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
-        <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
-        <div class="spacer"></div>
-        {{partial "darkmode.html" .}}
-    </header>
+    {{partial "header.html" .}}
     <article>
-        <h1>Tag: {{.Title | humanize}}</h1>
+        <h1>Tag: {{ .Title }}</h1>
+        {{with .Params.description}}
+            <p>{{.}}</p>
+        {{end}}
         {{partial "page-list.html" .Paginator.Pages}}
         {{ template "_internal/pagination.html" . }}
     </article>
diff --git a/layouts/index.html b/layouts/index.html
index 505361420..c7871e9f6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,12 +6,7 @@
 {{partial "search.html" .}}
 <div class="singlePage">
     <!-- Begin actual content -->
-    <header>
-        <h1>{{if .Title}}{{ .Title }}{{else}}Untitled{{end}}</h1>
-        <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
-        <div class="spacer"></div>
-        {{partial "darkmode.html" .}}
-    </header>
+    {{partial "header.html" .}}
     <article>
         {{partial "toc.html" .}}
         {{partial "textprocessing.html" . }}
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
index 7fb991e9d..e52dc4474 100644
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@@ -4,7 +4,7 @@
         <p>Made by {{ $.Site.Data.config.name }} using <a href="https://github.com/jackyzha0/quartz">Quartz</a>, © {{ dateFormat "2006" now }}</p>
         <ul>
             {{ if not .IsHome }}
-            <li><a href="/">Home</a></li>
+            <li><a href="{{ $.Site.BaseURL}}">Home</a></li>
             {{end}}
             {{- range $.Site.Data.config.links -}}
             <li><a href="{{.link}}">{{.link_name}}</a></li>
diff --git a/layouts/partials/date-fmt.html b/layouts/partials/date-fmt.html
new file mode 100644
index 000000000..6104226e2
--- /dev/null
+++ b/layouts/partials/date-fmt.html
@@ -0,0 +1,7 @@
+{{if .Date}}
+{{.Date.Format "Jan 2, 2006"}}
+{{else if .Lastmod}}
+{{.Lastmod.Format "Jan 2, 2006"}}
+{{else}}
+Unknown
+{{end}}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ddefe75cf..cab44cb9b 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -3,7 +3,7 @@
 <hr/>
 
 {{if $.Site.Data.config.enableFooter}}
-<div class="page-end">
+<div class="page-end" id="footer">
     <div class="backlinks-container">
         {{partial "backlinks.html" .}}
     </div>
@@ -13,4 +13,4 @@
 </div>
 {{end}}
 
-{{partial "contact.html" .}}
\ No newline at end of file
+{{partial "contact.html" .}}
diff --git a/layouts/partials/footerIndex.html b/layouts/partials/footerIndex.html
index 5f190446a..5b73fa45d 100644
--- a/layouts/partials/footerIndex.html
+++ b/layouts/partials/footerIndex.html
@@ -1,6 +1,6 @@
 {{if $.Site.Data.config.enableFooter}}
   {{if $.Site.Data.graphConfig.enableGlobalGraph}}
-      <div class="page-end">
+      <div class="page-end" id="footer">
 
         <div>
             {{partial "graph.html" .}}
@@ -9,7 +9,7 @@
       </div>
   {{else}}
       <hr/>
-      <div class="page-end">
+      <div class="page-end" id="footer">
         <div class="backlinks-container">
             {{partial "backlinks.html" .}}
         </div>
diff --git a/layouts/partials/github.html b/layouts/partials/github.html
new file mode 100644
index 000000000..21adb63e3
--- /dev/null
+++ b/layouts/partials/github.html
@@ -0,0 +1,3 @@
+{{if $.Site.Data.config.enableGitHubEdit}}
+<a href="{{$.Site.Data.config.GitHubLink}}/{{.File.Path}}" rel="noopener">Edit Source</a>
+{{end}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b3ad28d8c..6b465dadb 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -10,30 +10,66 @@
     end }}
   </title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="shortcut icon" type="image/png" href="{{$.Site.BaseURL}}/icon.png" />
+
+  <!-- HTML Favicon -->
+  {{ $favicon := $.Site.Data.config.favicon | default (slice (dict "rel" "shortcut icon" "type" "image/png" "href" "icon.png")) }}
+  {{ $type := (printf "%T" $favicon) }}
+  {{ if eq $type "string" }}
+  {{ $favicon | safeHTML }}
+  {{ else }}
+  {{ range $favicon }}
+  <link rel="{{.rel}}" {{if .type}}type="{{.type}}"{{end}} {{if .sizes}}sizes="{{.sizes}}"{{end}} href="{{$.Site.BaseURL}}/{{.href}}" />
+  {{- end }}
+  {{ end }}
 
   <!-- CSS Stylesheets and Fonts -->
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap"
-    rel="stylesheet"
-  />
   {{$sass := resources.Match "styles/[!_]*.scss" }}
   {{$css := slice }}
   {{range $sass}}
   {{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }}
   {{$css = $css | append $scss}}
   {{end}}
+  {{if $.Site.Data.config.enableCallouts}}
+    {{$scss := resources.Get "styles/_callouts.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
+    {{$css = $css | append $scss}}
+  {{end}}
   {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify  }}
   <link href="{{$finalCss.Permalink}}" rel="stylesheet" />
 
-  {{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }}
-  <script src="{{$darkMode.Permalink}}"></script>
-  {{partial "katex.html" .}}
+  {{$lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify  }}
+  <link href="{{$lightSyntax.Permalink}}" rel="stylesheet" id="theme-link">
 
+   <!-- Base scripts -->
+  {{$scripts := (slice "js/darkmode.js" "js/util.js")}}
+  {{range $scripts}}
+  {{$scriptname := .}}
+  {{ $s := resources.Get $scriptname | resources.ExecuteAsTemplate $scriptname . | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$s.Permalink}}"></script>
+  {{end}}
+  {{partial "katex.html" .}}
+    
+  <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
+  <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
   {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
   resources.Minify }}
   <script src="{{$popover.Permalink}}"></script>
 
+  <!-- Optional scripts -->
+  {{ if $.Site.Data.config.enableCodeBlockTitle }}
+  {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$codeTitle.Permalink}}"></script>
+  {{end}}
+
+  {{ if $.Site.Data.config.enableCodeBlockCopy }}
+  {{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$clipboard.Permalink}}"></script>
+  {{ end }}
+
+  {{ if $.Site.Data.config.enableCallouts }}
+  {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$callouts.Permalink}}"></script>
+  {{ end }}
+
   <!--  Preload page vars  -->
   {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
   "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -60,28 +96,23 @@
       const render = () => {
       // NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page, adds event listeners, etc. If you are only dealing with basic DOM replacement, use the init function
 
-      const siteBaseURL = new URL({{$.Site.BaseURL}});
+      const siteBaseURL = new URL(BASE_URL);
       const pathBase = siteBaseURL.pathname;
       const pathWindow = window.location.pathname;
       const isHome = pathBase == pathWindow;
 
-      {{if $.Site.Data.config.enableFooter}}
-      const container = document.getElementById("graph-container")
-      // retry if the graph is not ready
-      if (!container) return requestAnimationFrame(render)
-      // clear the graph in case there is anything within it
-      container.textContent = ""
+      {{if $.Site.Data.config.enableCodeBlockCopy -}}
+      addCopyButtons();
+      {{ end }}
 
-      const drawGlobal = isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}};
-      drawGraph(
-          {{strings.TrimRight "/" .Site.BaseURL}},
-          drawGlobal,
-          {{$.Site.Data.graphConfig.paths}},
-          drawGlobal ? {{$.Site.Data.graphConfig.globalGraph}} : {{$.Site.Data.graphConfig.localGraph}}
-        );
-
-      {{end}}
+      {{if $.Site.Data.config.enableSPA -}}
+      addTitleToCodeBlocks();
+      {{ end }}
 
+      {{if $.Site.Data.config.enableCallouts -}}
+      addCollapsibleCallouts();
+      {{ end }}
+     
       {{if $.Site.Data.config.enableLinkPreview}}
       initPopover(
         {{strings.TrimRight "/" .Site.BaseURL }},
@@ -89,10 +120,37 @@
         {{$.Site.Data.config.enableLatex}}
       )
       {{end}}
+
+      {{if $.Site.Data.config.enableFooter}}
+      const footer = document.getElementById("footer")
+      if (footer) {
+        const container = document.getElementById("graph-container")
+        // retry if the graph is not ready
+        if (!container) return requestAnimationFrame(render)
+        // clear the graph in case there is anything within it
+        container.textContent = ""
+
+        const drawGlobal = isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}};
+        drawGraph(
+            {{strings.TrimRight "/" .Site.BaseURL}},
+            drawGlobal,
+            {{$.Site.Data.graphConfig.paths}},
+            drawGlobal ? {{$.Site.Data.graphConfig.globalGraph}} : {{$.Site.Data.graphConfig.localGraph}}
+          );
+
+        }
+      {{end}}
     }
 
     const init = (doc = document) => {
       // NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
+      {{if $.Site.Data.config.enableCodeBlockCopy -}}
+      addCopyButtons();
+      {{ end }}
+
+      {{if $.Site.Data.config.enableCodeBlockTitle -}}
+      addTitleToCodeBlocks();
+      {{- end -}}
       {{if $.Site.Data.config.enableLatex}}
       renderMathInElement(doc.body, {
         delimiters: [
@@ -117,8 +175,11 @@
       navigate: (url) => (window.location.href = url),
       prefetch: () => {},
     }
-    init()
-    render()
+
+    window.addEventListener("DOMContentLoaded", () => {
+      init()
+      render()
+    })
   </script>
   {{end}}
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 000000000..773e0684b
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,10 @@
+<header>
+    <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
+    <div class="spacer"></div>
+    <div id="search-icon">
+      <p>Search</p>
+      <svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
+    </div>
+    {{partial "darkmode.html" .}}
+</header>
+
diff --git a/layouts/partials/page-list.html b/layouts/partials/page-list.html
index e51c5ddab..1d2a47710 100644
--- a/layouts/partials/page-list.html
+++ b/layouts/partials/page-list.html
@@ -2,19 +2,18 @@
     {{- range . -}}
     <li class="section-li">
         <div class="section">
-            <div class="desc">
-                <h3><a href="{{ .Permalink }}">{{- .Title -}}</a></h3>
-                <ul class="tags">
-                    {{ range (.GetTerms "tags") }}
-                    <li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
-                    {{ end }}
-                </ul>
-                <p>{{- .Summary -}}{{if .Truncated}}...{{end}}</p>
-            </div>
             <p class="meta">
-                {{ .ReadingTime }} minute read. Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
+                {{partial "date-fmt.html" .}}
             </p>
-
+            <div class="desc">
+              <h3><a href="{{ .Permalink }}" class="internal-link" data-src="{{ .RelPermalink }}">{{- .Title -}}</a></h3>
+            </div>
+            <div class="spacer"></div>
+            <ul class="tags">
+                {{ range (.GetTerms "tags") }}
+                <li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
+                {{ end }}
+            </ul>
         </div>
     </li>
     {{- end -}}
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index f727184a6..86c8613ee 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -1,10 +1,18 @@
 <div id="search-container">
-    <div id="search-space">
-        <input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search" placeholder="Search for something...">
-        <div id="results-container">
-        </div>
+  <div id="search-space">
+    <input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search"
+      placeholder="Search for something...">
+    <div id="results-container">
     </div>
+  </div>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js" integrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE=" crossorigin="anonymous" defer></script>
-{{ $js := resources.Get "js/search.js" |  resources.Fingerprint "md5" | resources.Minify }}
+{{if $.Site.Data.config.enableSemanticSearch}}
+{{ $js := resources.Get "js/semantic-search.js" | resources.ExecuteAsTemplate "js/semantic-search.js" . | resources.Fingerprint "md5" | resources.Minify }}
 <script defer src="{{ $js.Permalink }}"></script>
+{{else}}
+<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js"
+  integrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE=" crossorigin="anonymous" defer></script>
+{{ $js := resources.Get "js/full-text-search.js" | resources.Fingerprint "md5" | resources.Minify }}
+<script defer src="{{ $js.Permalink }}"></script>
+{{end}}
+
diff --git a/layouts/partials/textprocessing.html b/layouts/partials/textprocessing.html
index 65dc2f487..1cb2583dc 100644
--- a/layouts/partials/textprocessing.html
+++ b/layouts/partials/textprocessing.html
@@ -27,10 +27,8 @@
       {{$inner := . | strings.TrimPrefix "![[" | strings.TrimSuffix "]]" }}
       {{$split := split $inner "|"}}
       {{$path := index $split 0 | relURL}}
-      {{$reference := split $path "#"}}
-      {{$title := index $reference 0}}
-      {{$display := default $title (index $split 1)}}
-      {{$img := printf "<img src=\"/vault%s\" title=\"%s\">" $path $display}}
+      {{$width := index $split 1}}
+      {{$img := printf "<img src=\"%s\" width=\"%s\" />" $path (default "auto" $width)}}
       {{$content = replace $content . $img}}
     {{else}}
       {{$inner := . | strings.TrimPrefix "[[" | strings.TrimSuffix "]]" }}
@@ -39,7 +37,7 @@
       {{$reference := split $path "#"}}
       {{$title := index $reference 0}}
       {{$block := default "" (index $reference 1)}}
-      {{$block = strings.TrimRight "/" (cond (eq $block "") $block (printf "#%s" $block))}}
+      {{$block = strings.TrimRight "/" (cond (eq $block "") $block (printf "#%s" $block)) | urlize | lower}}
       {{$href := strings.TrimRight "/" ($page.GetPage $title).RelPermalink}}
       {{$display := default $title (index $split 1)}}
       {{if not $href}}
@@ -54,7 +52,40 @@
   {{end}}
 {{end}}
 
-{{/* Add copyable anchors */}}
+{{/* Add jumpable anchors */}}
 {{ $content = $content | replaceRE "(<h[1-9] id=\"([^\"]+)\">)(.+)(</h[1-9]>)" `<a href="#${2}">${1}<span class="hanchor" ariaLabel="Anchor"># </span>${3}${4}</a>` }}
 
+{{/* Callouts */}}
+{{if $.Site.Data.config.enableCallouts}}
+  {{ $content = $content | replaceRE "<blockquote>" "<blockquote class=callout>" }}
+  {{ $blockquoteclasses := findRE `\[!.+\]` $content }}
+  {{ $blockquoteclasses1 := findRE "<blockquote.*?>(.|\n)*?</blockquote>" $content }}
+  {{ $blockquotetags := findRE `blockquote class=callout` $content }}
+  {{ $counter := 0 }}
+  {{ $counter1 := 0 }}
+  {{ $finder := index $blockquoteclasses1 $counter }}
+  {{range $blockquotetags}}
+    {{ $finder = index $blockquoteclasses1 $counter }}
+    {{ if (in $finder "[!") }}
+      {{ $inner := index $blockquoteclasses $counter1 }}
+      {{ if (in $finder "]-") }}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `callout-collapsible callout-collapsed ${1}`}}
+      {{ else if (in $finder "]+") }}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `callout-collapsible ${1}`}}
+      {{ else}}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `${1}` }}
+      {{ end }}
+      {{ $inner = printf "blockquote class=\"%s-callout\"" $inner | lower}}
+      {{ $content = replace $content . $inner 1}}
+      {{ $counter1 = add $counter1 1 }}
+    {{ else }}
+      {{ $inner := print "blockquote" }}
+      {{ $content = replace $content . $inner 1}}
+    {{ end }}
+    {{ $counter = add $counter 1 }}
+  {{end}}
+  {{ $content = $content | replaceRE `\[![a-zA-Z]+\][-\+]?` "" }}
+  {{ $content = $content | replaceRE "blockquote class=callout" "blockquote" }}
+{{end}}
+
 {{ $content | safeHTML }}