feat: add search input and results dropdown styling (#142)

- Search input with inline SVG icon
  - Responsive dropdown positioning for mobile, tablet, and desktop
  - Mobile layout with full-width search on second row

.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: |

boostlook.css

@@ -281,7 +281,7 @@
 
   /* New Look Typography */
   --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-family-code: "Monaspace Neon", 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;
@@ -709,7 +709,7 @@ html:has(.boostlook) {
  * Typography Configuration
  * The framework uses Noto Sans family as its primary font system:
  * 1. Noto Sans Display: Main text font with variable weight support
- * 2. Noto Sans Mono: Monospace font for code blocks
+ * 2. Monaspace Neon: Monospace font for code blocks
  *
  * Font Loading Strategy:
  * - Multiple source paths for resilient loading
@@ -723,13 +723,12 @@ html:has(.boostlook) {
   font-style: normal;
   font-weight: 100 900;
   font-stretch: 62.5% 100%;
-  /* Variable font weight range */
   font-variation-settings: "wght" 400, "wdth" 62.5;
-  font-display: swap;
-  src: 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 */
+  font-display: block;
+  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");
   size-adjust: 100%;
   ascent-override: 92%;
   descent-override: 22%;
@@ -742,50 +741,44 @@ html:has(.boostlook) {
   font-style: italic;
   font-weight: 100 900;
   font-stretch: 62.5% 100%;
-  /* Variable font weight range */
   font-variation-settings: "wght" 400, "wdth" 62.5;
-  font-display: swap;
-  src: 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 */
+  font-display: block;
+  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");
   size-adjust: 100%;
   ascent-override: 92%;
   descent-override: 22%;
   line-gap-override: 0%;
 }
 
-/* Noto Sans Mono - Variable Weight */
+/* Monaspace Neon - Regular */
 @font-face {
-  font-family: "Noto Sans Mono";
-  font-style: normal;
-  font-weight: 100 900;
-  font-stretch: 62.5% 100%;
-  /* Variable font weight range */
-  font-variation-settings: "wght" 400, "wdth" 62.5;
-  font-display: swap;
-  src: 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 */
-@font-face {
-  font-family: "Noto Sans Mono";
+  font-family: "Monaspace Neon";
   font-style: normal;
   font-weight: 400;
-  /* Fixed weight for specific use cases */
-  font-stretch: 62.5% 100%;
-  font-display: swap;
-  src: 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 */
+  font-display: block;
+  src: url("../font/MonaspaceNeonFrozen-Regular.ttf") format("truetype"),
+    url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"),
+    url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"),
+    url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2");
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
+/* Monaspace Xenon - Italic */
+@font-face {
+  font-family: "Monaspace Xenon";
+  font-style: italic;
+  font-weight: 400;
+  font-display: block;
+  src: url("../font/MonaspaceXenonFrozen-Italic.ttf") format("truetype"),
+    url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"),
+    url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"),
+    url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2");
   size-adjust: 100%;
   ascent-override: 92%;
   descent-override: 22%;
@@ -868,6 +861,8 @@ h6 {
 body :not(pre):not([class^="L"]) > code {
   /* ovverrides builtin colors */
   color: var(--text-code-neutral, #0d0e0f);
+  border: 0;
+  background-color: unset;
 }
 
 /* Stacking context */
@@ -1275,8 +1270,16 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 }
 
 /* Emphasis within code */
-.boostlook em,
-.boostlook code em {
+.boostlook code em,
+.boostlook code i,
+.boostlook pre em,
+.boostlook pre i {
+  font-family: "Monaspace Xenon", monospace;
+  font-size: inherit;
+  font-style: italic;
+}
+
+.boostlook em {
   font-family: inherit;
   font-size: inherit;
   font-style: italic;
@@ -1286,6 +1289,20 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 .boostlook b,
 .boostlook strong {
   font-variation-settings: "wght" 600, "wdth" 80;
+  text-shadow: none;
+}
+
+/* Comments within code (inline and blocks) */
+.boostlook code span.c,
+.boostlook code span.ch,
+.boostlook code span.cm,
+.boostlook code span.cp,
+.boostlook code span.cpf,
+.boostlook code span.c1,
+.boostlook code span.cs,
+.boostlook code span.comment {
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
 }
 
 /* Code Block Styling */
@@ -1304,7 +1321,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 }
 
 .boostlook code {
-  font-family: var(--font-family-code, "Noto Sans Mono"), monospace;
+  font-family: var(--font-family-code, "Monaspace Neon"), monospace;
 }
 
 .boostlook table thead code {
@@ -1316,6 +1333,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 .boostlook .doc .content pre code,
 .boostlook .doc pre.highlight code {
   font-size: var(--typography-font-size-xs, 0.875rem);
+  font-feature-settings: "calt" 1, "liga" 0;
   line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
   letter-spacing: var(--spacing-size-size-0, 0rem);
   color: var(--text-main-text-primary, #18191b);
@@ -1342,10 +1360,23 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
 .boostlook .doc .content pre,
 .boostlook .doc pre.highlight,
 .boostlook .doc .listingblock pre:not(.highlight),
-.boostlook .doc .literalblock pre {
+.boostlook .doc .literalblock pre
+.boostlook .literalblock pre,
+.boostlook .listingblock > .content > pre,
+.boostlook .listingblock > .content > pre:not(.highlight),
+.boostlook .literalblock > .content > pre:not(.highlight),
+.boostlook .exampleblock > .content,
+.boostlook .sidebarblock {
   padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
-  background: var(--atom-one-light-bg, #fafafa);
+  background: var(--atom-one-light-bg, #fafafa) !important;
   border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+
+.boostlook .sidebarblock {
+  margin-top: 20px;
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
 }
 
 /* Dark theme code block background */
@@ -1356,7 +1387,14 @@ html.dark .boostlook .doc pre.highlight,
 html.dark .boostlook .doc .listingblock pre:not(.highlight),
 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)) {
+html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)),
+html.dark .boostlook .doc .literalblock pre,
+html.dark .boostlook .literalblock pre,
+html.dark .boostlook .literalblock > .content > pre:not(.highlight),
+html.dark .boostlook .listingblock > .content > pre,
+html.dark .boostlook .sidebarblock,
+html.dark .boostlook .exampleblock > .content,
+html.dark .boostlook .listingblock > .content > pre {
   background: var(--atom-one-dark-bg, #282c34) !important;
 }
 
@@ -1490,8 +1528,10 @@ html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td p
 }
 
 .boostlook .highlight pre,
-.boostlook .content:has(> pre) pre.highlight {
+.boostlook .content:has(> pre) pre.highlight,
+.boostlook .literalblock > .content > pre:not(.highlight) {
   border: 1px solid var(--border-border-secondary, #d5d7d9);
+  border-radius: 0;
 }
 .boostlook .content:has(> pre):has(> .source-toolbox) pre {
   /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
@@ -1771,12 +1811,14 @@ html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td p
 .boostlook pre span.sh,
 .boostlook pre span.comment,
 .boostlook .hljs-comment,
+.boostlook .cpp-comment,
 .boostlook .hljs-quote,
 .boostlook .hljs-addition,
 .boostlook .hljs-built_in,
 .boostlook .hljs-bullet,
 .boostlook .hljs-code {
   color: var(--atom-one-light-comment, #a0a1a7);
+  font-family: "Monaspace Xenon", monospace;
   font-style: italic;
 }
 
@@ -1792,12 +1834,15 @@ html.dark .boostlook pre span.sd,
 html.dark .boostlook pre span.sh,
 html.dark .boostlook pre span.comment,
 html.dark .boostlook .hljs-comment,
+html.dark .boostlook .cpp-comment,
 html.dark .boostlook .hljs-quote,
 html.dark .boostlook .hljs-addition,
 html.dark .boostlook .hljs-built_in,
 html.dark .boostlook .hljs-bullet,
 html.dark .boostlook .hljs-code {
   color: var(--atom-one-dark-comment, #5c6370);
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
 }
 
 .boostlook pre span.s,
@@ -1900,6 +1945,8 @@ html.dark .boostlook .hljs-code {
 .boostlook .doc .verseblock blockquote,
 .boostlook div.blockquote blockquote {
   margin: 0;
+  font: inherit;
+  color: inherit;
 }
 
 .boostlook .quoteblock blockquote .paragraph,
@@ -1919,6 +1966,10 @@ html.dark .boostlook .hljs-code {
   color: inherit;
 }
 
+.boostlook .quoteblock blockquote:before {
+  content: none;
+}
+
 /* Pagination */
 .boostlook nav.pagination {
   border-top: revert;
@@ -2221,7 +2272,7 @@ html.dark .boostlook .hljs-code {
 .boostlook:not(:has(.doc)) div.tip,
 .boostlook:not(:has(.doc)) .notices.tip {
   border-color: var(--border-border-positive, #f8fefb);
-  background-color: var(--colors-positive-0, rgba(240, 254, 247, 0.5));
+  background-color: var(--surface-background-states-surface-positive-primary, #f6fafd);
 }
 /* .boostlook #content .admonitionblock.tip > table tr td.icon,
 .boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
@@ -2377,7 +2428,7 @@ html.dark .boostlook .hljs-code {
 .boostlook .dlist dl dt code,
 .boostlook:not(:has(.doc)) .variablelist dl dt code {
   font-variation-settings: "wght" 600, "wdth" 80;
-  font-family: var(--font-family-code, 'Noto Sans Mono');
+  font-family: var(--font-family-code, 'Monaspace Neon');
 }
 
 .boostlook .dlist dl dd,
@@ -3176,6 +3227,7 @@ html:has(#docsiframe)::-webkit-scrollbar {
 /* TOC Scrolling */
 .boostlook #toc.toc2 {
   overflow-y: auto;
+  scrollbar-color: inherit;
 }
 /* TOC Positioning */
 .boostlook #toc.toc2,
@@ -3498,6 +3550,7 @@ html.is-clipped--nav:has(.boostlook) div#content {
 .boostlook pre.rouge .c1,
 .boostlook pre.rouge .cm { /* Comments */
   color: var(--atom-one-light-comment, #a0a1a7);
+  font-family: "Monaspace Xenon", monospace;
   font-style: italic;
 }
 
@@ -3529,6 +3582,7 @@ html.dark .boostlook pre.rouge .c,
 html.dark .boostlook pre.rouge .c1,
 html.dark .boostlook pre.rouge .cm {
   color: var(--atom-one-dark-comment, #5c6370);
+  font-family: "Monaspace Xenon", monospace;
   font-style: italic;
 }
 
@@ -3949,6 +4003,209 @@ html.dark .boostlook pre.rouge .cm {
   background-color: transparent;
 }
 
+/* Search Field Container */
+#search-field {
+  display: flex;
+  position: relative;
+}
+
+/* Search Input */
+#search-input {
+  padding: 0.15rem 0.75rem 0.15rem 1.75rem !important;
+  border: 1px solid var(--border-border-secondary);
+  border-radius: 6px;
+  background-color: var(--surface-background-main-surface-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 0.35rem center;
+  background-size: 16px 16px;
+  color: var(--text-main-text-body-primary);
+  font-family: inherit;
+  font-size: 1rem !important; /* 16px minimum prevents iOS zoom on focus */
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+#search-input::placeholder {
+  color: var(--text-main-text-body-tetriary);
+}
+
+#search-input:focus {
+  outline: none;
+  border-color: var(--border-border-blue-primary);
+  box-shadow: 0 0 0 3px var(--colors-blue-50);
+}
+
+#search-input:disabled {
+  background: var(--colors-neutral-100);
+  color: var(--text-main-text-body-tetriary);
+  cursor: not-allowed;
+}
+
+/* Results Dropdown */
+.search-result-dropdown-menu {
+  position: absolute;
+  z-index: 100;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  min-width: 400px;
+  border-radius: 8px;
+  background: var(--surface-background-main-base-primary);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.search-result-dataset {
+  padding: 0.5rem;
+  border: 1px solid var(--border-border-secondary);
+  border-radius: 8px;
+  min-width: 580px;
+  max-height: calc(100vh - 6rem);
+  overflow: auto;
+}
+
+/* Result Component Header */
+.search-result-component-header {
+  padding: 0.5rem 0.75rem;
+  margin: 0.25rem 0;
+  border-bottom: 1px solid var(--border-border-secondary);
+  color: var(--text-main-text-body-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+/* Result Item */
+.search-result-item {
+  display: flex;
+  margin: 0.25rem 0;
+  border-radius: 6px;
+}
+
+.search-result-item:hover {
+  background: var(--colors-neutral-50);
+}
+
+.search-result-item .no-result {
+  padding: 1rem;
+  color: var(--text-main-text-body-tetriary);
+  text-align: center;
+}
+
+/* Result Document Title (Left Column) */
+.search-result-document-title {
+  width: 25%;
+  padding: 0.625rem 0.75rem;
+  border-right: 1px solid var(--border-border-secondary);
+  color: var(--text-main-text-body-tetriary);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+/* Result Document Hit (Right Column) */
+.search-result-document-hit {
+  flex: 1;
+  color: var(--text-main-text-body-secondary);
+  font-size: 0.8125rem;
+}
+
+.search-result-document-hit > a {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.search-result-document-hit > a:hover {
+  background: transparent;
+}
+
+.search-result-document-hit .search-result-section-title {
+  margin-bottom: 0.25rem;
+  color: var(--text-main-text-body-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.search-result-document-hit .search-result-highlight {
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  background: var(--colors-blue-50);
+  color: var(--text-main-text-link-blue);
+  font-weight: 500;
+}
+
+/* Search Responsive: Mobile (< 768px) */
+@media screen and (max-width: 767px) {
+  .boostlook .toolbar {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .search-container {
+    order: 99;
+    flex: 1 0 100%;
+  }
+
+  #search-input {
+    width: 100% !important;
+    min-width: unset;
+    font-size: 1rem !important; /* Prevents iOS zoom on focus */
+  }
+
+  .search-result-dropdown-menu {
+    position: fixed;
+    top: 6rem;
+    left: 1rem;
+    right: 1rem;
+    min-width: unset;
+    max-width: unset;
+    width: auto;
+  }
+
+  .search-result-dataset {
+    min-width: unset;
+  }
+}
+
+/* Search Responsive: Tablet (768px - 1023px) */
+@media screen and (min-width: 768px) {
+  #search-input {
+    width: unset !important;
+    min-width: unset !important;
+  }
+
+  .search-result-dropdown-menu {
+    position: fixed;
+    top: 4rem;
+    left: calc(var(--main-max-width-leftbar) + 1rem);
+    right: 1rem;
+    min-width: unset;
+    max-width: unset;
+    width: auto;
+  }
+
+  .search-result-dataset {
+    min-width: unset;
+  }
+}
+
+/* Search Responsive: Desktop (1024px+) */
+@media screen and (min-width: 1024px) {
+  #search-input {
+    min-width: 200px !important;
+    z-index: 1001;
+  }
+
+  .search-result-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: auto;
+    right: 0;
+    width: clamp(530px, 45vw, 600px);
+  }
+}
+
 /*----------------- Styles specific to Antora Templates end -----------------*/
 
 /*---------- Quickbook docs styling fixes -----------*/