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>
<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 />
))}

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

@ -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;

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

@ -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([

2
quartz/styles/base.scss
View File

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

2
quartz/styles/callouts.scss
View File

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

1
quartz/styles/variables.scss
View File

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