fix(explorer): increase consistency, explicitly use font-family (jack…

…yzha0#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 <[email protected]> * Update quartz/components/styles/explorer.scss Co-authored-by: Jacky Zhao <[email protected]> --------- Co-authored-by: Jacky Zhao <[email protected]>
omgandhi · Sep 21, 2023 · fa69c2a · fa69c2a
1 parent 8eb1554
commit fa69c2a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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;
     }
   }