diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index d4b48815f..e598d12dd 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -84,69 +84,67 @@ export default ((userOpts?: Partial<Options>) => {
       constructFileTree(allFiles, (fileData.filePath ?? "").replaceAll(" ", "-"))
     }
     return (
-      <div class="explorer-container">
-        <div class={classNames(displayClass, "explorer")}>
-          <button
-            type="button"
-            id="mobile-explorer"
-            class="collapsed"
-            data-behavior={opts.folderClickBehavior}
-            data-collapsed={opts.folderDefaultState}
-            data-savestate={opts.useSavedState}
-            data-tree={jsonTree}
-            data-mobile={true}
-            aria-controls="explorer-content"
-            aria-expanded={false}
+      <div class={classNames(displayClass, "explorer")}>
+        <button
+          type="button"
+          id="mobile-explorer"
+          class="collapsed"
+          data-behavior={opts.folderClickBehavior}
+          data-collapsed={opts.folderDefaultState}
+          data-savestate={opts.useSavedState}
+          data-tree={jsonTree}
+          data-mobile={true}
+          aria-controls="explorer-content"
+          aria-expanded={false}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-menu"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="lucide lucide-menu"
-            >
-              <line x1="4" x2="20" y1="12" y2="12" />
-              <line x1="4" x2="20" y1="6" y2="6" />
-              <line x1="4" x2="20" y1="18" y2="18" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            id="desktop-explorer"
-            class="title-button"
-            data-behavior={opts.folderClickBehavior}
-            data-collapsed={opts.folderDefaultState}
-            data-savestate={opts.useSavedState}
-            data-tree={jsonTree}
-            data-mobile={false}
-            aria-controls="explorer-content"
-            aria-expanded={true}
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          id="desktop-explorer"
+          class="title-button"
+          data-behavior={opts.folderClickBehavior}
+          data-collapsed={opts.folderDefaultState}
+          data-savestate={opts.useSavedState}
+          data-tree={jsonTree}
+          data-mobile={false}
+          aria-controls="explorer-content"
+          aria-expanded={true}
+        >
+          <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="5 8 14 8"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="fold"
           >
-            <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
-              viewBox="5 8 14 8"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="fold"
-            >
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-          </button>
-          <div id="explorer-content">
-            <ul class="overflow" id="explorer-ul">
-              <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
-              <li id="explorer-end" />
-            </ul>
-          </div>
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+        <div id="explorer-content">
+          <ul class="overflow" id="explorer-ul">
+            <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
+            <li id="explorer-end" />
+          </ul>
         </div>
       </div>
     )
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 769cb06c7..322818afd 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,277 +1,287 @@
 @use "../../styles/variables.scss" as *;
 
-.explorer-container {
-  overflow-y: hidden;
+.explorer {
   @media all and ($mobile) {
     order: -1;
+    height: initial;
+    overflow: hidden;
   }
 
-  .explorer {
+  display: flex;
+
+  button#mobile-explorer {
+    display: none;
+  }
+
+  button#desktop-explorer {
     display: flex;
+  }
+
+  @media all and ($mobile) {
     button#mobile-explorer {
-      display: none;
-    }
-    button#desktop-explorer {
       display: flex;
     }
-    @media all and ($mobile) {
-      button#mobile-explorer {
-        display: flex;
-      }
-      button#desktop-explorer {
-        display: none;
-      }
+
+    button#desktop-explorer {
+      display: none;
     }
-    height: 100%;
-    flex-direction: column;
-    overflow-y: hidden;
-    &.desktop-only {
-      @media all and not ($mobile) {
-        display: flex;
-      }
-    }
-    /*&:after {
-    pointer-events: none;
-    content: "";
-    width: 100%;
-    height: 50px;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    opacity: 1;
-    transition: opacity 0.3s ease;
-    background: linear-gradient(transparent 0px, var(--light));
-  }*/
   }
 
