From ef72f1bf707dca363cdab84da91e2acfaef8f276 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Mon, 30 Dec 2024 16:03:57 +0000
Subject: [PATCH] Fix ObsidianFlavoredMarkdown source link (#1694)

---
 quartz/components/styles/explorer.scss |   86 +++++++++++++++++++++++++++++++++---------
 1 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 4b25a55..397fd02 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,3 +1,28 @@
+@use "../../styles/variables.scss" as *;
+
+.explorer {
+  display: flex;
+  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#explorer {
   background-color: transparent;
   border: none;
@@ -8,7 +33,7 @@
   display: flex;
   align-items: center;
 
-  & h3 {
+  & h2 {
     font-size: 1rem;
     display: inline-block;
     margin: 0;
@@ -42,12 +67,20 @@
 #explorer-content {
   list-style: none;
   overflow: hidden;
-  max-height: none;
-  transition: max-height 0.35s ease;
+  overflow-y: auto;
+  max-height: 100%;
+  transition:
+    max-height 0.35s ease,
+    visibility 0s linear 0s;
   margin-top: 0.5rem;
+  visibility: visible;
 
-  &.collapsed > .overflow::after {
-    opacity: 0;
+  &.collapsed {
+    max-height: 0;
+    transition:
+      max-height 0.35s ease,
+      visibility 0s linear 0.35s;
+    visibility: hidden;
   }
 
   & ul {
@@ -58,12 +91,15 @@
       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;
     }
   }
+  > #explorer-ul {
+    max-height: none;
+  }
 }
 
 svg {
@@ -80,19 +116,20 @@
   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: $semiBoldWeight;
+    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);
   }
 
-  & li > button {
+  & div > button {
     color: var(--dark);
     background-color: transparent;
     border: none;
@@ -102,15 +139,15 @@
     padding-right: 0;
     display: flex;
     align-items: center;
+    font-family: var(--headerFont);
 
-    & h3 {
+    & span {
       font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);
-      font-weight: 600;
+      font-weight: $semiBoldWeight;
       margin: 0;
       line-height: 1.5rem;
-      font-weight: bold;
       pointer-events: none;
     }
   }
@@ -124,10 +161,21 @@
   backface-visibility: visible;
 }
 
-div:has(> .folder-outer:not(.open)) > .folder-container > svg {
+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;
+}

--
Gitblit v1.10.0