From d8badc00bb2117607973926ca384b63fff85bf86 Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Wed, 22 Nov 2023 22:27:33 -0600
Subject: [PATCH] new fonts, adjust layout

---
 quartz.config.ts                       | 14 +++++-----
 quartz.layout.ts                       | 36 ++++++++++++--------------
 quartz/components/Footer.tsx           |  2 +-
 quartz/components/styles/explorer.scss |  4 +--
 quartz/components/styles/popover.scss  |  3 ++-
 quartz/components/styles/toc.scss      |  4 ++-
 quartz/styles/base.scss                | 15 +++++++----
 quartz/styles/custom.scss              |  8 ------
 8 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/quartz.config.ts b/quartz.config.ts
index f1156f1eb..9ae5985be 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -14,20 +14,20 @@ const config: QuartzConfig = {
     defaultDateType: "created",
     theme: {
       typography: {
-        header: "Schibsted Grotesk",
-        body: "Source Sans Pro",
-        code: "IBM Plex Mono",
+        header: "Bitter", // Schibsted Grotesk
+        body: "Poppins", // Source Sans Pro
+        code: "Fira Mono", // IBM Plex Mono
       },
       colors: {
         lightMode: {
           light: "#faf8f8",
           lightgray: "#e5e5e5",
           gray: "#b8b8b8",
-          // darkgray: "#4e4e4e",
-          darkgray: "#2e2e2e",
+          darkgray: "#4e4e4e",
+          // darkgray: "#2e2e2e",
           dark: "#2b2b2b",
-          // secondary: "#284b63",
-          secondary: "#152733",
+          secondary: "#284b63",
+          // secondary: "#152733",
           tertiary: "#84a59d",
           highlight: "#8f9fa926",
         },
diff --git a/quartz.layout.ts b/quartz.layout.ts
index d1c518578..0525f64a6 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -31,27 +31,23 @@ export const defaultContentPageLayout: PageLayout = {
     Component.Search(),
     Component.Darkmode(),
     Component.DesktopOnly(Component.Explorer(
-      {
-        mapFn: (node) => {
-          // dont change name of root node
-          if (node.depth > 0) {
-            // set emoji for file/folder
-            if (node.file) {
-              node.displayName = "📄 " + node.displayName
-            }
-            else { node.displayName = "📁 " + node.displayName }
-          }
-        },
-      }
+      // {
+      //   mapFn: (node) => {
+      //     // dont change name of root node
+      //     if (node.depth > 0) {
+      //       // set emoji for file/folder
+      //       if (node.file) {
+      //         node.displayName = "📄 " + node.displayName
+      //       }
+      //       else { node.displayName = "📁 " + node.displayName }
+      //     }
+      //   },
+      // }
       )),
-      Component.DesktopOnly(Component.TableOfContents()),
-      // Component.RecentNotes(),
     ],
-  right: [
-    Component.Graph(),
-    // Component.DesktopOnly(Component.Backlinks()),
-    // Component.MobileOnly(Component.Backlinks()),
-    Component.Backlinks(),
+    right: [
+      Component.Graph(),
+      Component.Backlinks(),
   ],
 }
 
@@ -63,6 +59,6 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-  ],
+    Component.DesktopOnly(Component.Explorer({ folderClickBehavior: "link",  }))],
   right: [],
 }
\ No newline at end of file
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index 3b705acb1..e01dbf008 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -13,7 +13,7 @@ export default ((opts?: Options) => {
     return (
       <footer class={`${displayClass ?? ""}`}>
         <hr />
-        <p>© {year} Miguel Pimentel · Created with <a href="https://quartz.jzhao.xyz/">Quartz</a>.
+        <p>© {year} Miguel Pimentel · Powered by <a href="https://quartz.jzhao.xyz/">Quartz</a>.
         </p>
         <ul>
           {Object.entries(links).map(([text, link]) => (
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index c456ed83f..0cbf0109d 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -90,7 +90,7 @@ svg {
   & div > a {
     color: var(--secondary);
     font-family: var(--headerFont);
-    font-size: 0.95rem;
+    font-size: 0.95rem; // 0.95
     font-weight: 600;
     line-height: 1.5rem;
     display: inline-block;
@@ -113,7 +113,7 @@ svg {
     font-family: var(--headerFont);
 
     & p {
-      font-size: 0.95rem;
+      font-size: 1.1rem; // 0.95
       display: inline-block;
       color: var(--secondary);
       font-weight: 600;
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index fae0e121b..8b9489e35 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -31,10 +31,11 @@
     font-family: var(--bodyFont);
     border: 1px solid var(--lightgray);
     background-color: var(--light);
-    border-radius: 5px;
+    border-radius: 8px; // 5px
     box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
     overflow: auto;
     white-space: normal;
+    scrollbar-width: none;
   }
 
   h1 {
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index aaa31ba65..c849a77be 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -1,4 +1,6 @@
 button#toc {
+  margin-top: 2rem;
+  all: unset;
   background-color: transparent;
   border: none;
   text-align: left;
@@ -17,7 +19,7 @@ button#toc {
   & .fold {
     margin-left: 0.5rem;
     transition: transform 0.3s ease;
-    // opacity: 0.8;
+    opacity: 0.8;
   }
 
   &.collapsed .fold {
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index df7183d6b..d2ff567d3 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -45,7 +45,7 @@ ul,
 .math {
   color: var(--darkgray);
   fill: var(--darkgray);
-  // overflow-wrap: anywhere;
+  overflow-wrap: anywhere;
   hyphens: auto;
 }
 
@@ -157,9 +157,12 @@ a {
         align-items: center;
       }
     }
-
+    
     & .sidebar.right {
       right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      @media all and (max-width: $fullPageWidth) {
+        flex-direction: column;
+      }
       & > * {
         @media all and (max-width: $fullPageWidth) {
           flex: 1;
@@ -459,8 +462,9 @@ video {
 
 ul.overflow,
 ol.overflow {
-  max-height: 400;
+  max-height: 500; // 400
   overflow-y: auto;
+  scrollbar-width: thin;
 
   // clearfix
   content: "";
@@ -479,8 +483,9 @@ ol.overflow {
     left: 0;
     bottom: 0;
     opacity: 1;
-    transition: opacity 0.3s ease;
-    background: linear-gradient(transparent 0px, var(--light));
+    // Removes opacity fade
+    // transition: opacity 0.3s ease;
+    // background: linear-gradient(transparent 0px, var(--light));
   }
 }
 
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index 1268fc732..b0c09dcb9 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,11 +1,3 @@
 @use "./base.scss";
 
 // put your custom CSS here!
-
-.article-title {
-  padding-bottom: 1rem;
-}
-
-.graph {
-  padding-bottom: 3rem;
-}