-  button#mobile-explorer,
-  button#desktop-explorer {
+  height: 100%;
+  flex-direction: column;
+  overflow-y: hidden;
+
+  &.desktop-only {
+    @media all and not ($mobile) {
+      display: flex;
+    }
+  }
+
+  /*&:after {
+  pointer-events: none;
+  content: "";
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+  background: linear-gradient(transparent 0px, var(--light));
+}*/
+}
+
+button#mobile-explorer,
+button#desktop-explorer {
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  color: var(--dark);
+  display: flex;
+  align-items: center;
+
+  & h2 {
+    font-size: 1rem;
+    display: inline-block;
+    margin: 0;
+  }
+
+  & .fold {
+    margin-left: 0.5rem;
+    transition: transform 0.3s ease;
+    opacity: 0.8;
+  }
+
+  &.collapsed .fold {
+    transform: rotateZ(-90deg);
+  }
+}
+
+.folder-outer {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-in-out;
+}
+
+.folder-outer.open {
+  grid-template-rows: 1fr;
+}
+
+.folder-outer > ul {
+  overflow: hidden;
+}
+
+#explorer-content {
+  list-style: none;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 0px;
+  transition:
+    max-height 0.35s ease,
+    visibility 0s linear 0.35s;
+  margin-top: 0.5rem;
+  visibility: hidden;
+
+  &.collapsed {
+    max-height: 100%;
+    transition:
+      max-height 0.35s ease,
+      visibility 0s linear 0s;
+    visibility: visible;
+  }
+
+  & ul {
+    list-style: none;
+    margin: 0.08rem 0;
+    padding: 0;
+    transition:
+      max-height 0.35s ease,
+      transform 0.35s ease,
+      opacity 0.2s ease;
+
+    & li > a {
+      color: var(--dark);
+      opacity: 0.75;
+      pointer-events: all;
+    }
+  }
+
+  > #explorer-ul {
+    max-height: none;
+  }
+}
+
+svg {
+  pointer-events: all;
+
+  & > polyline {
+    pointer-events: none;
+  }
+}
+
+.folder-container {
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  user-select: none;
+
+  & div > a {
+    color: var(--secondary);
+    font-family: var(--headerFont);
+    font-size: 0.95rem;
+    font-weight: $semiBoldWeight;
+    line-height: 1.5rem;
+    display: inline-block;
+  }
+
+  & div > a:hover {
+    color: var(--tertiary);
+  }
+
+  & div > button {
+    color: var(--dark);
     background-color: transparent;
     border: none;
     text-align: left;
     cursor: pointer;
-    padding: 0;
-    color: var(--dark);
+    padding-left: 0;
+    padding-right: 0;
     display: flex;
     align-items: center;
+    font-family: var(--headerFont);
 
-    & h2 {
-      font-size: 1rem;
+    & span {
+      font-size: 0.95rem;
       display: inline-block;
+      color: var(--secondary);
+      font-weight: $semiBoldWeight;
       margin: 0;
-    }
-
-    & .fold {
-      margin-left: 0.5rem;
-      transition: transform 0.3s ease;
-      opacity: 0.8;
-    }
-
-    &.collapsed .fold {
-      transform: rotateZ(-90deg);
-    }
-  }
-
-  .folder-outer {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows 0.3s ease-in-out;
-  }
-
-  .folder-outer.open {
-    grid-template-rows: 1fr;
-  }
-
-  .folder-outer > ul {
-    overflow: hidden;
-  }
-
-  #explorer-content {
-    list-style: none;
-    overflow: hidden;
-    overflow-y: auto;
-    max-height: 0px;
-    transition:
-      max-height 0.35s ease,
-      visibility 0s linear 0.35s;
-    margin-top: 0.5rem;
-    visibility: hidden;
-
-    &.collapsed {
-      max-height: 100%;
-      transition:
-        max-height 0.35s ease,
-        visibility 0s linear 0s;
-      visibility: visible;
-    }
-
-    & ul {
-      list-style: none;
-      margin: 0.08rem 0;
-      padding: 0;
-      transition:
-        max-height 0.35s ease,
-        transform 0.35s ease,
-        opacity 0.2s ease;
-      & li > a {
-        color: var(--dark);
-        opacity: 0.75;
-        pointer-events: all;
-      }
-    }
-    > #explorer-ul {
-      max-height: none;
-    }
-  }
-
-  svg {
-    pointer-events: all;
-
-    & > polyline {
+      line-height: 1.5rem;
       pointer-events: none;
     }
   }
+}
 
