adjust layout, toc, backlinks

quartz.config.ts

@@ -47,8 +47,8 @@ const config: QuartzConfig = {
   plugins: {
     transformers: [
       Plugin.FrontMatter(),
-      Plugin.TableOfContents(),
-      Plugin.CreatedModifiedDate({ priority: ["frontmatter", "filesystem"], }),
+      Plugin.TableOfContents({ collapseByDefault: true }),
+      // Plugin.CreatedModifiedDate({ priority: ["frontmatter", "filesystem"], }),
       Plugin.SyntaxHighlighting(),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),

quartz.layout.ts

@@ -21,8 +21,9 @@ export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
     Component.Breadcrumbs(),
     Component.ArticleTitle(),
+    Component.MobileOnly(Component.TableOfContents()),
     // Component.ContentMeta(),
-    // Component.TagList()
+    // Component.TagList(),
   ],
   left: [
     Component.PageTitle(),
@@ -42,13 +43,13 @@ export const defaultContentPageLayout: PageLayout = {
           }
         },
       }
-    )),
-    Component.DesktopOnly(Component.TableOfContents()),
-    // Component.RecentNotes(),
-  ],
+      )),
+      // Component.DesktopOnly(Component.TableOfContents()),
+      // Component.RecentNotes(),
+    ],
   right: [
     Component.Graph(),
-    // Component.DesktopOnly(Component.TableOfContents()),
+    Component.DesktopOnly(Component.TableOfContents()),
     Component.Backlinks(),
   ],
 }

quartz/styles/custom.scss

@@ -1,3 +1,15 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+
+.article-title {
+  padding-bottom: 1rem;
+}
+
+.graph {
+  margin-bottom: 3rem;
+}
+
+.backlinks {
+  top: -5rem;
+}

quartz/styles/variables.scss

@@ -2,5 +2,5 @@ $pageWidth: 750px;
 $mobileBreakpoint: 600px;
 $tabletBreakpoint: 1200px;
 $sidePanelWidth: 380px;
-$topSpacing: 6rem;
+$topSpacing: 2rem; // 6rem
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;