tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(style): introduce semiBoldWeight and various improvements to reduce CLS

Browse Source
This commit is contained in:
Jacky Zhao 2024-02-17 10:34:46 -08:00
parent fa2ea2896f
commit 06e3f8b93d
6 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
quartz/components/Head.tsx
View File

@ -21,6 +21,12 @@ export default (() => {
<head> <head>
<title>{title}</title> <title>{title}</title>
<meta charSet="utf-8" /> <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 name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
@ -30,12 +36,6 @@ export default (() => {
<link rel="icon" href={iconPath} /> <link rel="icon" href={iconPath} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta name="generator" content="Quartz" /> <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) => ( {css.map((href) => (
<link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve /> <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
))} ))}

4
quartz/components/styles/explorer.scss
View File

@ -87,7 +87,7 @@ svg {
color: var(--secondary); color: var(--secondary);
font-family: var(--headerFont); font-family: var(--headerFont);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: $boldWeight; font-weight: $semiBoldWeight;
line-height: 1.5rem; line-height: 1.5rem;
display: inline-block; display: inline-block;
} }
@ -112,7 +112,7 @@ svg {
font-size: 0.95rem; font-size: 0.95rem;
display: inline-block; display: inline-block;
color: var(--secondary); color: var(--secondary);
font-weight: $boldWeight; font-weight: $semiBoldWeight;
margin: 0; margin: 0;
line-height: 1.5rem; line-height: 1.5rem;
pointer-events: none; pointer-events: none;

9
quartz/plugins/emitters/componentResources.ts
View File

@ -196,10 +196,6 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
const cfg = ctx.cfg.configuration const cfg = ctx.cfg.configuration
// component specific scripts and styles // component specific scripts and styles
const componentResources = getComponentResources(ctx) 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 = "" let googleFontsStyleSheet = ""
if (fontOrigin === "local") { if (fontOrigin === "local") {
// let the user do it themselves in css // 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) addGlobalPageResources(ctx, resources, componentResources)
const stylesheet = joinStyles( const stylesheet = joinStyles(
ctx.cfg.configuration.theme, ctx.cfg.configuration.theme,
...componentResources.css,
googleFontsStyleSheet, googleFontsStyleSheet,
...componentResources.css,
styles, styles,
) )
const [prescript, postscript] = await Promise.all([ const [prescript, postscript] = await Promise.all([

2
quartz/styles/base.scss
View File

@ -54,7 +54,7 @@ ul,
} }
a { a {
font-weight: $boldWeight; font-weight: $semiBoldWeight;
text-decoration: none; text-decoration: none;
transition: color 0.2s ease; transition: color 0.2s ease;
color: var(--secondary); color: var(--secondary);

2
quartz/styles/callouts.scss
View File

@ -157,6 +157,6 @@
} }
.callout-title-inner { .callout-title-inner {
font-weight: $boldWeight; font-weight: $semiBoldWeight;
} }
} }

1
quartz/styles/variables.scss
View File

@ -5,4 +5,5 @@ $sidePanelWidth: 380px;
$topSpacing: 6rem; $topSpacing: 6rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth; $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$boldWeight: 700; $boldWeight: 700;
$semiBoldWeight: 600;
$normalWeight: 400; $normalWeight: 400;