diff --git a/quartz/quartz/components/ExplorerNode.tsx b/quartz/quartz/components/ExplorerNode.tsx index 22ed2a8..3f9f5b1 100644 --- a/quartz/quartz/components/ExplorerNode.tsx +++ b/quartz/quartz/components/ExplorerNode.tsx @@ -177,31 +177,46 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro <> {node.file ? ( // Single file node -
  • - - {node.displayName} - -
  • + <> + {node.displayName === "Readme" && ( +
    + )} +
  • + + {node.displayName} + + + + +
  • + ) : (
  • {node.name !== "" && ( // Node with entire folder // Render svg button + folder name, then children - )} {/* Recursively render children of folder */} diff --git a/quartz/quartz/components/Head.tsx b/quartz/quartz/components/Head.tsx index 46ba5e0..c44b6ac 100644 --- a/quartz/quartz/components/Head.tsx +++ b/quartz/quartz/components/Head.tsx @@ -20,7 +20,7 @@ export default (() => { return ( - {title} + {title} | Pubky Core {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && ( <> diff --git a/quartz/quartz/components/styles/explorer.scss b/quartz/quartz/components/styles/explorer.scss index d656451..92f6322 100644 --- a/quartz/quartz/components/styles/explorer.scss +++ b/quartz/quartz/components/styles/explorer.scss @@ -38,7 +38,7 @@ button#explorer { grid-template-rows: 1fr; } -.folder-outer>ul { +.folder-outer > ul { overflow: hidden; } @@ -49,7 +49,7 @@ button#explorer { transition: max-height 0.35s ease; margin-top: 0rem; - &.collapsed>.overflow::after { + &.collapsed > .overflow::after { opacity: 0; } @@ -70,7 +70,7 @@ button#explorer { transform 0.35s ease, opacity 0.2s ease; - & li>a { + & li > a { color: var(--dark); opacity: 0.5; pointer-events: all; @@ -81,7 +81,7 @@ button#explorer { svg { pointer-events: all; - &>polyline { + & > polyline { pointer-events: none; } } @@ -92,7 +92,7 @@ svg { align-items: center; user-select: none; - & div>a { + & div > a { color: var(--secondary); font-family: var(--headerFont); font-size: 0.95rem; @@ -101,11 +101,11 @@ svg { display: inline-block; } - & div>a:hover { + & div > a:hover { color: var(--tertiary); } - & div>button { + & div > button { color: var(--dark); background-color: transparent; border: none; @@ -132,14 +132,23 @@ svg { } .folder-icon { - margin-right: 5px; + margin-left: 0.5rem; color: var(--secondary); cursor: pointer; transition: transform 0.3s ease; backface-visibility: visible; } -li:has(> .folder-outer:not(.open))>.folder-container>svg { +.folder-icon-fixed { + margin-left: 0.5rem; + color: var(--secondary); + cursor: pointer; + transition: transform 0.3s ease; + backface-visibility: visible; + transform: rotate(-90deg); +} + +li:has(> .folder-outer:not(.open)) > .folder-container > svg { transform: rotate(-90deg); } @@ -156,4 +165,4 @@ li:has(> .folder-outer:not(.open))>.folder-container>svg { height: 4px; // remove default margin from li margin: 0; -} \ No newline at end of file +}