revert to working

quartz/styles/base.scss

@@ -1,6 +1,7 @@
 @use "variables" as *;
 @use "syntax";
 @use "callouts";
+// @use "explorer";
 
 * {
   scrollbar-width: thin;
@@ -31,8 +32,8 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 75%, transparent);
-  color: var(--darkgray);
+  background: color-mix(in srgb, var(--tertiary) 25%, transparent); // 75%
+  // color: var(--darkgray);
 }
 
 p,
@@ -60,16 +61,13 @@ ul,
 
 a {
   font-weight: 600;
-  text-decoration: underline 0.2rem transparent; // none
+  text-decoration: none;
+  // transition: color 0.5s ease; // 0.2s
   color: var(--secondary);
-  // transition: color 0.2s ease;
-  transition: text-decoration-color 0.5s ease-in-out;
 
-  &:hover {
-    // color: var(--tertiary) !important;
-    text-decoration-color: var(--tertiary);
-    // text-underline-offset: 0.4em;
-  }
+  // &:hover {
+  //   color: var(--tertiary) !important;
+  // }
 
   &.internal:not(:has(> img)) {
     text-decoration: none;
@@ -163,7 +161,7 @@ a {
         align-items: center;
       }
     }
-
+    
     & .sidebar.right {
       right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
       @media all and (max-width: $fullPageWidth) {
@@ -469,7 +467,7 @@ video {
 ul.overflow,
 ol.overflow {
   max-height: 450; // 400
-  overflow-y: auto;
+  overflow-y: auto; // auto, scroll
 
   // clearfix
   content: "";
@@ -489,7 +487,7 @@ ol.overflow {
     bottom: 0;
     opacity: 1;
     // Removes opacity fade
-    transition: opacity 0.3s ease;
+    // transition: opacity 0.3s ease;
     // background: linear-gradient(transparent 0px, var(--light));
   }
 }

quartz/styles/custom.scss

@@ -1,15 +1,44 @@
-// @use "./base.scss";
+@use "./base.scss";
 
-// Explorer
-div[data-folderpath="/Archive"] p[class="folder-title"]::before {
-  content: "📚 ";
+// put your custom CSS here!
+
+// a {
+//   display: inline-block;
+//   position: relative;
+//   // color: #0087ca;
+// }
+
+// a::after {
+//   content: '';
+//   position: absolute;
+//   width: 100%;
+//   transform: scaleX(0);
+//   height: 2px;
+//   bottom: 0;
+//   left: 0;
+//   background-color: #0087ca;
+//   transform-origin: bottom right;
+//   transition: transform 0.25s ease-out;
+// }
+
+// a:hover::after {
+//   transform: scaleX(1);
+//   transform-origin: bottom left;
+// }
+
+// a.article-title {
+  
+// }
+
+a {
+  // text-decoration: underline 0.15em rgba(0, 0, 0, 1);
+  // text-underline-offset: 0.2em;
+  // transition: text-decoration-color 0.3s, text-underline-offset 0.3s;
+  text-decoration: underline 0.2rem transparent;
+  transition: text-decoration-color 0.5s;
 }
-div[data-folderpath="/Seedlings"] p[class="folder-title"]::before {
-  content: "🌱 ";
-}
-div[data-folderpath="/Evergreen"] p[class="folder-title"]::before {
-  content: "🌳 ";
-}
-div[data-folderpath="/Budding"] p[class="folder-title"]::before {
-  content: "🌿 ";
+
+a:hover {
+  text-decoration-color: var(--tertiary);
+  // text-underline-offset: 0.4em;
 }

quartz/styles/explorer.scss

@@ -0,0 +1,12 @@
+div[data-folderpath="/Archive"] p[class="folder-title"]::before {
+  content: "📚 ";
+}
+div[data-folderpath="/Seedlings"] p[class="folder-title"]::before {
+  content: "🌱 ";
+}
+div[data-folderpath="/Evergreen"] p[class="folder-title"]::before {
+  content: "🌳 ";
+}
+div[data-folderpath="/Budding"] p[class="folder-title"]::before {
+  content: "🌿 ";
+}