styling fixes for stacking order and overflow

content/features/upcoming features.md

@@ -4,7 +4,11 @@ draft: true
 
 ## high priority
 
-- https://help.obsidian.md/Editing+and+formatting/Tags#Nested+tags nested tags??
+- back button doesn't work sometimes
+- images in same folder are broken on shortest path mode
+
+- install dependencies on quartz update
+- https://help.obsidian.md/Editing+and+formatting/Tags#Nested+tags nested tags?? and big tag listing
 - watch mode for config/source code
 - https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Task+lists task list styling
 - publish metadata https://help.obsidian.md/Editing+and+formatting/Metadata#Metadata+for+Obsidian+Publish

quartz/components/PageList.tsx

@@ -48,7 +48,7 @@ export function PageList({ fileData, allFiles }: QuartzComponentProps) {
                 {tags.map((tag) => (
                   <li>
                     <a
-                      class="internal"
+                      class="internal tag-link"
                       href={resolveRelative(slug, `tags/${tag}` as CanonicalSlug)}
                     >
                       #{tag}
@@ -68,4 +68,8 @@ PageList.css = `
 .section h3 {
   margin: 0;
 }
+
+.section > .tags {
+  margin: 0;
+}
 `

quartz/components/TagList.tsx

@@ -33,6 +33,7 @@ TagList.css = `
   display: flex;
   padding-left: 0;
   gap: 0.4rem;
+  margin: 1rem 0;
 }
   
 .tags > li {

quartz/components/pages/FolderContent.tsx

@@ -11,8 +11,8 @@ function FolderContent(props: QuartzComponentProps) {
   const { tree, fileData, allFiles } = props
   const folderSlug = canonicalizeServer(fileData.slug!)
   const allPagesInFolder = allFiles.filter((file) => {
-    const fileSlug = file.slug ?? ""
+    const fileSlug = canonicalizeServer(file.slug!)
-    const prefixed = fileSlug.startsWith(folderSlug)
+    const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
     const folderParts = folderSlug.split(path.posix.sep)
     const fileParts = fileSlug.split(path.posix.sep)
     const isDirectChild = fileParts.length === folderParts.length + 1

quartz/styles/base.scss

@@ -36,6 +36,8 @@ ul,
 .math {
   color: var(--darkgray);
   fill: var(--darkgray);
+  overflow-wrap: anywhere;
+  hyphens: auto;
 }
 
 .math {
@@ -82,10 +84,6 @@ a {
     margin: 0 5vw;
   }
 
-  & p {
-    overflow-wrap: anywhere;
-  }
-
   & article {
     & > h1 {
       font-size: 2rem;
@@ -237,14 +235,12 @@ h1 {
 
 h2 {
   font-size: 1.4rem;
-  opacity: 0.95;
   margin-top: 2.4rem;
 }
 
 h3 {
   font-size: 1.12rem;
   margin-top: 2.12rem;
-  opacity: 0.9;
 }
 
 h4,
@@ -252,7 +248,6 @@ h5,
 h6 {
   font-size: 1rem;
   margin-top: 2rem;
-  opacity: 0.85;
 }
 
 div[data-rehype-pretty-code-fragment] {