Layout & Config Changes

content/index.md

@@ -1,5 +1,5 @@
 ---
-title: 👋 Welcome to the AmbrOS
+title: 👋 Welcome to the Odyssey
 description: Landing page for AmbrOS
 aliases:
   - home
@@ -8,4 +8,26 @@ tags:
 publish: true
 ---
 
-Hey there, I'm Patrick Ambrose and these are my personal notes.
+Welcome to **Odysseus Ambrosia (Οδυσσέας Αμβροσία)**, a digital garden designed to be a sanctuary of knowledge, creativity, and inspiration. The name "*Odysseus Ambrosia*" encapsulates the essence of our journey towards enlightenment and the nourishment of our minds and souls.
+
+## What is this about?
+
+#### Odysseus: A Symbol of Tenacity and Wisdom
+
+In Greek mythology, Odysseus is renowned for his cunning intellect, indomitable spirit, and unwavering perseverance. His epic adventures in Homer's "Odyssey" symbolize the human quest for knowledge, the challenges faced along the way, and the wisdom gained through experience. At Odysseus Ambrosia, we embrace Odysseus' spirit of exploration, resilience, and continuous learning.
+
+#### Ambrosia: The Nectar of Divine Inspiration
+
+Ambrosia represents the food or drink of the Greek gods, often described as conferring immortality or divine wisdom upon those who partake of it. In our digital garden, Ambrosia symbolizes the transformative power of knowledge and creativity. Just as Ambrosia nourished the gods, our curated content aims to nourish the intellect and spark inspiration in our visitors.
+
+#### Bringing Together Wisdom and Inspiration
+
+By combining the names "Odysseus" and "Ambrosia," we create a symbolic fusion of tenacity, wisdom, and divine inspiration. Odysseus Ambrosia is not just a collection of information but a journey through the realms of knowledge and imagination, inviting you to explore, learn, and grow.
+
+Join us on this odyssey of discovery and enlightenment at Odysseus Ambrosia, where every piece of content is a drop of nectar that enriches the mind and fuels the spirit.
+
+## What can you find here?
+
+Lorem ipsum
+
+## Who am I?

quartz.config.ts

@@ -8,12 +8,10 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "📒 Patrick's Notes",
+    pageTitle: "🏛️ Odysseus Ambrosia",
     enableSPA: true,
     enablePopovers: true,
-    analytics: {
-      provider: "plausible",
-    },
+    analytics: null,
     locale: "en-US",
     baseUrl: "notes.patrickambrose.com",
     ignorePatterns: ["private", "templates", ".obsidian"],
@@ -22,9 +20,9 @@ const config: QuartzConfig = {
       fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
-        header: "Schibsted Grotesk",
-        body: "Source Sans Pro",
-        code: "IBM Plex Mono",
+        header: "Space Grotesk",
+        body: "Space Grotesk",
+        code: "JetBrains Mono",
       },
       colors: {
         lightMode: {

quartz.layout.ts

@@ -28,11 +28,14 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    // Component.DesktopOnly(Component.Explorer()),
+    Component.DesktopOnly(Component.TableOfContents({
+
+    })),
   ],
   right: [
     Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents()),
+    // Component.DesktopOnly(Component.TableOfContents()),
     Component.Backlinks(),
   ],
 }

quartz/components/scripts/search.inline.ts

@@ -204,12 +204,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   let currentHover: HTMLInputElement | null = null
 
   async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
