fix: update workflow dependencies

- Upgrade actions/checkout from v4 to v6 - Upgrade Python from 3.11 to 3.13
fix: change font-display swap to block
2026-01-22 17:12:12 +00:00 · 2025-11-20 18:40:00 -05:00 · 2025-11-20 14:31:37 -05:00 · 2025-11-19 23:27:51 -05:00 · 2025-09-29 16:45:47 -04:00 · 2025-09-16 14:34:52 -04:00
2 changed files with 112 additions and 41 deletions
--- a/.github/workflows/sync-boostlook-css.yml
+++ b/.github/workflows/sync-boostlook-css.yml
@@ -16,10 +16,10 @@ jobs:
    if: github.repository == 'boostorg/boostlook'
    steps:
      - name: Checkout current repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6

      - name: Checkout website-v2 repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
        with:
          repository: boostorg/website-v2
          ref: develop
@@ -29,7 +29,7 @@ jobs:
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
-          python-version: "3.11"
+          python-version: "3.13"

      - name: Copy boostlook.css to website-v2
        run: |
--- a/boostlook.css
+++ b/boostlook.css
@@ -130,6 +130,7 @@
  --colors-neutral-50: #f5f6f8;
  --colors-neutral-100: #e4e7ea;
  --colors-neutral-200: #c7cccf;
+  --colors-neutral-250: #f9f9f9;
  --colors-neutral-300: #afb3b6;
  --colors-neutral-400: #949a9e;
  --colors-neutral-500: #798086;
@@ -166,6 +167,7 @@
  --colors-negative-950: #1d0408;

  /* Colors Positive Shades */
+  --colors-positive-0: #f8fefb;
  --colors-positive-50: #f0fef7ff;
  --colors-positive-100: #def7eb;
  --colors-positive-200: #bdeed6;
@@ -180,6 +182,7 @@
  --colors-positive-950: #0a1b13;

  /* Colors Warning Shades */
+  --colors-warning-0: rgba(255, 248, 243, 0.5);
  --colors-warning-50: #fff8f3ff;
  --colors-warning-100: #ffefe2;
  --colors-warning-200: #ffd4b3;
@@ -193,6 +196,7 @@
  --colors-warning-950: #1f0e01;

  /* Colors Blue Shades */
+  --colors-blue-0: #f6fafd;
  --colors-blue-25: #ebf4f9;
  --colors-blue-50: #daeef9;
  --colors-blue-100: #c2e2f4;
@@ -252,6 +256,7 @@
  /* Colors Other */
  --colors-neutral-150: #d5d7d9;
  --colors-neutral-850: #2a2c30;
+  --colors-neutral-750: #1c1c1c;
  --colors-overlay-overlay-white-40: rgba(255 255 255 / 0.4);
  --colors-overlay-overlay-black-40: rgba(13 14 15 / 0.4);
  --colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64);
@@ -267,6 +272,7 @@
  --spacing-size-xs: 0.75rem;
  --spacing-size-sm: 1rem;
  --spacing-size-md: 1.125rem;
+  --spacing-size-2md: 1.3rem;
  --spacing-size-lg: 1.5rem;
  --spacing-size-xl: 2rem;
  --spacing-size-2xl: 2.5rem;
@@ -274,8 +280,8 @@
  --main-container: 90rem;

  /* New Look Typography */
-  --font-family-body: "Noto Sans";
-  --font-family-code: "Noto Sans Mono";
+  --font-family-body: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  --font-family-code: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-3xs: 0.625rem;
  --font-size-2xs: 0.75rem;
  --font-size-xs: 0.875rem;
@@ -338,9 +344,11 @@
  --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
  --padding-padding-lg: var(--spacing-size-md);
  --padding-padding-sm: var(--spacing-size-xs);
+  --padding-padding-2sm: var(--spacing-size-2md);
  --padding-padding-xs: var(--spacing-size-xs);
  --padding-padding-2xs: var(--spacing-size-2xs);
  --padding-padding-3xs: var(--spacing-size-3xs);
+  --padding-padding-xl: var(--spacing-size-xl);
  --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
  --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
  --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
