From fa69c2a5656254251b74dbd5545bef000f67af2f Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Thu, 21 Sep 2023 17:35:11 +0000
Subject: [PATCH] fix(explorer): increase consistency, explicitly use font-family (#496)
---
quartz/components/styles/explorer.scss | 19 ++++++++++---------
docs/features/explorer.md | 2 +-
2 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index 4568ec0..91766a9 100644
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -8,7 +8,7 @@
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 955c269..28e9f9b 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -81,16 +81,17 @@
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 @@
padding-right: 0;
display: flex;
align-items: center;
+ font-family: var(--headerFont);
& p {
font-size: 0.95rem;
@@ -111,7 +113,6 @@
font-weight: 600;
margin: 0;
line-height: 1.5rem;
- font-weight: bold;
pointer-events: none;
}
}
--
Gitblit v1.10.0