fix(explorer): increase consistency, explicitly use font-family (#496)

Ben Schlegel

2023-09-21 fa69c2a5656254251b74dbd5545bef000f67af2f

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 <j.zhao2k19@gmail.com>

* Update quartz/components/styles/explorer.scss

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

 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.

 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;
    }
  }