@@ -513,7 +521,7 @@ html {
  --surface-background-main-surface-primary: var(--colors-neutral-50);
  --surface-background-main-surface-secondary: var(--colors-neutral-100);
  --surface-background-main-surface-tetriary: var(--colors-neutral-150);
-  --surface-background-main-surface-blue-primary: var(--colors-blue-25);
+  --surface-background-main-surface-blue-primary: var(--colors-blue-0);
  --surface-background-main-surface-blue-secondary: var(--colors-blue-50);
  --surface-background-main-surface-blue-tetriary: var(--colors-blue-100);
  --surface-background-main-surface-blue-quaternary: var(--colors-blue-200);
@@ -521,7 +529,7 @@ html {
  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-black-40);
  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88);

-  --surface-background-states-surface-warning-primary: var(--colors-warning-50);
+  --surface-background-states-surface-warning-primary: var(--colors-warning-0);
  --surface-background-states-surface-warning-secondary: var(--colors-warning-100);
  --surface-background-states-surface-warning-tetriary: var(--colors-warning-200);
  --surface-background-states-surface-warning-quaternary: var(--colors-warning-300);
@@ -718,10 +726,15 @@ html:has(.boostlook) {
  /* Variable font weight range */
  font-variation-settings: "wght" 400, "wdth" 62.5;
  font-display: block;
-  /* Prevents FOIT */
-  src: url("/static/font/notosans.woff2") format("woff2"),
+  src: url("../font/NotoSansDisplay.ttf") format("truetype"),
+  url("/static/font/notosans.woff2") format("woff2"),
  url("../../../../tools/boostlook/notosans.woff2") format("woff2"),
  url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
+  /* Metric overrides to reduce CLS on swap */
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
 }

 /* Noto Sans Display - Italic */
@@ -733,10 +746,15 @@ html:has(.boostlook) {
  /* Variable font weight range */
  font-variation-settings: "wght" 400, "wdth" 62.5;
  font-display: block;
-  /* Prevents FOIT */
-  src: url("/static/font/notosans_mono_ext.woff") format("woff"),
-  url("../../../../tools/boostlook/notosans_mono_ext.woff") format("woff"),
-  url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype");
+  src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
+  url("/static/font/notosans_ext.woff2") format("woff2"),
+  url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"),
+  url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype");
+  /* Metric overrides to reduce CLS on swap */
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
 }

 /* Noto Sans Mono - Variable Weight */
@@ -748,10 +766,15 @@ html:has(.boostlook) {
  /* Variable font weight range */
  font-variation-settings: "wght" 400, "wdth" 62.5;
  font-display: block;
-  /* Prevents FOIT */
-  src: url("/static/font/notosans_mono.woff") format("woff"),
+  src: url("../font/NotoSansMono.ttf") format("truetype"),
+  url("/static/font/notosans_mono.woff") format("woff"),
  url("../../../../tools/boostlook/notosans_mono.woff") format("woff"),
  url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype");
+  /* Metric overrides to reduce CLS on swap */
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
 }

 /* Noto Sans Mono - Fixed Weight */
@@ -762,10 +785,15 @@ html:has(.boostlook) {
  /* Fixed weight for specific use cases */
  font-stretch: 62.5% 100%;
  font-display: block;
-  /* Prevents FOIT */
-  src: url("/static/font/notosans_mono.woff") format("woff"),
+  src: url("../font/NotoSansMono.ttf") format("truetype"),
+  url("/static/font/notosans_mono.woff") format("woff"),
  url("../../../../tools/boostlook/notosans_mono.woff") format("woff"),
  url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype");
+  /* Metric overrides to reduce CLS on swap */
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
 }

 /*----------------- Font-Face Declarations end -----------------*/
