From 4595f54660b3ce0dc7725a23507a90c06e0eae18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Sat, 6 Apr 2024 18:10:41 +0200 Subject: [PATCH] Quartz configuration and styling --- quartz.config.ts | 11 +-- quartz.layout.ts | 16 ++-- quartz/styles/custom.scss | 151 ++++++++++++++++++++++++++++++++++- quartz/styles/variables.scss | 2 +- 4 files changed, 163 insertions(+), 17 deletions(-) diff --git a/quartz.config.ts b/quartz.config.ts index 4b98325..51d4af3 100644 --- a/quartz.config.ts +++ b/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 \ No newline at end of file diff --git a/quartz.layout.ts b/quartz.layout.ts index b5a1639..0deeb4e 100644 --- a/quartz.layout.ts +++ b/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(), ], } diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index b0c09dc..1288ea0 100644 --- a/quartz/styles/custom.scss +++ b/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; +} \ No newline at end of file diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index e45cc91..bb001e6 100644 --- a/quartz/styles/variables.scss +++ b/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;