Quartz configuration and styling

quartz.config.ts

@@ -8,14 +8,14 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4.0",
+    pageTitle: "[JPG]",
     enableSPA: true,
     enablePopovers: true,
     analytics: {
       provider: "plausible",
     },
     locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
+    baseUrl: "jpg.marchal.dev",
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
     theme: {
@@ -56,7 +56,7 @@ const config: QuartzConfig = {
       Plugin.CreatedModifiedDate({
         priority: ["frontmatter", "filesystem"],
       }),
-      Plugin.Latex({ renderEngine: "katex" }),
+      Plugin.Latex({ renderEngine: "katex" }), // mathjax or katex
       Plugin.SyntaxHighlighting({
         theme: {
           light: "github-light",
@@ -64,11 +64,12 @@ const config: QuartzConfig = {
         },
         keepBackground: false,
       }),
-      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
+      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: true, enableYouTubeEmbed: true }),
       Plugin.GitHubFlavoredMarkdown(),
       Plugin.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
+      Plugin.HardLineBreaks(),
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [
@@ -88,4 +89,4 @@ const config: QuartzConfig = {
   },
 }
 
-export default config
+export default config

quartz.layout.ts

@@ -7,8 +7,7 @@ export const sharedPageComponents: SharedLayout = {
   header: [],
   footer: Component.Footer({
     links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
+      "Théo Marchal": "https://theo.marchal.dev"
     },
   }),
 }
@@ -16,22 +15,19 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
-    Component.Breadcrumbs(),
-    Component.ArticleTitle(),
-    Component.ContentMeta(),
-    Component.TagList(),
+    Component.MobileOnly(Component.Explorer()),
+    Component.Breadcrumbs()
   ],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
+    Component.MobileOnly(Component.Darkmode()),
     Component.Search(),
-    Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.DesktopOnly(Component.Explorer())
   ],
   right: [
-    Component.Graph(),
+    Component.DesktopOnly(Component.Darkmode()),
     Component.DesktopOnly(Component.TableOfContents()),
-    Component.Backlinks(),
   ],
 }
 

quartz/styles/custom.scss

@@ -1,3 +1,152 @@
 @use "./base.scss";
+@use "./variables.scss" as *;
 
-// put your custom CSS here!
+.text-highlight {
+    background-color: #ddcee5;
+}
+
+:root[saved-theme="dark"] .text-highlight {
+    background-color: #7d4e95;
+}
+
+.callout {
+    border: 3px solid #7d4e95;
+    background-color:initial;
+    border-radius: 1rem;
+}
+
+.callout-title {
+    --color: #7d4e95;
+}
+
+:root[saved-theme="dark"] .callout {
+    border: 3px solid #a672c0;
+}
+
+:root[saved-theme="dark"] .callout-title {
+    --color: #a672c0;
+}
+
+.callout.note {
+    
+    & table {
+        margin: 0;
+        margin-bottom: 0.5rem;
+
+        & thead {
+            display: none;
+        }
+
+        & td {
+            padding: 0;
+        }
+    }
+}
+
+ul.overflow, ol.overflow {
+    max-height: 75dvh;
+}
+
+ul.overflow::after, ol.overflow::after {
+    position:initial;
+}
+
+#toc-content {
+    & ul {
+      & > li > a {
+        opacity: 0.75;
+      }
+    }
+}
+
+.page {
+    & > #quartz-body {
+
+        & .center {
+            & p {
+                font-size: 1.15rem;
+            }
+            
+            & h3 {
+                font-size: 1.5rem;
+            }
+            
+            & h2 {
+                font-size: 1.7rem;
+            }
+            
+            & h1 {
+                font-size: 2rem;
+            }
+        }
+
+        & .sidebar {
+            @media all and (max-width: $fullPageWidth) {
+                margin-top: 1rem;
+            }
+       }
+
+        & .right.sidebar {
+        @media all and (max-width: $fullPageWidth) {
+            margin-top: 0;
+        }
+        }
+    }
+}
+
+hr {
+    margin: 1rem auto;
+}
+
+footer {
+    margin-bottom: 2rem;
+
+    & p {
+        font-size: 1rem;
+    }
+
+    @media all and (max-width: $fullPageWidth) {
+        margin-bottom: 1rem;
+    }
+}
+
+
+
+// Usage
+
+.usage {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+}
+
+.usage .left {
+    padding-right: 1.7rem;
+
+    background-image: linear-gradient(var(--darkgray), var(--darkgray)), linear-gradient(var(--darkgray), var(--darkgray));
+    background-repeat: no-repeat;
+    background-size: 8px 2px;
+    background-position: top right, bottom right;
+
+    border-right: solid var(--darkgray);
+    border-width: 0 2px;
+}
+
+.usage .left .box {
+    border: 1px solid var(--darkgray);
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
+    display: inline-block;
+    width: fit-content;
+    margin: 0.2rem;
+}
+
+.usage .left p {
+    margin:0;
+}
+
+.usage .right {
+    padding-left: 1rem;
+}

quartz/styles/variables.scss

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