🎨 use project formatter

quartz/components/styles/explorer.scss

@@ -1,14 +1,12 @@
 @use "../../styles/variables.scss" as *;
 
 @media all and ($mobile) {
-  .page>#quartz-body {
-
+  .page > #quartz-body {
     // Shift page position when toggling Explorer on mobile.
-    &> :not(.sidebar.left:has(.explorer)) {
+    & > :not(.sidebar.left:has(.explorer)) {
       transition: transform 300ms ease-in-out;
     }
-
-    &.lock-scroll> :not(.sidebar.left:has(.explorer)) {
+    &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
       transform: translateX(100dvw);
       transition: transform 300ms ease-in-out;
     }
@@ -22,7 +20,7 @@
       margin: 0;
     }
 
-    .hide-until-loaded~#explorer-content {
+    .hide-until-loaded ~ #explorer-content {
       display: none;
     }
   }
@@ -35,10 +33,8 @@
 
   min-height: 1.2rem;
   flex: 0 1 auto;
-
   &.collapsed {
     flex: 0 1 1.2rem;
-
     & .fold {
       transform: rotateZ(-90deg);
     }
@@ -88,7 +84,7 @@
     pointer-events: all;
     transition: transform 0.35s ease;
 
-    &>polyline {
+    & > polyline {
       pointer-events: none;
     }
   }
@@ -124,7 +120,7 @@ button.desktop-explorer {
     padding: 0;
     overscroll-behavior: contain;
 
-    & li>a {
+    & li > a {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
@@ -146,7 +142,7 @@ button.desktop-explorer {
     grid-template-rows: 1fr;
   }
 
-  .folder-outer>ul {
+  .folder-outer > ul {
     overflow: hidden;
     margin-left: 6px;
     padding-left: 0.8rem;
@@ -160,7 +156,7 @@ button.desktop-explorer {
   align-items: center;
   user-select: none;
 
-  & div>a {
+  & div > a {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
@@ -169,11 +165,11 @@ button.desktop-explorer {
     display: inline-block;
   }
 
-  & div>a:hover {
+  & div > a:hover {
     color: var(--tertiary);
   }
 
-  & div>button {
+  & div > button {
     color: var(--dark);
     background-color: transparent;
     border: none;
@@ -206,7 +202,7 @@ button.desktop-explorer {
   flex-shrink: 0;
 }
 
-li:has(> .folder-outer:not(.open))>.folder-container>svg {
+li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   transform: rotate(-90deg);
 }
 
@@ -219,7 +215,7 @@ li:has(> .folder-outer:not(.open))>.folder-container>svg {
     &.collapsed {
       flex: 0 0 34px;
 
-      &>#explorer-content {
+      & > #explorer-content {
         transform: translateX(-100vw);
         visibility: hidden;
       }
@@ -228,7 +224,7 @@ li:has(> .folder-outer:not(.open))>.folder-container>svg {
     &:not(.collapsed) {
       flex: 0 0 34px;
 
-      &>#explorer-content {
+      & > #explorer-content {
         transform: translateX(0);
         visibility: visible;
       }
@@ -271,4 +267,4 @@ li:has(> .folder-outer:not(.open))>.folder-container>svg {
   @media all and ($mobile) {
     overflow: hidden;
   }
-}
+}