From fa69c2a5656254251b74dbd5545bef000f67af2f Mon Sep 17 00:00:00 2001 From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com> Date: Thu, 21 Sep 2023 19:35:11 +0200 Subject: [PATCH] fix(explorer): increase consistency, explicitly use font-family (#496) * fix(explorer): display name for folders without `index` file * docs(explorer): add section for folder display names * docs(explorer): fix broken wikilink * fix(consistency): explicitly set font + label/link fix Use consistent styling between folders with `folderClickBehavior: "link"` and `"collapse` * Update quartz/components/styles/explorer.scss Co-authored-by: Jacky Zhao * Update quartz/components/styles/explorer.scss Co-authored-by: Jacky Zhao --------- Co-authored-by: Jacky Zhao --- docs/features/explorer.md | 2 +- quartz/components/styles/explorer.scss | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/features/explorer.md b/docs/features/explorer.md index 4568ec01..91766a99 100644 --- a/docs/features/explorer.md +++ b/docs/features/explorer.md @@ -8,7 +8,7 @@ Quartz features an explorer that allows you to navigate all files and folders on By default, it shows all folders and files on your page. To display the explorer in a different spot, you can edit the [[layout]]. -Display names for folders get determined by the `title` frontmatter field in `folder/index.md` (more detail in [[Authoring Content]]). If this file does not exist or does not contain frontmatter, the local folder name will be used instead. +Display names for folders get determined by the `title` frontmatter field in `folder/index.md` (more detail in [[authoring content | Authoring Content]]). If this file does not exist or does not contain frontmatter, the local folder name will be used instead. > [!info] > The explorer uses local storage by default to save the state of your explorer. This is done to ensure a smooth experience when navigating to different pages. diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 955c269a..28e9f9bb 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -81,16 +81,17 @@ svg { align-items: center; user-select: none; - & li > a { - // other selector is more specific, needs important - color: var(--secondary) !important; - opacity: 1 !important; - font-size: 1.05rem !important; + & div > a { + color: var(--secondary); + font-family: var(--headerFont); + font-size: 0.95rem; + font-weight: 600; + line-height: 1.5rem; + display: inline-block; } - & li > a:hover { - // other selector is more specific, needs important - color: var(--tertiary) !important; + & div > a:hover { + color: var(--tertiary); } & div > button { @@ -103,6 +104,7 @@ svg { padding-right: 0; display: flex; align-items: center; + font-family: var(--headerFont); & p { font-size: 0.95rem; @@ -111,7 +113,6 @@ svg { font-weight: 600; margin: 0; line-height: 1.5rem; - font-weight: bold; pointer-events: none; } }