-  .folder-container {
-    flex-direction: row;
-    display: flex;
-    align-items: center;
-    user-select: none;
+.folder-icon {
+  margin-right: 5px;
+  color: var(--secondary);
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  backface-visibility: visible;
+}
 
-    & div > a {
-      color: var(--secondary);
-      font-family: var(--headerFont);
-      font-size: 0.95rem;
-      font-weight: $semiBoldWeight;
-      line-height: 1.5rem;
-      display: inline-block;
-    }
+li:has(> .folder-outer:not(.open)) > .folder-container > svg {
+  transform: rotate(-90deg);
+}
 
-    & div > a:hover {
-      color: var(--tertiary);
-    }
+.folder-icon:hover {
+  color: var(--tertiary);
+}
 
-    & div > button {
-      color: var(--dark);
-      background-color: transparent;
-      border: none;
-      text-align: left;
-      cursor: pointer;
-      padding-left: 0;
-      padding-right: 0;
-      display: flex;
-      align-items: center;
-      font-family: var(--headerFont);
+.no-background::after {
+  background: none !important;
+}
 
-      & span {
-        font-size: 0.95rem;
-        display: inline-block;
-        color: var(--secondary);
-        font-weight: $semiBoldWeight;
-        margin: 0;
-        line-height: 1.5rem;
-        pointer-events: none;
+#explorer-end {
+  // needs height so IntersectionObserver gets triggered
+  height: 4px;
+  // remove default margin from li
+  margin: 0;
+}
+
+.explorer {
+  @media all and ($mobile) {
+    #explorer-content {
+      box-sizing: border-box;
+      overscroll-behavior: none;
+      z-index: 100;
+      position: absolute;
+      background-color: var(--light);
+      max-width: 100dvw;
+      left: -100dvw;
+      width: 100%;
+      transition: all 300ms ease-in-out;
+      overflow: hidden;
+      padding: 2rem 2rem 4rem;
+      height: calc(100dvh - 4rem);
+      max-height: calc(100dvh - 4rem);
+      margin-top: 2rem;
+      visibility: visible;
+
+      &:not(.collapsed) {
+        left: 0;
       }
-    }
-  }
 
-  .folder-icon {
-    margin-right: 5px;
-    color: var(--secondary);
-    cursor: pointer;
-    transition: transform 0.3s ease;
-    backface-visibility: visible;
-  }
+      ul.overflow {
+        max-height: 100%;
+        width: 100%;
+      }
 
-  li:has(> .folder-outer:not(.open)) > .folder-container > svg {
-    transform: rotate(-90deg);
-  }
-
-  .folder-icon:hover {
-    color: var(--tertiary);
-  }
-
-  .no-background::after {
-    background: none !important;
-  }
-
-  #explorer-end {
-    // needs height so IntersectionObserver gets triggered
-    height: 4px;
-    // remove default margin from li
-    margin: 0;
-  }
-
-  .explorer {
-    @media all and ($mobile) {
-      #explorer-content {
-        box-sizing: border-box;
-        overscroll-behavior: none;
-        z-index: 100;
-        position: absolute;
-        background-color: var(--light);
-        max-width: 100dvw;
+      &.collapsed {
         left: -100dvw;
-        width: 100dvw;
-        transition: all 300ms ease-in-out;
-        overflow: hidden;
-        padding: 2rem 2rem 4rem;
-        height: calc(100dvh - 4rem);
-        max-height: calc(100dvh - 4rem);
-        margin-top: 2rem;
         visibility: visible;
+      }
+    }
 
-        &:not(.collapsed) {
-          //height: 100dvh;
-          left: 0;
-        }
+    #mobile-explorer {
+      margin: 5px;
 
-        ul.overflow {
-          max-height: 100%;
-          width: 100%;
-        }
-
-        &.collapsed {
-          //height: 0;
-          left: -100dvw;
-          visibility: visible;
-        }
+      &:not(.collapsed) .lucide-menu {
+        transform: rotate(-90deg);
+        transition: transform 200ms ease-in-out;
       }
 
-      #mobile-explorer {
-        margin: 5px;
-        &:not(.collapsed) .lucide-menu {
-          transform: rotate(90deg);
-          transition: transform 200ms ease-in-out;
-        }
-        .lucide-menu {
-          stroke: var(--darkgray);
-          transition: transform 200ms ease;
-          &:hover {
-            stroke: var(--dark);
-          }
+      .lucide-menu {
+        stroke: var(--darkgray);
+        transition: transform 200ms ease;
+
+        &:hover {
+          stroke: var(--dark);
         }
       }
     }
   }
+}
 
+.no-scroll {
+  opacity: 0;
+  overflow: hidden;
+}
+
+html:has(.no-scroll) {
+  overflow: hidden;
+}
+
+@media all and not ($mobile) {
   .no-scroll {
-    opacity: 0;
-    overflow: hidden;
+    opacity: 1 !important;
+    overflow: auto !important;
   }
 
   html:has(.no-scroll) {
-    overflow: hidden;
-  }
-
-  @media all and not ($mobile) {
-    .no-scroll {
-      opacity: 1 !important;
-      overflow: auto !important;
-    }
-    html:has(.no-scroll) {
-      overflow: auto !important;
-    }
+    overflow: auto !important;
   }
 }
 
@@ -279,6 +289,7 @@
 .lock-scroll {
   position: static;
 }
+
 @media all and ($mobile) {
   .lock-scroll {
     position: fixed;