changed appearance of thought ocean

quartz.config.ts

@@ -25,41 +25,33 @@ const config: QuartzConfig = {
   excludeRoot: false, // wether to exclude "/" index path to be excluded from auto generated images (false = use auto, true = use default og image)
 },
     theme: {
-      fontOrigin: "googleFonts",
+      fontOrigin: "local",
       cdnCaching: false,
       typography: {
-        header: "Schibsted Grotesk",
-        body: "Source Sans Pro",
-        code: "IBM Plex Mono",
+        header: "Source Code Pro",
+        body: "Source Code Pro",
+        code: "Source Code Pro",
       },
       colors: {
         lightMode: {
-          // light: "#faf8f8",
-	  light: "#304555",
-          lightgray: "#e5e5e5",
-          gray: "#b8b8b8",
-          // darkgray: "#4e4e4e",
+	  light: "#5555a",
+          lightgray: "#858585",
+          gray: "#585858",
           dark: "#300020",
-          //secondary: "#284b63",
-          // tertiary: "#84a59d",
-          // highlight: "rgba(143, 159, 169, 0.15)",
-          // textHighlight: "#fff23688",
 	  darkgray: "#140400",
-          // dark: "#ebebec",
-          secondary: "#7b97aa",
-          tertiary: "#84a59d",
-          highlight: "rgba(169, 49, 60, 0.55)",
-          textHighlight: "#b3aa0288",
+          secondary: "#510426",
+          tertiary: "#e91e63",
+          highlight: "rgba(149, 49, 60, 0.55)",
+          textHighlight: "#332a0288",
         },
         darkMode: {
-          // light: "#161618",
-	  light: "#203545",
+          light: "#565668",
           lightgray: "#393639",
-          gray: "#646464",
-          darkgray: "#d4d4d4",
-          dark: "#ebebec",
-          secondary: "#7b97aa",
-          tertiary: "#84a59d",
+          gray: "343434",
+          darkgray: "#141414",
+          dark: "#1b1b1c",
+          secondary: "#8b070a",
+          tertiary: "#800080",
           highlight: "rgba(143, 159, 169, 0.15)",
           textHighlight: "#b3aa0288",
         },
@@ -72,8 +64,7 @@ const config: QuartzConfig = {
       Plugin.SyntaxHighlighting({
         theme: {
           dark: "github-dark",
-          // light: "github-light",
-          light: "ayu-dark",
+          light: "github-light",
         },
         keepBackground: true,
       }),

quartz.layout.ts

@@ -4,12 +4,18 @@ import * as Component from "./quartz/components"
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
-  header: [],
-  afterBody: [],
+  header: [
+    Component.PageTitle(),
+    Component.MobileOnly(Component.Spacer()),
+    Component.Search(),
+],
+  afterBody: [
+    
+],
   footer: Component.Footer({
     links: {
-      Home: "https://cosmicflow.space",
-      "Git": "https://cosmicflow.space:3030",
+      Home: "/",
+      Blog: "/blogs/"
     },
   }),
 }
@@ -17,34 +23,63 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
+    Component.Graph({
+    localGraph: {
+    drag: true, // whether to allow panning the view around
+    zoom: true, // whether to allow zooming in and out
+    depth: 2, // how many hops of notes to display
+    scale: 1.3, // default view scale
+    repelForce: 0.5, // how much nodes should repel each other
+    centerForce: 0.3, // how much force to use when trying to center the nodes
+    linkDistance: 30, // how long should the links be by default?
+    fontSize: 0.4, // what size should the node labels be?
+    opacityScale: 1.5, // how quickly do we fade out the labels when zooming out?
+    removeTags: [], // what tags to remove from the graph
+    showTags: true, // whether to show tags in the graph
+    enableRadial: false, // whether to constrain the graph, similar to Obsidian
+  },
+  globalGraph: {
+    drag: true,
+    zoom: true,
+    depth: -1,
+    scale: 0.9,
+    repelForce: 0.5,
+    centerForce: 0.3,
+    linkDistance: 30,
+    fontSize: 0.6,
+    opacityScale: 1.5,
+    removeTags: [], // what tags to remove from the graph
+    showTags: true, // whether to show tags in the graph
+    enableRadial: false, // whether to constrain the graph, similar to Obsidian
+  },
+}),
     Component.Breadcrumbs(),
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
+    // Component.DesktopOnly(Component.TableOfContents()),
   ],
   left: [
-    Component.PageTitle(),
-    Component.MobileOnly(Component.Spacer()),
-    Component.Search(),
-    // Component.Darkmode(),
-    Component.Explorer(),
+  	Component.TableOfContents(),
+        Component.Backlinks(),
   ],
   right: [
-    Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents()),
-    Component.Backlinks(),
-  ],
+    
+    Component.Darkmode(),
+    Component.Explorer(),
+],
 }
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
   beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
   left: [
+  ],
+  right: [ 
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
-    // Component.Darkmode(),
+    Component.Darkmode(),
     Component.Explorer(),
-  ],
-  right: [],
+],
 }

quartz/components/Footer.tsx

@@ -21,7 +21,7 @@ export default ((opts?: Options) => {
           ))}
         </ul>
         <p>
-          <a href="https://quartz.jzhao.xyz/">Created with Quartz v{version}</a> © {year} <img src="static/quartz-icon.png" alt=""  width="25" height="25" style='vertical-align:middle; display:inline;'></img>
+          <a href="https://quartz.jzhao.xyz/">Created with Quartz v{version}</a>
 	  <br></br>
 	  <a href="https://orgmode.org/">Exported with pleasure 💎 using Org Mode <img src="static/org-mode-unicorn.svg" alt=""  width="25" height="25" style='vertical-align:middle; display:inline;'></img></a>