From abf9d6449e23f7bdd7f63da2411e04d02c6f6d44 Mon Sep 17 00:00:00 2001
From: bfahrenfort <bfahrenfort1@gmail.com>
Date: Sat, 2 Nov 2024 19:21:54 +1100
Subject: [PATCH] New style

---
 quartz.layout.ts          |  6 ++--
 quartz/styles/custom.scss | 69 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 43a42c0e9..9f5cc1f6b 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -63,9 +63,11 @@ export const defaultContentPageLayout: PageLayout = {
     //Component.TableOfContents(),
   ],
   right: [
-    Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents()),
     //Component.MobileOnly(Component.Explorer()),
+    Component.TableOfContents(),
+  ],
+  afterBody: [
+    Component.Graph(),
     Component.Backlinks(),
   ],
 }
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index 0e18872b8..70e9ba505 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -16,6 +16,10 @@
   font-display: swap;
 }
 
+//
+// Background/visual elements
+//
+
 // Pseudo-element for the transparent background cover moon
 [saved-theme="dark"] body::before {
   filter: invert(100%);
@@ -55,6 +59,10 @@ body[data-slug="index"] blockquote[class="callout"][data-callout="tip"] {
   width: 50%;
 }
 
+// 
+// Content spacing
+//
+
 h1 {
   padding-bottom: 2px;
   margin-bottom: 2px;
@@ -116,3 +124,64 @@ ul {
   margin-top: 2px;
   padding-top: 0px;
 }
+
+//
+// Component aesthetics
+//
+
+.page-footer {
+  display: grid;
+  grid-auto-columns: 1fr;
+  width: 100%;
+}
+
+.page-footer > * {
+  grid-row: 1;
+  padding: 0px 16px;
+}
+
+#quartz-body {
+  margin: 1rem 0rem;
+}
+
+.page > #quartz-body .sidebar {
+  margin: 0px 32px 0px 1rem;
+  padding: 16px 16px 2px 16px;
+}
+
+.page > #quartz-body .sidebar.left {
+  border-radius: 1rem;
+  border: 2px solid var(--darkgray);
+  top: 1rem;
+  height: calc(100vh - 2rem);
+  margin-bottom: 1rem;
+  align-content: flex-start;
+  box-shadow: 8px 6px 0 0 var(--gray);
+  transition: all .3s ease-in;
+}
+[saved-theme="dark"] .page > #quartz-body .sidebar.left:hover {
+  border: 2px solid #e9edfa;
+  box-shadow: 8px 6px 0 0 #e9edfa;
+}
+.page > #quartz-body .sidebar.left:hover {
+  border: 2px solid #262835;
+  box-shadow: 8px 6px 0 0 #262835;
+  // top: calc(1rem - 4px);
+  // margin-left: calc(1rem - 2px);
+  // margin-right: 34px;
+  // height: calc(100vh - (2rem + 2px))
+}
+
+
+.page > #quartz-body .page-header {
+  margin-top: 1px;
+  padding: 0px;
+}
+
+#toc-content .depth-1 {
+  margin-bottom: 0px;
+}
+
+#toc-content ul {
+  margin: 0px 0px;
+}