From c5d97db0003b239abaf456f4152ab3864bca4424 Mon Sep 17 00:00:00 2001
From: Aaron Pham <contact@aarnphm.xyz>
Date: Sat, 12 Oct 2024 18:33:07 -0400
Subject: [PATCH 1/7] fix(toc): invalid desktop-only styling (#1502)

* fix(toc): invalid desktop-only styling

should display none instead.

* Update toc.scss
---
 quartz/components/styles/toc.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 3b2b6b32a..5c5f5b830 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -1,8 +1,8 @@
 .toc {
   display: flex;
   flex-direction: column;
+
   &.desktop-only {
-    display: flex;
     max-height: 40%;
   }
 }

From 3d0ba320708420e53f090642aae23d29d5a502be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Sp=C3=A4ti?= <simon@ssp.sh>
Date: Sun, 13 Oct 2024 19:42:29 +0200
Subject: [PATCH 2/7] docs: Update Name and URL of Simon's SB and adding DE
 Vault (#1507)

---
 docs/showcase.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/showcase.md b/docs/showcase.md
index c33b2aa5f..0cdf39dae 100644
--- a/docs/showcase.md
+++ b/docs/showcase.md
@@ -20,8 +20,9 @@ Want to see what Quartz can do? Here are some cool community gardens:
 - [Sideny's 3D Artist's Handbook](https://sidney-eliot.github.io/3d-artists-handbook/)
 - [Brandon Boswell's Garden](https://brandonkboswell.com)
 - [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
+- [Simon's Second Brain: Crafted, Curated, Connected, Compounded](https://brain.ssp.sh/)
+- [Data Engineering Vault: A Second Brain Knowledge Network](https://vault.ssp.sh/)
 - [Data Dictionary 🧠](https://glossary.airbyte.com/)
-- [sspaeti.com's Second Brain](https://brain.sspaeti.com/)
 - [🪴Aster's notebook](https://notes.asterhu.com)
 - [Gatekeeper Wiki](https://www.gatekeeper.wiki)
 - [Ellie's Notes](https://ellie.wtf)

From 1dc208356abdcf8d3c0e826fd2184624298dd771 Mon Sep 17 00:00:00 2001
From: Sohum <31165513+ssmendon@users.noreply.github.com>
Date: Sun, 13 Oct 2024 10:46:51 -0700
Subject: [PATCH 3/7] fix(cli): use shell on win32 for `update` (#1503) (#1504)

If there is no `npm.exe` on the system, but
instead an `npm.cmd`, then node won't find
the `npm` executable when calling `spawnSync`.

This occurs frequently when using node package
managers on Windows.

See the node documentation for `.bat` and `.cmd`
files here.

<https://nodejs.org/api/child_process.html#spawning-bat-and-cmd-files-on-windows>.
---
 quartz/cli/handlers.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/quartz/cli/handlers.js b/quartz/cli/handlers.js
index 12e7e8ec9..ed1c0e21c 100644
--- a/quartz/cli/handlers.js
+++ b/quartz/cli/handlers.js
@@ -457,7 +457,25 @@ export async function handleUpdate(argv) {
 
   await popContentFolder(contentFolder)
   console.log("Ensuring dependencies are up to date")
-  const res = spawnSync("npm", ["i"], { stdio: "inherit" })
+
+  /*
+  On Windows, if the command `npm` is really `npm.cmd', this call fails
+  as it will be unable to find `npm`. This is often the case on systems
+  where `npm` is installed via a package manager.
+
+  This means `npx quartz update` will not actually update dependencies
+  on Windows, without a manual `npm i` from the caller.
+
+  However, by spawning a shell, we are able to call `npm.cmd`.
+  See: https://nodejs.org/api/child_process.html#spawning-bat-and-cmd-files-on-windows
+  */
+
+  const opts = { stdio: "inherit" }
+  if (process.platform === "win32") {
+    opts.shell = true
+  }
+
+  const res = spawnSync("npm", ["i"], opts)
   if (res.status === 0) {
     console.log(chalk.green("Done!"))
   } else {

From b3a02909ba74fff08cd3675707d1f4d782a24e98 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 15 Oct 2024 09:34:46 -0700
Subject: [PATCH 4/7] fix: make filter checks more strict (closes #1519)

---
 quartz/plugins/filters/draft.ts    | 2 +-
 quartz/plugins/filters/explicit.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/plugins/filters/draft.ts b/quartz/plugins/filters/draft.ts
index 5fd06b965..09a3c3a84 100644
--- a/quartz/plugins/filters/draft.ts
+++ b/quartz/plugins/filters/draft.ts
@@ -3,7 +3,7 @@ import { QuartzFilterPlugin } from "../types"
 export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
   name: "RemoveDrafts",
   shouldPublish(_ctx, [_tree, vfile]) {
-    const draftFlag: boolean = vfile.data?.frontmatter?.draft || false
+    const draftFlag: boolean = vfile.data?.frontmatter?.draft === true
     return !draftFlag
   },
 })
diff --git a/quartz/plugins/filters/explicit.ts b/quartz/plugins/filters/explicit.ts
index 79a46a81c..603b46d6b 100644
--- a/quartz/plugins/filters/explicit.ts
+++ b/quartz/plugins/filters/explicit.ts
@@ -3,6 +3,6 @@ import { QuartzFilterPlugin } from "../types"
 export const ExplicitPublish: QuartzFilterPlugin = () => ({
   name: "ExplicitPublish",
   shouldPublish(_ctx, [_tree, vfile]) {
-    return vfile.data?.frontmatter?.publish ?? false
+    return vfile.data?.frontmatter?.publish === true
   },
 })

From 3aa11357aa34c1a43765f10965b1b2befa145133 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Wed, 16 Oct 2024 23:44:30 +0200
Subject: [PATCH 5/7] fix(toc): regression (#1517)

---
 quartz/components/styles/toc.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 5c5f5b830..4988cd836 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 .toc {
   display: flex;
   flex-direction: column;
@@ -7,6 +9,12 @@
   }
 }
 
+@media all and not ($mobile) {
+  .toc {
+    display: flex;
+  }
+}
+
 button#toc {
   background-color: transparent;
   border: none;

From 67e1beea7052ea515d47b881d4a30fa3ed847b0b Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Fri, 18 Oct 2024 00:30:16 +0200
Subject: [PATCH 6/7] feat(comments): support custom giscus themes (#1526)

Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
Co-authored-by: Aaron Pham <contact@aarnphm.xyz>
---
 docs/features/comments.md                    | 33 +++++++
 quartz/components/Comments.tsx               |  8 ++
 quartz/components/scripts/comments.inline.ts | 28 +++++-
 quartz/static/giscus/dark.css                | 99 ++++++++++++++++++++
 quartz/static/giscus/light.css               | 99 ++++++++++++++++++++
 5 files changed, 265 insertions(+), 2 deletions(-)
 create mode 100644 quartz/static/giscus/dark.css
 create mode 100644 quartz/static/giscus/light.css

diff --git a/docs/features/comments.md b/docs/features/comments.md
index 92ea754b1..1f11effc4 100644
--- a/docs/features/comments.md
+++ b/docs/features/comments.md
@@ -63,6 +63,18 @@ type Options = {
     category: string
     categoryId: string
 
+    // Url to folder with custom themes
+    // defaults to 'https://${cfg.baseUrl}/static/giscus'
+    themeUrl?: string
+
+    // filename for light theme .css file
+    // defaults to 'light'
+    lightTheme?: string
+
+    // filename for dark theme .css file
+    // defaults to 'dark'
+    darkTheme?: string
+
     // how to map pages -> discussions
     // defaults to 'url'
     mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
@@ -81,3 +93,24 @@ type Options = {
   }
 }
 ```
+
+#### Custom CSS theme
+
+Quartz supports custom theme for Giscus. To use a custom CSS theme, place the `.css` file inside the `quartz/static` folder and set the configuration values.
+
+For example, if you have a light theme `light-theme.css`, a dark theme `dark-theme.css`, and your Quartz site is hosted at `https://example.com/`:
+
+```ts
+afterBody: [
+  Component.Comments({
+    provider: 'giscus',
+    options: {
+      // Other options
+
+      themeUrl: "https://example.com/static/giscus", // corresponds to quartz/static/giscus/
+      lightTheme: "light-theme", // corresponds to light-theme.css in quartz/static/giscus/
+      darkTheme: "dark-theme", // corresponds to dark-theme.css quartz/static/giscus/
+    }
+  }),
+],
+```
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index 8e4494026..44331cc90 100644
--- a/quartz/components/Comments.tsx
+++ b/quartz/components/Comments.tsx
@@ -10,6 +10,9 @@ type Options = {
     repoId: string
     category: string
     categoryId: string
+    themeUrl?: string
+    lightTheme?: string
+    darkTheme?: string
     mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
     strict?: boolean
     reactionsEnabled?: boolean
@@ -34,6 +37,11 @@ export default ((opts: Options) => {
         data-strict={boolToStringBool(opts.options.strict ?? true)}
         data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
         data-input-position={opts.options.inputPosition ?? "bottom"}
+        data-light-theme={opts.options.lightTheme ?? "light"}
+        data-dark-theme={opts.options.darkTheme ?? "dark"}
+        data-theme-url={
+          opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
+        }
       ></div>
     )
   }
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
index 4ab29f087..c54230fbe 100644
--- a/quartz/components/scripts/comments.inline.ts
+++ b/quartz/components/scripts/comments.inline.ts
@@ -13,7 +13,7 @@ const changeTheme = (e: CustomEventMap["themechange"]) => {
     {
       giscus: {
         setConfig: {
-          theme: theme,
+          theme: getThemeUrl(getThemeName(theme)),
         },
       },
     },
@@ -21,12 +21,36 @@ const changeTheme = (e: CustomEventMap["themechange"]) => {
   )
 }
 
+const getThemeName = (theme: string) => {
+  if (theme !== "dark" && theme !== "light") {
+    return theme
+  }
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return theme
+  }
+  const darkGiscus = giscusContainer.dataset.darkTheme ?? "dark"
+  const lightGiscus = giscusContainer.dataset.lightTheme ?? "light"
+  return theme === "dark" ? darkGiscus : lightGiscus
+}
+
+const getThemeUrl = (theme: string) => {
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return `https://giscus.app/themes/${theme}.css`
+  }
+  return `${giscusContainer.dataset.themeUrl ?? "https://giscus.app/themes"}/${theme}.css`
+}
+
 type GiscusElement = Omit<HTMLElement, "dataset"> & {
   dataset: DOMStringMap & {
     repo: `${string}/${string}`
     repoId: string
     category: string
     categoryId: string
+    themeUrl: string
+    lightTheme: string
+    darkTheme: string
     mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
     strict: string
     reactionsEnabled: string
@@ -57,7 +81,7 @@ document.addEventListener("nav", () => {
 
   const theme = document.documentElement.getAttribute("saved-theme")
   if (theme) {
-    giscusScript.setAttribute("data-theme", theme)
+    giscusScript.setAttribute("data-theme", getThemeUrl(getThemeName(theme)))
   }
 
   giscusContainer.appendChild(giscusScript)
diff --git a/quartz/static/giscus/dark.css b/quartz/static/giscus/dark.css
new file mode 100644
index 000000000..e98088f4d
--- /dev/null
+++ b/quartz/static/giscus/dark.css
@@ -0,0 +1,99 @@
+/*! MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+
+main {
+  --color-prettylights-syntax-comment: #8b949e;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-italic: #c9d1d9;
+  --color-prettylights-syntax-markup-bold: #c9d1d9;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-btn-text: #d4d4d4; /* --darkgray */
+  --color-btn-bg: #161618; /* --light */
+  --color-btn-border: rgb(240, 246, 252 / 10%); /* --dark */
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: #30363d;
+  --color-btn-hover-border: #8b949e;
+  --color-btn-active-bg: hsl(212deg 12% 18% / 100%);
+  --color-btn-active-border: #6e7681;
+  --color-btn-selected-bg: #161b22;
+  --color-btn-primary-text: #fff;
+  --color-btn-primary-bg: #84a59d; /* --tertiary */
+  --color-btn-primary-border: rgb(240, 246, 252 / 10%); /* --dark */
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #7b97aa; /* --secondary */
+  --color-btn-primary-hover-border: rgb(240, 246, 252 / 10%); /* --dark */
+  --color-btn-primary-selected-bg: #7b97aa; /* --secondary */
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: rgba(33, 32, 32, 0.5);
+  --color-btn-primary-disabled-bg: rgb(35 134 54 / 60%);
+  --color-btn-primary-disabled-border: rgb(240 246 252 / 10%);
+  --color-action-list-item-default-hover-bg: rgb(177 186 196 / 12%);
+  --color-segmented-control-bg: rgb(110 118 129 / 10%);
+  --color-segmented-control-button-bg: #0d1117;
+  --color-segmented-control-button-selected-border: #6e7681;
+  --color-fg-default: #ebebec; /* --dark */
+  --color-fg-muted: #d4d4d4; /* --darkgray */
+  --color-fg-subtle: #d4d4d4; /* --darkgray */
+  --color-canvas-default: #0d1117;
+  --color-canvas-overlay: #161b22;
+  --color-canvas-inset: #010409;
+  --color-canvas-subtle: #161b22;
+  --color-border-default: #30363d;
+  --color-border-muted: #21262d;
+  --color-neutral-muted: rgb(110 118 129 / 40%);
+  --color-accent-fg: #2f81f7;
+  --color-accent-emphasis: #1f6feb;
+  --color-accent-muted: rgb(56 139 253 / 40%);
+  --color-accent-subtle: rgb(56 139 253 / 10%);
+  --color-success-fg: #3fb950;
+  --color-attention-fg: #d29922;
+  --color-attention-muted: rgb(187 128 9 / 40%);
+  --color-attention-subtle: rgb(187 128 9 / 15%);
+  --color-danger-fg: #f85149;
+  --color-danger-muted: rgb(248 81 73 / 40%);
+  --color-danger-subtle: rgb(248 81 73 / 10%);
+  --color-primer-shadow-inset: 0 0 transparent;
+  --color-scale-gray-7: #21262d;
+  --color-scale-blue-8: #0c2d6b;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
+}
+
+main .pagination-loader-container {
+  background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
+}
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}
diff --git a/quartz/static/giscus/light.css b/quartz/static/giscus/light.css
new file mode 100644
index 000000000..84b58c0a7
--- /dev/null
+++ b/quartz/static/giscus/light.css
@@ -0,0 +1,99 @@
+/*! MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+
+main {
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #24292f;
+  --color-prettylights-syntax-markup-bold: #24292f;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-btn-text: #4e4e4e; /* --darkgray */
+  --color-btn-bg: #faf8f8; /* --light */
+  --color-btn-border: rgb(43, 43, 43 / 15%); /* --dark */
+  --color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%);
+  --color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
+  --color-btn-hover-bg: #f3f4f6;
+  --color-btn-hover-border: rgb(43, 43, 43 / 15%); /* --dark */
+  --color-btn-active-bg: hsl(220deg 14% 93% / 100%);
+  --color-btn-active-border: rgb(31 35 40 / 15%);
+  --color-btn-selected-bg: hsl(220deg 14% 94% / 100%);
+  --color-btn-primary-text: #fff;
+  --color-btn-primary-bg: #84a59d; /* --tertiary */
+  --color-btn-primary-border: rgb(43, 43, 43 / 15%); /* --dark */
+  --color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
+  --color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
+  --color-btn-primary-hover-bg: #284b63; /* --secondary */
+  --color-btn-primary-hover-border: rgb(43, 43, 43 / 15%); /* --dark */
+  --color-btn-primary-selected-bg: #284b63; /* --secondary */
+  --color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
+  --color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
+  --color-btn-primary-disabled-bg: #94d3a2;
+  --color-btn-primary-disabled-border: rgb(31 35 40 / 15%);
+  --color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
+  --color-segmented-control-bg: #eaeef2;
+  --color-segmented-control-button-bg: #fff;
+  --color-segmented-control-button-selected-border: #8c959f;
+  --color-fg-default: #2b2b2b; /* --dark */
+  --color-fg-muted: #4e4e4e; /* --darkgray */
+  --color-fg-subtle: #4e4e4e; /* --darkgray */
+  --color-canvas-default: #fff;
+  --color-canvas-overlay: #fff;
+  --color-canvas-inset: #f6f8fa;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsl(210deg 18% 87% / 100%);
+  --color-neutral-muted: rgb(175 184 193 / 20%);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-accent-muted: rgb(84 174 255 / 40%);
+  --color-accent-subtle: #ddf4ff;
+  --color-success-fg: #1a7f37;
+  --color-attention-fg: #9a6700;
+  --color-attention-muted: rgb(212 167 44 / 40%);
+  --color-attention-subtle: #fff8c5;
+  --color-danger-fg: #d1242f;
+  --color-danger-muted: rgb(255 129 130 / 40%);
+  --color-danger-subtle: #ffebe9;
+  --color-primer-shadow-inset: inset 0 1px 0 rgb(208 215 222 / 20%);
+  --color-scale-gray-1: #eaeef2;
+  --color-scale-blue-1: #b6e3ff;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-bg-hover: var(--color-scale-gray-1);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
+}
+
+main .pagination-loader-container {
+  background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
+}
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}

From 9f701e5045c27a0d5733ecbcd67a6fc682921c28 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Fri, 18 Oct 2024 05:50:48 +0200
Subject: [PATCH 7/7] fix(grid): $desktop variable (#1511)

---
 quartz/components/styles/backlinks.scss | 2 +-
 quartz/components/styles/graph.scss     | 2 +-
 quartz/components/styles/search.scss    | 2 +-
 quartz/styles/base.scss                 | 9 +++++----
 quartz/styles/variables.scss            | 2 +-
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
index dc82ce74a..7b3237b8a 100644
--- a/quartz/components/styles/backlinks.scss
+++ b/quartz/components/styles/backlinks.scss
@@ -37,7 +37,7 @@
       display: none;
     }
     height: auto;
-    @media all and ($desktop) {
+    @media all and not ($desktop) {
       height: 250px;
     }
   }
diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
index 1f4aa9710..1b19f132c 100644
--- a/quartz/components/styles/graph.scss
+++ b/quartz/components/styles/graph.scss
@@ -65,7 +65,7 @@
       height: 80vh;
       width: 80vw;
 
-      @media all and ($desktop) {
+      @media all and not ($desktop) {
         width: 90%;
       }
     }
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index b0df6c8b3..080178fbe 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -64,7 +64,7 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and ($desktop) {
+      @media all and not ($desktop) {
         width: 90%;
       }
 
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 61c918f42..34d7e40fa 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -156,7 +156,7 @@ a {
     column-gap: #{map-get($desktopGrid, columnGap)};
     row-gap: #{map-get($desktopGrid, rowGap)};
     grid-template-areas: #{map-get($desktopGrid, templateAreas)};
-    @media all and ($desktop) {
+    @media all and ($tablet) {
       grid-template-columns: #{map-get($tabletGrid, templateColumns)};
       grid-template-rows: #{map-get($tabletGrid, templateRows)};
       column-gap: #{map-get($tabletGrid, columnGap)};
@@ -171,7 +171,7 @@ a {
       grid-template-areas: #{map-get($mobileGrid, templateAreas)};
     }
 
-    @media all and ($desktop) {
+    @media all and not ($desktop) {
       padding: 0 1rem;
     }
     @media all and ($mobile) {
@@ -212,7 +212,7 @@ a {
         margin-left: inherit;
         margin-right: inherit;
       }
-      @media all and ($desktop) {
+      @media all and not ($desktop) {
         position: initial;
         height: unset;
         width: 100%;
@@ -254,10 +254,11 @@ a {
       min-width: 100%;
       margin-left: auto;
       margin-right: auto;
-      @media all and ($desktop) {
+      @media all and ($tablet) {
         margin-right: 0;
       }
       @media all and ($mobile) {
+        margin-right: 0;
         margin-left: 0;
       }
     }
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 9335e5506..4a5cea583 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -12,7 +12,7 @@ $breakpoints: (
 
 $mobile: "(max-width: #{map-get($breakpoints, mobile)})";
 $tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
-$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
+$desktop: "(min-width: #{map-get($breakpoints, desktop)})";
 
 $pageWidth: #{map-get($breakpoints, mobile)};
 $sidePanelWidth: 320px; //380px;