- {beforeBody.map(BodyComponent =>
)}
+
-
- {left.map(BodyComponent => )}
-
-
+ {LeftComponent}
+
+
-
- {right.map(BodyComponent => )}
-
+ {RightComponent}
-
{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}
diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
index f00a87334..594bd3a92 100644
--- a/quartz/components/scripts/darkmode.inline.ts
+++ b/quartz/components/scripts/darkmode.inline.ts
@@ -2,7 +2,7 @@ const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'l
const currentTheme = localStorage.getItem('theme') ?? userPref
document.documentElement.setAttribute('saved-theme', currentTheme)
-window.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("nav", () => {
const switchTheme = (e: any) => {
if (e.target.checked) {
document.documentElement.setAttribute('saved-theme', 'dark')
@@ -16,7 +16,8 @@ window.addEventListener('DOMContentLoaded', () => {
// Darkmode toggle
const toggleSwitch = document.querySelector('#darkmode-toggle') as HTMLInputElement
- toggleSwitch.addEventListener('change', switchTheme, false)
+ toggleSwitch.removeEventListener('change', switchTheme)
+ toggleSwitch.addEventListener('change', switchTheme)
if (currentTheme === 'dark') {
toggleSwitch.checked = true
}
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 27e9a817e..169b8c45f 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -266,9 +266,9 @@ async function renderGraph(container: string, slug: string) {
})
}
-function renderGlobalGraph() {
+async function renderGlobalGraph() {
const slug = document.body.dataset["slug"]!
- renderGraph("global-graph-container", slug)
+ await renderGraph("global-graph-container", slug)
const container = document.getElementById("global-graph-outer")
container?.classList.add("active")
@@ -293,7 +293,14 @@ document.addEventListener("nav", async (e: unknown) => {
containerIcon?.addEventListener("click", renderGlobalGraph)
})
-window.addEventListener('resize', async () => {
- const slug = document.body.dataset["slug"]!
- await renderGraph("graph-container", slug)
+let resizeEventDebounce: number | undefined = undefined
+window.addEventListener('resize', () => {
+ if (resizeEventDebounce) {
+ clearTimeout(resizeEventDebounce)
+ }
+
+ resizeEventDebounce = window.setTimeout(async () => {
+ const slug = document.body.dataset["slug"]!
+ await renderGraph("graph-container", slug)
+ }, 50)
})
diff --git a/quartz/components/scripts/plausible.inline.ts b/quartz/components/scripts/plausible.inline.ts
new file mode 100644
index 000000000..60817c293
--- /dev/null
+++ b/quartz/components/scripts/plausible.inline.ts
@@ -0,0 +1,3 @@
+import Plausible from 'plausible-tracker'
+const { trackPageview } = Plausible()
+document.addEventListener("nav", () => trackPageview())
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 655831dba..b38899554 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -1,5 +1,24 @@
import { computePosition, flip, inline, shift } from "@floating-ui/dom"
+// from micromorph/src/utils.ts
+// https://github.com/natemoo-re/micromorph/blob/main/src/utils.ts#L5
+export function normalizeRelativeURLs(
+ el: Element | Document,
+ base: string | URL
+) {
+ const update = (el: Element, attr: string, base: string | URL) => {
+ el.setAttribute(attr, new URL(el.getAttribute(attr)!, base).pathname)
+ }
+
+ el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) =>
+ update(item, 'href', base)
+ )
+
+ el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) =>
+ update(item, 'src', base)
+ )
+}
+
document.addEventListener("nav", () => {
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
const p = new DOMParser()
@@ -41,6 +60,7 @@ document.addEventListener("nav", () => {
if (!contents) return
const html = p.parseFromString(contents, "text/html")
+ normalizeRelativeURLs(html, targetUrl)
const elts = [...html.getElementsByClassName("popover-hint")]
if (elts.length === 0) return
@@ -54,11 +74,13 @@ document.addEventListener("nav", () => {
setPosition(popoverElement)
link.appendChild(popoverElement)
link.dataset.fetchedPopover = "true"
-
- const heading = popoverInner.querySelector(hash) as HTMLElement | null
- if (heading) {
- // leave ~12px of buffer when scrolling to a heading
- popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
+
+ if (hash !== "") {
+ const heading = popoverInner.querySelector(hash) as HTMLElement | null
+ if (heading) {
+ // leave ~12px of buffer when scrolling to a heading
+ popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
+ }
}
})
}
diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
index 3344a7b58..80baefc07 100644
--- a/quartz/components/styles/backlinks.scss
+++ b/quartz/components/styles/backlinks.scss
@@ -7,13 +7,9 @@
& > ul {
list-style: none;
padding: 0;
- margin: 0;
+ margin: 0.5rem 0;
& > li {
- margin: 0.5rem 0;
- padding: 0.25rem 1rem;
- border: var(--lightgray) 1px solid;
- border-radius: 5px;
& > a {
background-color: transparent;
}
diff --git a/quartz/components/styles/footer.scss b/quartz/components/styles/footer.scss
index d104e5081..16df545de 100644
--- a/quartz/components/styles/footer.scss
+++ b/quartz/components/styles/footer.scss
@@ -1,6 +1,8 @@
footer {
text-align: left;
opacity: 0.8;
+ margin-bottom: 4rem;
+
& ul {
list-style: none;
margin: 0;
diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
index 244f2e4ee..4533a845b 100644
--- a/quartz/components/styles/graph.scss
+++ b/quartz/components/styles/graph.scss
@@ -11,6 +11,7 @@
height: 250px;
margin: 0.5em 0;
position: relative;
+ overflow: hidden;
& > #global-graph-icon {
color: var(--dark);
@@ -30,10 +31,6 @@
background-color: var(--lightgray);
}
}
-
- & > #graph-container > svg {
- margin-bottom: -5px;
- }
}
& > #global-graph-outer {
diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss
index a5d0a915d..182381504 100644
--- a/quartz/components/styles/listPage.scss
+++ b/quartz/components/styles/listPage.scss
@@ -8,29 +8,36 @@ li.section-li {
margin-bottom: 1em;
& > .section {
- display: flex;
- align-items: center;
+ display: grid;
+ grid-template-columns: 6em 3fr 1fr;
@media all and (max-width: 600px) {
- & .tags {
+ & > .tags {
display: none;
}
}
- & h3 > a {
- font-weight: 700;
- margin: 0;
- background-color: transparent;
+ & > .tags {
+ justify-self: end;
+ margin-left: 1rem;
}
- & p {
+ & > .desc a {
+ background-color: transparent;
+ }
+
+ & > .meta {
margin: 0;
- padding-right: 1em;
flex-basis: 6em;
+ opacity: 0.6;
}
}
-
- & .meta {
- opacity: 0.6;
- }
+}
+
+// modifications in popover context
+.popover .section {
+ grid-template-columns: 6em 1fr !important;
+ & > .tags {
+ display: none;
+ }
}
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index 5ae09fe4c..80bdfad45 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -24,7 +24,7 @@
height: 20rem;
padding: 0 1rem 1rem 1rem;
font-weight: initial;
- line-height: initial;
+ line-height: normal;
font-size: initial;
font-family: var(--bodyFont);
border: 1px solid var(--gray);
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 32d574430..cbf982a64 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -1,8 +1,7 @@
.search {
min-width: 5rem;
- max-width: 12rem;
+ max-width: 14rem;
flex-grow: 0.3;
- margin: 0 1.5rem;
& > #search-icon {
background-color: var(--lightgray);
diff --git a/quartz/components/types.ts b/quartz/components/types.ts
index c7584b6fc..d1c153dd0 100644
--- a/quartz/components/types.ts
+++ b/quartz/components/types.ts
@@ -8,7 +8,7 @@ export type QuartzComponentProps = {
externalResources: StaticResources
fileData: QuartzPluginData
cfg: GlobalConfiguration
- children: QuartzComponent[] | JSX.Element[]
+ children: (QuartzComponent | JSX.Element)[]
tree: Node
allFiles: QuartzPluginData[]
}
diff --git a/quartz/path.ts b/quartz/path.ts
index 4755687e9..81cdb3a3d 100644
--- a/quartz/path.ts
+++ b/quartz/path.ts
@@ -5,7 +5,17 @@ function slugSegment(s: string): string {
return s.replace(/\s/g, '-')
}
+// on the client, 'index' isn't ever rendered so we should clean it up
+export function clientSideSlug(fp: string): string {
+ if (fp.endsWith("index")) {
+ fp = fp.slice(0, -"index".length)
+ }
+
+ return fp
+}
+
export function trimPathSuffix(fp: string): string {
+ fp = clientSideSlug(fp)
let [cleanPath, anchor] = fp.split("#", 2)
anchor = anchor === undefined ? "" : "#" + anchor
@@ -27,9 +37,6 @@ export function slugify(s: string): string {
// resolve /a/b/c to ../../
export function resolveToRoot(slug: string): string {
let fp = trimPathSuffix(slug)
- if (fp.endsWith("index")) {
- fp = fp.slice(0, -"index".length)
- }
if (fp === "") {
return "."
diff --git a/quartz/plugins/emitters/contentIndex.ts b/quartz/plugins/emitters/contentIndex.ts
index f75334a4d..cf4275691 100644
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -36,7 +36,6 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex): string {
const base = cfg.canonicalUrl ?? ""
const root = `https://${base}`
- // TODO: ogimage
const createURLEntry = (slug: string, content: ContentDetails): string => `
${content.title}
${root}/${slug}
diff --git a/quartz/plugins/index.ts b/quartz/plugins/index.ts
index 88158113f..c55e4dd75 100644
--- a/quartz/plugins/index.ts
+++ b/quartz/plugins/index.ts
@@ -1,29 +1,17 @@
import { GlobalConfiguration } from '../cfg'
import { QuartzComponent } from '../components/types'
import { StaticResources } from '../resources'
-import { googleFontHref, joinStyles } from '../theme'
+import { joinStyles } from '../theme'
import { EmitCallback, PluginTypes } from './types'
import styles from '../styles/base.scss'
-// @ts-ignore
-import spaRouterScript from '../components/scripts/spa.inline'
-// @ts-ignore
-import popoverScript from '../components/scripts/popover.inline'
-import popoverStyle from '../components/styles/popover.scss'
-
export type ComponentResources = {
css: string[],
beforeDOMLoaded: string[],
afterDOMLoaded: string[]
}
-function joinScripts(scripts: string[]): string {
- // wrap with iife to prevent scope collision
- return scripts.map(script => `(function () {${script}})();`).join("\n")
-}
-
-export function emitComponentResources(cfg: GlobalConfiguration, resources: StaticResources, plugins: PluginTypes, emit: EmitCallback) {
- const fps: string[] = []
+export function getComponentResources(plugins: PluginTypes): ComponentResources {
const allComponents: Set = new Set()
for (const emitter of plugins.emitters) {
const components = emitter.getQuartzComponents()
@@ -50,41 +38,35 @@ export function emitComponentResources(cfg: GlobalConfiguration, resources: Stat
componentResources.afterDOMLoaded.push(afterDOMLoaded)
}
}
-
- if (cfg.enablePopovers) {
- componentResources.afterDOMLoaded.push(popoverScript)
- componentResources.css.push(popoverStyle)
- }
- if (cfg.enableSPA) {
- componentResources.afterDOMLoaded.push(spaRouterScript)
- } else {
- componentResources.afterDOMLoaded.push(`
- window.spaNavigate = (url, _) => window.location.assign(url)
- const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
- document.dispatchEvent(event)`
- )
- }
+ return componentResources
+}
- emit({
- slug: "index",
- ext: ".css",
- content: joinStyles(cfg.theme, styles, ...componentResources.css)
- })
- emit({
- slug: "prescript",
- ext: ".js",
- content: joinScripts(componentResources.beforeDOMLoaded)
- })
- emit({
- slug: "postscript",
- ext: ".js",
- content: joinScripts(componentResources.afterDOMLoaded)
- })
+function joinScripts(scripts: string[]): string {
+ // wrap with iife to prevent scope collision
+ return scripts.map(script => `(function () {${script}})();`).join("\n")
+}
- fps.push("index.css", "prescript.js", "postscript.js")
- resources.css.push(googleFontHref(cfg.theme))
+export async function emitComponentResources(cfg: GlobalConfiguration, res: ComponentResources, emit: EmitCallback): Promise {
+ const fps = await Promise.all([
+ emit({
+ slug: "index",
+ ext: ".css",
+ content: joinStyles(cfg.theme, styles, ...res.css)
+ }),
+ emit({
+ slug: "prescript",
+ ext: ".js",
+ content: joinScripts(res.beforeDOMLoaded)
+ }),
+ emit({
+ slug: "postscript",
+ ext: ".js",
+ content: joinScripts(res.afterDOMLoaded)
+ })
+ ])
return fps
+
}
export function getStaticResourcesFromPlugins(plugins: PluginTypes) {
diff --git a/quartz/plugins/transformers/gfm.ts b/quartz/plugins/transformers/gfm.ts
index 54f8ca670..f966e58ba 100644
--- a/quartz/plugins/transformers/gfm.ts
+++ b/quartz/plugins/transformers/gfm.ts
@@ -1,4 +1,3 @@
-import { PluggableList } from "unified"
import remarkGfm from "remark-gfm"
import smartypants from 'remark-smartypants'
import { QuartzTransformerPlugin } from "../types"
@@ -20,14 +19,14 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin |
return {
name: "GitHubFlavoredMarkdown",
markdownPlugins() {
- return opts.enableSmartyPants ? [remarkGfm] : [remarkGfm, smartypants]
+ return opts.enableSmartyPants ? [remarkGfm, smartypants] : [remarkGfm]
},
htmlPlugins() {
if (opts.linkHeadings) {
return [rehypeSlug, [rehypeAutolinkHeadings, {
behavior: 'append', content: {
type: 'text',
- value: ' §'
+ value: ' §',
}
}]]
} else {
diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
index 13914523e..b8a800a7a 100644
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -1,5 +1,5 @@
import { QuartzTransformerPlugin } from "../types"
-import { relativeToRoot, slugify, trimPathSuffix } from "../../path"
+import { clientSideSlug, relativeToRoot, slugify, trimPathSuffix } from "../../path"
import path from "path"
import { visit } from 'unist-util-visit'
import isAbsoluteUrl from "is-absolute-url"
@@ -27,7 +27,7 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> =
htmlPlugins() {
return [() => {
return (tree, file) => {
- const curSlug = file.data.slug!
+ const curSlug = clientSideSlug(file.data.slug!)
const transformLink = (target: string) => {
const targetSlug = slugify(decodeURI(target).trim())
if (opts.markdownLinkResolution === 'relative' && !path.isAbsolute(targetSlug)) {
@@ -49,7 +49,6 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> =
let dest = node.properties.href
node.properties.className = isAbsoluteUrl(dest) ? "external" : "internal"
-
// don't process external links or intra-document anchors
if (!(isAbsoluteUrl(dest) || dest.startsWith("#"))) {
node.properties.href = transformLink(dest)
diff --git a/quartz/processors/emit.ts b/quartz/processors/emit.ts
index e1438fae0..7150f5ec2 100644
--- a/quartz/processors/emit.ts
+++ b/quartz/processors/emit.ts
@@ -1,13 +1,69 @@
import path from "path"
import fs from "fs"
-import { QuartzConfig } from "../cfg"
+import { GlobalConfiguration, QuartzConfig } from "../cfg"
import { PerfTimer } from "../perf"
-import { emitComponentResources, getStaticResourcesFromPlugins } from "../plugins"
+import { ComponentResources, emitComponentResources, getComponentResources, getStaticResourcesFromPlugins } from "../plugins"
import { EmitCallback } from "../plugins/types"
import { ProcessedContent } from "../plugins/vfile"
import { QUARTZ, slugify } from "../path"
import { globbyStream } from "globby"
import chalk from "chalk"
+import { googleFontHref } from '../theme'
+
+// @ts-ignore
+import spaRouterScript from '../components/scripts/spa.inline'
+// @ts-ignore
+import plausibleScript from '../components/scripts/plausible.inline'
+// @ts-ignore
+import popoverScript from '../components/scripts/popover.inline'
+import popoverStyle from '../components/styles/popover.scss'
+import { StaticResources } from "../resources"
+
+function addGlobalPageResources(cfg: GlobalConfiguration, staticResources: StaticResources, componentResources: ComponentResources) {
+ // font and other resources
+ staticResources.css.push(googleFontHref(cfg.theme))
+
+ // popovers
+ if (cfg.enablePopovers) {
+ componentResources.afterDOMLoaded.push(popoverScript)
+ componentResources.css.push(popoverStyle)
+ }
+
+ if (cfg.analytics?.provider === "google") {
+ const tagId = cfg.analytics.tagId
+ staticResources.js.push({
+ src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
+ contentType: 'external',
+ loadTime: 'afterDOMReady',
+ })
+ componentResources.afterDOMLoaded.push(`
+ window.dataLayer = window.dataLayer || [];
+ function gtag() { dataLayer.push(arguments); }
+ gtag(\`js\`, new Date());
+ gtag(\`config\`, \`${tagId}\`, { send_page_view: false });
+
+ document.addEventListener(\`nav\`, () => {
+ gtag(\`event\`, \`page_view\`, {
+ page_title: document.title,
+ page_location: location.href,
+ });
+ });`
+ )
+ } else if (cfg.analytics?.provider === "plausible") {
+ componentResources.afterDOMLoaded.push(plausibleScript)
+ }
+
+ // spa
+ if (cfg.enableSPA) {
+ componentResources.afterDOMLoaded.push(spaRouterScript)
+ } else {
+ componentResources.afterDOMLoaded.push(`
+ window.spaNavigate = (url, _) => window.location.assign(url)
+ const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
+ document.dispatchEvent(event)`
+ )
+ }
+}
export async function emitContent(contentFolder: string, output: string, cfg: QuartzConfig, content: ProcessedContent[], verbose: boolean) {
const perf = new PerfTimer()
@@ -19,9 +75,25 @@ export async function emitContent(contentFolder: string, output: string, cfg: Qu
return pathToPage
}
+ // initialize from plugins
const staticResources = getStaticResourcesFromPlugins(cfg.plugins)
- emitComponentResources(cfg.configuration, staticResources, cfg.plugins, emit)
+ // component specific scripts and styles
+ const componentResources = getComponentResources(cfg.plugins)
+ // important that this goes *after* component scripts
+ // as the "nav" event gets triggered here and we should make sure
+ // that everyone else had the chance to register a listener for it
+ addGlobalPageResources(cfg.configuration, staticResources, componentResources)
+
+ // emit in one go
+ const emittedResources = await emitComponentResources(cfg.configuration, componentResources, emit)
+ if (verbose) {
+ for (const file of emittedResources) {
+ console.log(`[emit:Resources] ${file}`)
+ }
+ }
+
+ // emitter plugins
let emittedFiles = 0
for (const emitter of cfg.plugins.emitters) {
try {
diff --git a/quartz/resources.tsx b/quartz/resources.tsx
index 78ae10b6d..37807518a 100644
--- a/quartz/resources.tsx
+++ b/quartz/resources.tsx
@@ -3,7 +3,8 @@ import { JSX } from "preact/jsx-runtime"
export type JSResource = {
loadTime: 'beforeDOMReady' | 'afterDOMReady'
- moduleType?: 'module'
+ moduleType?: 'module',
+ spaPreserve?: boolean
} & ({
src: string
contentType: 'external'
@@ -14,11 +15,12 @@ export type JSResource = {
export function JSResourceToScriptElement(resource: JSResource, preserve?: boolean): JSX.Element {
const scriptType = resource.moduleType ?? 'application/javascript'
+ const spaPreserve = preserve ?? resource.spaPreserve
if (resource.contentType === 'external') {
- return
+ return
} else {
const content = resource.script
- return
+ return
}
}
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 45e6370c4..db0299bee 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -11,6 +11,9 @@ body {
box-sizing: border-box;
background-color: var(--light);
font-family: var(--bodyFont);
+ --pageWidth: 800px;
+ --sidePanelWidth: 400px;
+ --topSpacing: 6rem;
}
.text-highlight {
@@ -27,7 +30,7 @@ p, ul, text, a, tr, td, li, ol, ul, .katex {
a {
font-weight: 600;
text-decoration: none;
- transition: all 0.2s ease;
+ transition: color 0.2s ease;
color: var(--secondary);
&:hover {
@@ -43,34 +46,48 @@ a {
}
.page {
- margin: 6rem 35vw 6rem 20vw;
- max-width: 1000px;
- position: relative;
+ & > .page-header {
+ max-width: var(--pageWidth);
+ margin: var(--topSpacing) auto 0 auto;
+ }
- & .left, & .right {
- position: fixed;
- height: 100vh;
- overflow-y: scroll;
- box-sizing: border-box;
+ & > #quartz-body {
+ width: 100%;
display: flex;
- flex-direction: column;
- top: 0;
- gap: 2rem;
- padding: 6rem;
- }
-
- & .left {
- left: 0;
- padding-left: 10vw;
- width: 20vw;
- }
- & .right {
- right: 0;
- padding-right: 10vw;
- width: 35vw;
- }
+ & .left, & .right {
+ flex: 1;
+ width: calc(calc(100vw - var(--pageWidth)) / 2);
+ }
+ & .left-inner, & .right-inner {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ top: 0;
+ width: var(--sidePanelWidth);
+ margin-top: calc(var(--topSpacing));
+ box-sizing: border-box;
+ padding: 0 4rem;
+ position: fixed;
+ }
+
+ & .left-inner {
+ left: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth));
+ }
+
+ & .right-inner {
+ right: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth));
+ }
+
+ & .center {
+ width: var(--pageWidth);
+ margin: 0 auto;
+ }
+ }
+}
+
+.page {
@media all and (max-width: 1200px) {
margin: 25px 5vw;
& .left, & .right {
@@ -89,9 +106,26 @@ a {
& > h1 {
font-size: 2rem;
}
+
+ // darkmode diagrams
+ & svg {
+ stroke: var(--dark);
+ }
+
+ & ul:has(input[type='checkbox']) {
+ list-style-type: none;
+ padding-left: 0;
+ }
}
}
+input[type="checkbox"] {
+ transform: translateY(2px);
+ color: var(--secondary);
+ border-color: var(--lightgray);
+ background-color: var(--light);
+}
+
blockquote {
margin: 1rem 0;
border-left: 3px solid var(--secondary);
@@ -120,7 +154,7 @@ thead {
}
h1, h2, h3, h4, h5, h6 {
- &[id] > a {
+ &[id] > a[href^="#"] {
margin: 0 0.5rem;
opacity: 0;
transition: opacity 0.2s ease;