From 351b4ab13be6b1e43eb286ffac2646d0479ba678 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 23 Jul 2023 21:41:09 -0700
Subject: [PATCH] styling fixes for stacking order and overflow

---
 content/features/upcoming features.md     | 6 +++++-
 quartz/components/PageList.tsx            | 6 +++++-
 quartz/components/TagList.tsx             | 1 +
 quartz/components/pages/FolderContent.tsx | 4 ++--
 quartz/plugins/emitters/index.ts          | 2 +-
 quartz/styles/base.scss                   | 9 ++-------
 6 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/content/features/upcoming features.md b/content/features/upcoming features.md
index 5c57dba2..34a95d9f 100644
--- a/content/features/upcoming features.md	
+++ b/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
diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
index 2f08f629..8ef40c51 100644
--- a/quartz/components/PageList.tsx
+++ b/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;
+}
 `
diff --git a/quartz/components/TagList.tsx b/quartz/components/TagList.tsx
index 8b909557..0bffb0dc 100644
--- a/quartz/components/TagList.tsx
+++ b/quartz/components/TagList.tsx
@@ -33,6 +33,7 @@ TagList.css = `
   display: flex;
   padding-left: 0;
   gap: 0.4rem;
+  margin: 1rem 0;
 }
   
 .tags > li {
diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
index 66a1adba..ea7ab5e5 100644
--- a/quartz/components/pages/FolderContent.tsx
+++ b/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 prefixed = fileSlug.startsWith(folderSlug)
+    const fileSlug = canonicalizeServer(file.slug!)
+    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
diff --git a/quartz/plugins/emitters/index.ts b/quartz/plugins/emitters/index.ts
index d1149f78..da95d490 100644
--- a/quartz/plugins/emitters/index.ts
+++ b/quartz/plugins/emitters/index.ts
@@ -5,4 +5,4 @@ export { ContentIndex } from "./contentIndex"
 export { AliasRedirects } from "./aliases"
 export { Assets } from "./assets"
 export { Static } from "./static"
-export { ComponentResources } from "./componentResources"
\ No newline at end of file
+export { ComponentResources } from "./componentResources"
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 9e7c8f28..ee39b47d 100644
--- a/quartz/styles/base.scss
+++ b/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] {