Jacky Zhao
2024-02-17 06e3f8b93d5fbe96e7a05e4eb6be97b6a2d7ead0
fix(style): introduce semiBoldWeight and various improvements to reduce CLS
6 files modified
30 ■■■■ changed files
quartz/components/Head.tsx 12 ●●●● patch | view | raw | blame | history
quartz/components/styles/explorer.scss 4 ●●●● patch | view | raw | blame | history
quartz/plugins/emitters/componentResources.ts 9 ●●●●● patch | view | raw | blame | history
quartz/styles/base.scss 2 ●●● patch | view | raw | blame | history
quartz/styles/callouts.scss 2 ●●● patch | view | raw | blame | history
quartz/styles/variables.scss 1 ●●●● patch | view | raw | blame | history
quartz/components/Head.tsx
@@ -21,6 +21,12 @@
      <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 @@
        <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 />
        ))}
quartz/components/styles/explorer.scss
@@ -87,7 +87,7 @@
    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 @@
      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;
quartz/plugins/emitters/componentResources.ts
@@ -196,10 +196,6 @@
      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 @@
        }
      }
      // 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([
quartz/styles/base.scss
@@ -54,7 +54,7 @@
}
a {
  font-weight: $boldWeight;
  font-weight: $semiBoldWeight;
  text-decoration: none;
  transition: color 0.2s ease;
  color: var(--secondary);
quartz/styles/callouts.scss
@@ -157,6 +157,6 @@
  }
  .callout-title-inner {
    font-weight: $boldWeight;
    font-weight: $semiBoldWeight;
  }
}
quartz/styles/variables.scss
@@ -5,4 +5,5 @@
$topSpacing: 6rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$boldWeight: 700;
$semiBoldWeight: 600;
$normalWeight: 400;