From 06e3f8b93d5fbe96e7a05e4eb6be97b6a2d7ead0 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
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 (() => {
<head>
<title>{title}</title>
<meta charSet="utf-8" />
+ {cfg.theme.cdnCaching && (
+ <>
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" />
+ </>
+ )}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
@@ -30,12 +36,6 @@ export default (() => {
<link rel="icon" href={iconPath} />
<meta name="description" content={description} />
<meta name="generator" content="Quartz" />
- {cfg.theme.cdnCaching && (
- <>
- <link rel="preconnect" href="https://fonts.googleapis.com" />
- <link rel="preconnect" href="https://fonts.gstatic.com" />
- </>
- )}
{css.map((href) => (
<link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
))}
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<Options> = (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<Options> = (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;