@@ -892,7 +920,7 @@ body :not(pre):not([class^="L"]) > code {
 /* Base Container */
 .boostlook {
  font-family: var(--font-family-body, "Noto Sans") !important;
-  font-variation-settings: "wght" 400, "wdth" 80;
+  font-variation-settings: "wght" 350, "wdth" 80;
  background: var(--surface-background-main-base-primary, #fff);
 }

@@ -915,7 +943,7 @@ body :not(pre):not([class^="L"]) > code {
  color: var(--text-main-text-primary, #18191b);
  display: block;
  line-height: var(--typography-line-height-xl, 1.75rem);
-  margin-top: var(--padding-padding-md, 1.125rem);
+  margin-top: var(--padding-padding-xl, 2rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  margin-bottom: 0.5rem;
  font-variation-settings: "wght" 500, "wdth" 80;
@@ -1144,7 +1172,10 @@ body :not(pre):not([class^="L"]) > code {
 }

 /* Components margins */
-.boostlook .paragraph + .paragraph,
+.boostlook .paragraph + .paragraph {
+  margin-top: var(--padding-padding-md, 1rem);
+}
+
 .boostlook:not(:has(.doc)) .section > p + p,
 .boostlook:not(:has(.doc)) .chapter > p + p,
 .boostlook div.blockquote blockquote p + p,
@@ -1155,12 +1186,14 @@ body :not(pre):not([class^="L"]) > code {
 div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > p + p {
  margin-top: var(--padding-padding-3xs, 0.25rem);
 }
+.boostlook #content .admonitionblock + .tabs,
+.boostlook .paragraph + .tabs {
+  margin-top: var(--spacing-size-2md, 1.3rem);
+}

-.boostlook .paragraph + .tabs,
 .boostlook #content .paragraph + .admonitionblock,
 .boostlook #content .tabs + .paragraph,
 .boostlook #content .colist + .paragraph,
-.boostlook #content .admonitionblock + .tabs,
 .boostlook #content .admonitionblock + .admonitionblock,
 .boostlook #content .olist + .admonitionblock,
 .boostlook #content .olist + .paragraph,
@@ -1210,7 +1243,10 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 .boostlook h5 + .tabs,
 .boostlook .doc h5 + .tabs,
 .boostlook h5 + .tabs,
-.boostlook .doc h6 + .tabs,
+.boostlook .doc h6 + .tabs {
+  margin-top: var(--padding-padding-sm, 0.75rem);
+}
+
 .boostlook #content .sectionbody .olist:first-child,
 .boostlook:not(:has(.doc)) .section div.orderedlist:first-child {
  margin-top: var(--padding-padding-3xs, 0.25rem);
@@ -1242,12 +1278,6 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
  cursor: pointer;
 }

-/* Link States */
-.boostlook p a:visited:not(:hover),
-.boostlook table a:visited:not(:hover) {
-  color: var(--text-main-text-body-tetriary, #62676b);
-}
-
 /* Emphasis within code */
 .boostlook em,
 .boostlook code em {
@@ -1297,6 +1327,13 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
  border: none;
 }

+.boostlook pre code .conum[data-value]::after,
+.boostlook pre code.hljs .conum[data-value]::after,
+.boostlook .doc .content pre code .conum[data-value]::after,
+.boostlook .doc pre.highlight code .conum[data-value]::after {
+  content: "("attr(data-value)")";
+}
+
 .boostlook pre:not(:has(> code)),
 .boostlook pre:not(:has(> code)):has(p, span) {
  font-size: var(--typography-font-size-xs, 0.875rem);
@@ -1321,8 +1358,10 @@ html.dark .boostlook pre.rouge,
 html.dark .boostlook .doc .content pre,
 html.dark .boostlook .doc pre.highlight,
 html.dark .boostlook .doc .listingblock pre:not(.highlight),
-html.dark .boostlook .doc .literalblock pre {
-  background: var(--atom-one-dark-bg, #282c34);
+html.dark .boostlook .doc .literalblock pre,
+html.dark .boostlook#libraryReadMe > pre:not(:last-child),
+html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) {
+  background: var(--atom-one-dark-bg, #282c34) !important;
 }

 .boostlook .doc pre {
@@ -2171,8 +2210,8 @@ html.dark .boostlook .hljs-code {
 .boostlook #content .admonitionblock.note,
 .boostlook:not(:has(.doc)) div.note,
 .boostlook:not(:has(.doc)) .notices.note {
-  border-color: var(--border-border-blue-primary, #c2e2f4);
-  background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9);
+  border-color: var(--border-border-blue-primary, #c2e2f4); /* var(--border-border-blue-primary, #c2e2f4) */
+  background-color: var(--surface-background-main-surface-blue-primary, #f6fafd);
 }

 .boostlook #content .admonitionblock.note > table tr td.icon > *,
@@ -2185,8 +2224,8 @@ html.dark .boostlook .hljs-code {
 .boostlook #content .admonitionblock.tip,
 .boostlook:not(:has(.doc)) div.tip,
 .boostlook:not(:has(.doc)) .notices.tip {
-  border-color: var(--border-border-positive, #bdeed6);
-  background-color: var(--surface-background-states-surface-positive-primary, #f0fef7);
+  border-color: var(--border-border-positive, #f8fefb);
+  background-color: var(--colors-positive-0, rgba(240, 254, 247, 0.5));
 }
 /* .boostlook #content .admonitionblock.tip > table tr td.icon,
 .boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
@@ -2206,7 +2245,7 @@ html.dark .boostlook .hljs-code {
 .boostlook:not(:has(.doc)) div.caution,
 .boostlook:not(:has(.doc)) .notices.important {
  border-color: var(--border-border-brand-orange, #ffd897);
-  background-color: var(--surface-background-states-surface-warning-primary, #fff8f3);
+  background-color: var(--surface-background-states-surface-warning-primary, #fefcf9);
 }
 /* .boostlook #content .admonitionblock.important > table tr td.icon,
 .boostlook #content .admonitionblock.caution > table tr td.icon,
@@ -2252,10 +2291,15 @@ html.dark .boostlook .hljs-code {

 .boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
  background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9);
-  border: 1px solid var(--border-border-blue-primary, #c2e2f4);
+  border: 1px solid transparent; /* var(--border-border-blue-primary, #c2e2f4) */
  padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
  margin-left: var(--spacing-size-xl);
 }
+
+.boostlook #content .colist.arabic > table > tbody > tr td .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
+  margin-left: 0;
+}
+
 .boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) .hdlist1 {
  font-size: var(--typography-font-size-sm, 1rem);
  font-variation-settings: "wght" 600, "wdth" 62.5;
@@ -2619,7 +2663,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
  justify-content: center;
  font-family: "Noto Sans";
  font-style: normal;
-  font-variation-settings: "wght" 500, "wdth" 80;
+  font-variation-settings: "wght" 350, "wdth" 80;
  line-height: var(--typography-line-height-sm, 1rem);
  font-size: var(--typography-font-size-sm, 1rem);
  text-align: center;
@@ -2633,15 +2677,19 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 }
 .boostlook .doc code .conum[data-value] {
  background: transparent;
-  width: 24px;
-  height: 24px;
-  float: left;
+  width: auto;
+  height: auto;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: var(--text-main-text-primary, #18191b);
 }

 .boostlook .doc .conum[data-value]::after {
  content: attr(data-value)".";
  font: inherit;
 }
+
 .boostlook .doc .conum[data-value] + b {
  display: none;
 }
@@ -2675,6 +2723,11 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
  white-space: nowrap;
 }

+.boostlook .colist.arabic > table > tbody > tr > :first-child:has(.conum),
+.boostlook .colist.arabic > table > tr > :first-child:has(.conum) {
+  padding-top: 0;
+}
+
 /* Tables */
 /* Reset Antora Table Styles */
 .boostlook #content table.tableblock tr,
@@ -2924,6 +2977,11 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
  margin-top: var(--padding-padding-xs, 0.75rem);
 }

+.boostlook:not(#libraryReadMe) .image:has(> img),
+.boostlook .content:has(> img) {
+  background-color: transparent;
+}
+
 .boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) {
  display: inline-block;
  vertical-align: text-bottom;
@@ -3747,6 +3805,13 @@ html.dark .boostlook pre.rouge .cm {
  gap: 0.125rem;
 }

+.boostlook .toolbar .spirit-nav .disabled,
+.boostlook:not(:has(.doc)) .spirit-nav .disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .boostlook:not(:has(.doc)) .spirit-nav {
  padding-top: var(--padding-padding-md, 1.125rem);
  justify-content: flex-end;
@@ -3839,6 +3904,12 @@ html.dark .boostlook pre.rouge .cm {
  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
 }

+.boostlook .tablist > ul[role="tablist"] {
+  background-color: var(--colors-neutral-250, #f9f9f9);
+}
+.dark .boostlook .tablist > ul[role="tablist"] {
+  background-color: var(--colors-neutral-750, #1c1c1c);
+}
 .boostlook .tablist > ul .tab {
  position: relative;
  display: flex;
Author	SHA1	Message	Date
Julio Estrada	20ddde5333	fix: update workflow dependencies - Upgrade actions/checkout from v4 to v6 - Upgrade Python from 3.11 to 3.13	2025-11-20 18:40:00 -05:00
Julio Estrada	66401ab4d7	fix: change font-display swap to block Prevent FOUT by blocking text render until fonts load	2025-11-20 14:31:37 -05:00
Julio Estrada	cdfdff1a43	Prioritize local fonts for antora bundles Add local font paths first in @font-face src to check for fonts in antora-bundled projects before remote fallbacks. Required before boostorg/website-v2-docs#545 can merge.	2025-11-19 23:27:51 -05:00
Julio Estrada	c8ea8e2061	fix foit: swap, fallbacks, metric overrides (#145 ) - use font-display: swap to avoid invisible text - add system fallbacks for body/code stacks - add size-adjust/ascent/descent/line-gap to reduce cls refs: issue #145	2025-09-29 16:45:47 -04:00
Julio Estrada	5454b1c038	remove visited link color overrides	2025-09-16 14:34:52 -04:00
Julio Estrada	34fb6a94b3	fix: update font source to noto sans italic	2025-09-13 18:30:00 -04:00
Julio Estrada	b4306e4b94	Fix dark mode background for library readme	2025-07-18 12:39:16 -04:00
Tino	36d2ef80b0	Changed the font-variation-settings value for .boostlook .doc .conum[data-value] to "wght" 350, "wdth" 80	2025-07-07 12:05:53 -04:00
Julio Estrada	6ab075ff7f	Add disabled state styles for navigation	2025-07-03 16:02:05 -04:00
Tino	38452398bb	Added a background for the tabs Dark and light theme https://prnt.sc/rXcjFgvOTX7Y https://prnt.sc/gT8x9Hto1yeL	2025-07-03 09:08:08 -04:00
Tino	95ac38a2af	Added a background for the tabs Dark and light theme https://prnt.sc/rXcjFgvOTX7Y https://prnt.sc/gT8x9Hto1yeL	2025-07-03 09:08:08 -04:00
Tino	a588568d28	Made the callout boxes lighter and removed the borders Notes https://prnt.sc/jMmRqNA3smzv Tips https://prnt.sc/JOf8-1WyjlsZ Important https://prnt.sc/tsyMK-BZuOb-	2025-07-03 09:08:08 -04:00
Tino	db0140e77c	Added a 1.3rem spacing above headers https://prnt.sc/wtzXaN00stUT Added #f9f9f9 for light and #1c1c1c for dark. Also added the margin-top for these blocks to 1.3rem https://prnt.sc/07r8Ha27-jil https://prnt.sc/Qa3zqGYOqIGy Added more space between paragraphs , from 0.25 rem to 1rem https://prnt.sc/pu54b-EtLXmY Added boostlook font variation settings “wght” 350 instead of 400	2025-07-03 09:08:08 -04:00
Tino	4071795de1	Removed the previously added numbered list formatting in the code block. Added brackets to match the styles in the tabs next to it. https://prnt.sc/thfGrbTB4qo-	2025-07-02 10:47:49 -04:00
Tino	14c9e079a0	Removed the background of the image in tables and tabs https://prnt.sc/izgdjnKoXPRw Aligned correctly Note block in table https://prnt.sc/BBLqUMoFztFI	2025-07-02 10:47:49 -04:00