From fef233094543ebd1e3bc52b1536006b8eca635c9 Mon Sep 17 00:00:00 2001 From: ajspig Date: Thu, 11 Dec 2025 15:09:14 -0500 Subject: [PATCH 1/2] fix: menu order, bullet points and hover --- quartz.layout.ts | 64 ++++++++++---------------- quartz/components/styles/explorer.scss | 13 ++++++ 2 files changed, 37 insertions(+), 40 deletions(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index f46fad883..649bce5d8 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -51,32 +51,24 @@ export const defaultContentPageLayout: PageLayout = { }), Component.Explorer({ sortFn: (a, b) => { - // Sort folders first, then files by date (newest first) + const folderOrder = ["blog", "notes", "research", "careers", "archive"] + if (a.isFolder && b.isFolder) { - // Both folders: alphabetical - return a.displayName.localeCompare(b.displayName, undefined, { - numeric: true, - sensitivity: "base", - }) + const aIndex = folderOrder.indexOf(a.displayName.toLowerCase()) + const bIndex = folderOrder.indexOf(b.displayName.toLowerCase()) + if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex + if (aIndex !== -1) return -1 + if (bIndex !== -1) return 1 + return a.displayName.localeCompare(b.displayName) } - if (a.isFolder) return -1 // Folders before files - if (b.isFolder) return 1 // Folders before files + if (a.isFolder) return -1 + if (b.isFolder) return 1 - // Both files: sort by date descending (newest first) - // Note: dates come from JSON as strings, need to convert to Date objects + // Files: sort by date (newest first) const aDate = a.data?.date ? new Date(a.data.date).getTime() : 0 const bDate = b.data?.date ? new Date(b.data.date).getTime() : 0 - - if (aDate !== bDate) { - return bDate - aDate // Descending order (newest first) - } - - // Same date or no dates: alphabetical fallback - return a.displayName.localeCompare(b.displayName, undefined, { - numeric: true, - sensitivity: "base", - }) + return bDate - aDate || a.displayName.localeCompare(b.displayName) }, }), ], @@ -121,32 +113,24 @@ export const defaultListPageLayout: PageLayout = { }), Component.Explorer({ sortFn: (a, b) => { - // Sort folders first, then files by date (newest first) + const folderOrder = ["blog", "notes", "research", "careers", "archive"] + if (a.isFolder && b.isFolder) { - // Both folders: alphabetical - return a.displayName.localeCompare(b.displayName, undefined, { - numeric: true, - sensitivity: "base", - }) + const aIndex = folderOrder.indexOf(a.displayName.toLowerCase()) + const bIndex = folderOrder.indexOf(b.displayName.toLowerCase()) + if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex + if (aIndex !== -1) return -1 + if (bIndex !== -1) return 1 + return a.displayName.localeCompare(b.displayName) } - if (a.isFolder) return -1 // Folders before files - if (b.isFolder) return 1 // Folders before files + if (a.isFolder) return -1 + if (b.isFolder) return 1 - // Both files: sort by date descending (newest first) - // Note: dates come from JSON as strings, need to convert to Date objects + // Files: sort by date (newest first) const aDate = a.data?.date ? new Date(a.data.date).getTime() : 0 const bDate = b.data?.date ? new Date(b.data.date).getTime() : 0 - - if (aDate !== bDate) { - return bDate - aDate // Descending order (newest first) - } - - // Same date or no dates: alphabetical fallback - return a.displayName.localeCompare(b.displayName, undefined, { - numeric: true, - sensitivity: "base", - }) + return bDate - aDate || a.displayName.localeCompare(b.displayName) }, }), ], diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 8d9410044..5b0db6057 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -124,6 +124,12 @@ button.desktop-explorer { color: var(--dark); opacity: 0.75; pointer-events: all; + transition: color 0.15s ease, opacity 0.15s ease; + + &:hover { + opacity: 1; + color: var(--tertiary); + } &.active { opacity: 1; @@ -132,6 +138,13 @@ button.desktop-explorer { } } + // Add bullet points to file items (articles) inside folders + .folder-outer > ul > li:not(:has(.folder-container)) > a::before { + content: "•"; + margin-right: 6px; + color: var(--gray); + } + .folder-outer { display: grid; grid-template-rows: 0fr; From 66d18f9fd71d42e7067a1c6fecd1ca2b9a1974ba Mon Sep 17 00:00:00 2001 From: ajspig Date: Thu, 11 Dec 2025 15:40:19 -0500 Subject: [PATCH 2/2] fix: making font size 10% smaller. --- quartz/styles/base.scss | 16 ++++++++-------- quartz/styles/custom.scss | 14 +++++++------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 0989b4f2b..ff1a5f0c8 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -156,7 +156,7 @@ a { margin: 0 auto; & article { & > h1 { - font-size: 2rem; + font-size: 1.8rem; } & li:has(> input[type="checkbox"]) { @@ -389,19 +389,19 @@ h6 { // typography improvements h1 { - font-size: 1.75rem; + font-size: 1.58rem; margin-top: 2.25rem; margin-bottom: 1rem; } h2 { - font-size: 1.4rem; + font-size: 1.26rem; margin-top: 1.9rem; margin-bottom: 1rem; } h3 { - font-size: 1.12rem; + font-size: 1.01rem; margin-top: 1.62rem; margin-bottom: 1rem; } @@ -409,7 +409,7 @@ h3 { h4, h5, h6 { - font-size: 1rem; + font-size: 0.9rem; margin-top: 1.5rem; margin-bottom: 1rem; } @@ -422,7 +422,7 @@ figure[data-rehype-pretty-code-figure] { & > [data-rehype-pretty-code-title] { font-family: var(--codeFont); - font-size: 0.9rem; + font-size: 0.81rem; padding: 0.1rem 0.5rem; border: 1px solid var(--lightgray); width: fit-content; @@ -451,7 +451,7 @@ pre { & > code { background: none; padding: 0; - font-size: 0.85rem; + font-size: 0.77rem; counter-reset: line; counter-increment: line 0; display: grid; @@ -506,7 +506,7 @@ code { tbody, li, p { - line-height: 1.6rem; + line-height: 1.44rem; } .table-container { diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index aac040aef..05efd1929 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -71,27 +71,27 @@ iframe { /* } */ .explorer { - font-size: 0.85rem; - + font-size: 0.77rem; + .folder, .file { a { - font-size: 0.85rem; + font-size: 0.77rem; font-weight: 200 !important; } } } .toc { - font-size: 0.85rem; - + font-size: 0.77rem; + a { - font-size: 0.85rem; + font-size: 0.77rem; font-weight: 600 !important; } } body { - font-size: 0.95rem; + font-size: 0.86rem; } input[type="search"] {