feat(explorer): improve accessibility and consistency (+ bug fix) (#488)

Ben Schlegel

2023-09-20 b029eeadabe0877df6ec11443c68743f1494bc40

 quartz/components/styles/explorer.scss

@@ -1,4 +1,5 @@
button#explorer {
  all: unset;
  background-color: transparent;
  border: none;
  text-align: left;
@@ -8,7 +9,7 @@
  display: flex;
  align-items: center;

  & h3 {
  & h1 {
    font-size: 1rem;
    display: inline-block;
    margin: 0;
@@ -58,7 +59,7 @@
      max-height 0.35s ease,
      transform 0.35s ease,
      opacity 0.2s ease;
    & div > li > a {
    & li > a {
      color: var(--dark);
      opacity: 0.75;
      pointer-events: all;
@@ -92,7 +93,7 @@
    color: var(--tertiary) !important;
  }

  & li > button {
  & div > button {
    color: var(--dark);
    background-color: transparent;
    border: none;
@@ -103,7 +104,7 @@
    display: flex;
    align-items: center;

    & h3 {
    & p {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);
@@ -138,5 +139,7 @@

#explorer-end {
  // needs height so IntersectionObserver gets triggered
  height: 1px;
  height: 4px;
  // remove default margin from li
  margin: 0;
}