From 06e3f8b93d5fbe96e7a05e4eb6be97b6a2d7ead0 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Sat, 17 Feb 2024 10:34:46 -0800 Subject: [PATCH] fix(style): introduce semiBoldWeight and various improvements to reduce CLS --- quartz/components/Head.tsx | 12 ++++++------ quartz/components/styles/explorer.scss | 4 ++-- quartz/plugins/emitters/componentResources.ts | 9 ++++----- quartz/styles/base.scss | 2 +- quartz/styles/callouts.scss | 2 +- quartz/styles/variables.scss | 1 + 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index a3c0800..3cb6bea 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -21,6 +21,12 @@ export default (() => { {title} + {cfg.theme.cdnCaching && ( + <> + + + + )} @@ -30,12 +36,6 @@ export default (() => { - {cfg.theme.cdnCaching && ( - <> - - - - )} {css.map((href) => ( ))} diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 34f180c..55ea8aa 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -87,7 +87,7 @@ svg { color: var(--secondary); font-family: var(--headerFont); font-size: 0.95rem; - font-weight: $boldWeight; + font-weight: $semiBoldWeight; line-height: 1.5rem; display: inline-block; } @@ -112,7 +112,7 @@ svg { font-size: 0.95rem; display: inline-block; color: var(--secondary); - font-weight: $boldWeight; + font-weight: $semiBoldWeight; margin: 0; line-height: 1.5rem; pointer-events: none; diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts index 67bc69c..0468416 100644 --- a/quartz/plugins/emitters/componentResources.ts +++ b/quartz/plugins/emitters/componentResources.ts @@ -196,10 +196,6 @@ export const ComponentResources: QuartzEmitterPlugin = (opts?: Partial< const cfg = ctx.cfg.configuration // component specific scripts and styles const componentResources = getComponentResources(ctx) - // important that this goes *after* component scripts - // as the "nav" event gets triggered here and we should make sure - // that everyone else had the chance to register a listener for it - let googleFontsStyleSheet = "" if (fontOrigin === "local") { // let the user do it themselves in css @@ -247,12 +243,15 @@ export const ComponentResources: QuartzEmitterPlugin = (opts?: Partial< } } + // important that this goes *after* component scripts + // as the "nav" event gets triggered here and we should make sure + // that everyone else had the chance to register a listener for it addGlobalPageResources(ctx, resources, componentResources) const stylesheet = joinStyles( ctx.cfg.configuration.theme, - ...componentResources.css, googleFontsStyleSheet, + ...componentResources.css, styles, ) const [prescript, postscript] = await Promise.all([ diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index f0e7c14..6c8f836 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -54,7 +54,7 @@ ul, } a { - font-weight: $boldWeight; + font-weight: $semiBoldWeight; text-decoration: none; transition: color 0.2s ease; color: var(--secondary); diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss index 7fa52c5..b1fd180 100644 --- a/quartz/styles/callouts.scss +++ b/quartz/styles/callouts.scss @@ -157,6 +157,6 @@ } .callout-title-inner { - font-weight: $boldWeight; + font-weight: $semiBoldWeight; } } diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index 8384b9c..e45cc91 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -5,4 +5,5 @@ $sidePanelWidth: 380px; $topSpacing: 6rem; $fullPageWidth: $pageWidth + 2 * $sidePanelWidth; $boldWeight: 700; +$semiBoldWeight: 600; $normalWeight: 400;