-    if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+    if (e.key === "/" || (e.key === "k" && (e.ctrlKey || e.metaKey)) && !e.shiftKey) {
       e.preventDefault()
       const searchBarOpen = container?.classList.contains("active")
       searchBarOpen ? hideSearch() : showSearch("basic")
       return
-    } else if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
+    } else if ((e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") || (e.shiftKey && e.key === "?")) {
       // Hotkey to open tag search
       e.preventDefault()
       const searchBarOpen = container?.classList.contains("active")

quartz/components/styles/darkmode.scss

@@ -1,8 +1,8 @@
 .darkmode {
   position: relative;
-  width: 20px;
-  height: 20px;
-  margin: 0 10px;
+  width: 100px;
+  height: 2rem;
+  margin: 0 0;
 
   & > .toggle {
     display: none;
@@ -17,7 +17,10 @@
     height: 20px;
     top: calc(50% - 10px);
     fill: var(--darkgray);
-    transition: opacity 0.1s ease;
+    padding: 0.4rem;
+    border-radius: 0.25rem;
+    background-color: var(--lightgray);
+    transition: opacity 0.2s ease;
   }
 }
 

quartz/components/styles/graph.scss

@@ -7,7 +7,7 @@
   }
 
   & > .graph-outer {
-    border-radius: 5px;
+    border-radius: 7.5px;
     border: 1px solid var(--lightgray);
     box-sizing: border-box;
     height: 250px;

quartz/components/styles/popover.scss

@@ -22,8 +22,8 @@
 
   & > .popover-inner {
     position: relative;
-    width: 30rem;
-    max-height: 20rem;
+    width: 40rem;
+    max-height: 30rem;
     padding: 0 1rem 1rem 1rem;
     font-weight: initial;
     font-style: initial;
@@ -32,7 +32,7 @@
     font-family: var(--bodyFont);
     border: 1px solid var(--lightgray);
     background-color: var(--light);
-    border-radius: 5px;
+    border-radius: 10px;
     box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
     overflow: auto;
     white-space: normal;

quartz/components/styles/search.scss

@@ -2,7 +2,7 @@
 
 .search {
   min-width: fit-content;
-  max-width: 14rem;
+  max-width: 100%;
   flex-grow: 0.3;
 
   & > #search-icon {

quartz/i18n/locales/en-US.ts

@@ -22,12 +22,12 @@ export default {
       quote: "Quote",
     },
     backlinks: {
-      title: "Backlinks",
-      noBacklinksFound: "No backlinks found",
+      title: "Narrative Links",
+      noBacklinksFound: "No related narratives",
     },
     themeToggle: {
-      lightMode: "Light mode",
-      darkMode: "Dark mode",
+      lightMode: "Light Mode",
+      darkMode: "Night Mode",
     },
     explorer: {
       title: "Explorer",
@@ -36,7 +36,7 @@ export default {
       createdWith: "Created with",
     },
     graph: {
-      title: "Graph View",
+      title: "Map of the Odyssey",
     },
     recentNotes: {
       title: "Recent Notes",
@@ -51,20 +51,20 @@ export default {
       searchBarPlaceholder: "Search for something",
     },
     tableOfContents: {
-      title: "Table of Contents",
+      title: "Atlas of Contents",
     },
     contentMeta: {
       readingTime: ({ minutes }) => `${minutes} min read`,
     },
   },
   pages: {
     rss: {
-      recentNotes: "Recent notes",
+      recentNotes: "Recent Endeavours",
       lastFewNotes: ({ count }) => `Last ${count} notes`,
     },
     error: {
-      title: "Not Found",
-      notFound: "Either this page is private or doesn't exist.",
+      title: "Welp! Page Not Found",
+      notFound: "I mean either this page is private or it doesn't exist (yet?).",
     },
     folderContent: {
       folder: "Folder",

quartz/styles/custom.scss

@@ -1,3 +1,70 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+// Color Definitions
+:root[saved-theme="light"] {
+    --green: #16a085;
+    --yellow: #f29c50;
+    --pink: #f68aa2;
+    --purple: #9b59b6;
+  }
+
+  :root[saved-theme="dark"] {
+    --green: #16a085;
+    --yellow: #f9b44e;
+    --pink: #e88bb3;
+    --purple: #b799ff;
+  }
+
+  :root[saved-theme="light"] {
+    // h2 {
+    //   color: var(--green);
+    // }
+
+    // h3 {
+    //   color: var(--yellow);
+    // }
+
+    strong {
+      color: var(--purple);
+    }
+
+    em {
+      color: var(--pink);
+      font-weight: 600;
+    }
+
+    hr {
+      height: 0.0625em;
+      margin: 0 auto;
+    }
+  }
+
+  :root[saved-theme="dark"] {
+    // h2 {
+    //   color: var(--green);
+    // }
+
+    // h3 {
+    //   color: var(--yellow);
+    // }
+
+    strong {
+      color: var(--purple);
+    }
+
+    em {
+      color: var(--pink);
+      font-weight: 600;
+    }
+
+    hr {
+      height: 0.0625em;
+      margin: 0 auto;
+    }
+  }
+
+  img {
+    display: block;
+    margin: auto;
+  }

quartz/styles/variables.scss

@@ -1,7 +1,7 @@
-$pageWidth: 750px;
-$mobileBreakpoint: 600px;
-$tabletBreakpoint: 1000px;
-$sidePanelWidth: 380px;
+$pageWidth: 860px;
+$mobileBreakpoint: 480px;
+$tabletBreakpoint: 1024px;
+$sidePanelWidth: 440px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
 $boldWeight: 700;