Unify docs site visual style: reskin Material to match custom HTML pages

README.md

@@ -1,6 +1,6 @@
 # DAQIRI - Data Acquisition for Integrated Real-time Instruments
 
-<img src="docs/logo.svg" alt="DAQIRI" width="220"/>
+<img src="docs/images/logo.svg" alt="DAQIRI" width="220"/>
 
 **Send and receive Ethernet packets into CPU and GPU memory at hundreds of Gbps with a simple API.** DAQIRI (Data Acquisition for Integrated Real-time Instruments) connects data acquisition systems to NVIDIA GPUs for real-time processing and AI, paving the way for autonomy of the next generation of scientific and industrial instruments.
 

docs/daqiri-api.html

@@ -147,7 +147,7 @@
   <nav id="navbar">
     <div class="nav-inner">
       <a class="nav-logo" href="index.html" style="text-decoration:none;">
-        <img src="logo.svg" alt="DAQIRI" style="height:36px;width:auto;" />
+        <img src="images/logo.svg" alt="DAQIRI" style="height:36px;width:auto;" />
         <span class="nav-logo-text">DAQIRI</span>
         <span class="nav-logo-badge">NVIDIA</span>
       </a>

docs/index.html

@@ -197,7 +197,7 @@
   <nav id="navbar">
     <div class="nav-inner">
       <a class="nav-logo" href="#hero">
-        <img src="logo.svg" alt="DAQIRI" style="height:36px;width:auto;" />
+        <img src="images/logo.svg" alt="DAQIRI" style="height:36px;width:auto;" />
         <span class="nav-logo-text">DAQIRI</span>
         <span class="nav-logo-badge">NVIDIA</span>
       </a>
@@ -250,7 +250,7 @@ <h1 class="hero-title">DAQIRI — Command the<br>Data Deluge at the <span class=
         </div>
       </div>
       <div class="hero-logo-wrap">
-        <img src="logo.svg" alt="DAQIRI — sensor connected to GPU infrastructure" />
+        <img src="images/logo.svg" alt="DAQIRI — sensor connected to GPU infrastructure" />
       </div>
       </div>
     </div>
@@ -265,7 +265,7 @@ <h2 class="section-title">Closing the Gap Between Sensor and GPU</h2>
         <p class="section-desc">Scientific and industrial instruments generate data that is richest at the source — before it is filtered, decimated, or summarized. DAQIRI places NVIDIA GPU hardware directly in that data path, forging a tight bond between upstream sensors, their data converters, and the NVIDIA compute ecosystem. The result is a new foundation for developers: the ability to work with instrument data in its rawest form, at wire speed, and to build a new class of autonomous experiments where AI can observe phenomena directly at the source, augment human analysis, and steer experiments in real time. <span style="color:var(--nv-green);font-style:italic;">Streaming Ethernet data in, GPU tensor out.</span></p>
 
         <!-- AI Native DAQ Architecture SVG -->
-        <img src="architecture.svg" alt="AI Native DAQ Architecture" style="width:100%;max-width:400px;display:block;margin:0 auto;"/>
+        <img src="images/architecture.svg" alt="AI Native DAQ Architecture" style="width:100%;max-width:400px;display:block;margin:0 auto;"/>
       </div>
       <div class="features-grid">
         <div class="feature-card">
@@ -644,7 +644,7 @@ <h2 style="text-align:center;">Connect Your Sensors to the NVIDIA Ecosystem</h2>
       <div class="footer-inner">
         <div class="footer-brand">
           <div class="nav-logo">
-            <img src="logo.svg" alt="DAQIRI" style="height:32px;width:auto;" />
+            <img src="images/logo.svg" alt="DAQIRI" style="height:32px;width:auto;" />
             <span class="nav-logo-text">DAQIRI</span>
             <span class="nav-logo-badge">NVIDIA</span>
           </div>

docs/stylesheets/extra.css

@@ -1,38 +1,185 @@
-/* ── NVIDIA dark theme with green accents ───────────────────────────── */
+/* ── NVIDIA dark theme — Material override sheet ────────────────────── */
+/* Mirrors the palette and typography of docs/daqiri-api.html and       */
+/* docs/index.html so Material-rendered pages share their visual style. */
 
 :root {
   --nv-green:   #76b900;
   --nv-green-d: #5a8f00;
-  --nv-green-l: #8fd400;
+  --nv-green-l: #a0d000;
 
-  --md-accent-fg-color: #76b900;
-  --md-typeset-a-color: #76b900;
+  --nv-bg-dark:   #0a0a0a;
+  --nv-bg-card:   #111111;
+  --nv-bg-card2:  #161616;
+  --nv-border:    #222222;
+  --nv-text-pri:  #f0f0f0;
+  --nv-text-mut:  #888888;
+  --nv-text-dim:  #555555;
+  --nv-radius:    8px;
 }
 
-/* ── Header: solid black ───────────────────────────────────────────── */
+/* ── Map design tokens onto Material's documented variables ──────────── */
+[data-md-color-scheme="slate"] {
+  --md-default-bg-color:           var(--nv-bg-dark);
+  --md-default-fg-color:           var(--nv-text-pri);
+  --md-default-fg-color--light:    var(--nv-text-mut);
+  --md-default-fg-color--lighter:  var(--nv-text-dim);
+  --md-code-bg-color:              #0d0d0d;
+  --md-code-fg-color:              #cccccc;
+  --md-primary-fg-color:           #000000;
+  --md-accent-fg-color:            var(--nv-green);
+  --md-typeset-a-color:            var(--nv-green);
+}
+
+/* ── Header / Tabs / Footer ──────────────────────────────────────────── */
 [data-md-color-scheme="slate"] .md-header {
   background: #000;
 }
-
-/* ── Tabs bar: dark charcoal ───────────────────────────────────────── */
+/* Render the DAQIRI logo (docs/images/logo.svg) at the same 36px height  */
+/* the custom HTML pages use, rather than Material's smaller default.     */
+.md-header__button.md-logo img,
+.md-header__button.md-logo svg {
+  height: 36px;
+  width: auto;
+}
 [data-md-color-scheme="slate"] .md-tabs {
   background: #1a1a1a;
 }
+[data-md-color-scheme="slate"] .md-tabs__link {
+  color: var(--nv-text-mut);
+  opacity: 1;
+}
+[data-md-color-scheme="slate"] .md-tabs__link:hover,
+[data-md-color-scheme="slate"] .md-tabs__link--active {
+  color: var(--nv-text-pri);
+}
+[data-md-color-scheme="slate"] .md-footer {
+  background: var(--nv-bg-card);
+  border-top: 1px solid var(--nv-border);
+}
+
+/* ── Typography ──────────────────────────────────────────────────────── */
+/* Shrink the typeset baseline (Material's default is 0.8em). Headings    */
+/* are sized in rem (absolute) so they reduce independently below.        */
+[data-md-color-scheme="slate"] .md-typeset {
+  font-size: 0.72rem;
+}
+[data-md-color-scheme="slate"] .md-typeset h1 {
+  font-size: clamp(1.26rem, 2.8vw, 2.1rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  color: var(--nv-text-pri);
+}
+[data-md-color-scheme="slate"] .md-typeset h2 {
+  font-size: clamp(0.91rem, 1.75vw, 1.33rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+[data-md-color-scheme="slate"] .md-typeset h3 {
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+[data-md-color-scheme="slate"] .md-typeset h4 {
+  font-size: 0.78rem;
+  font-weight: 600;
+}
 
-/* ── Links: NVIDIA green ───────────────────────────────────────────── */
+/* ── Links ───────────────────────────────────────────────────────────── */
 [data-md-color-scheme="slate"] .md-typeset a {
   color: var(--nv-green);
 }
 [data-md-color-scheme="slate"] .md-typeset a:hover {
   color: var(--nv-green-l);
 }
 
-/* ── Active nav and TOC items ──────────────────────────────────────── */
+/* ── Code (inline only — don't double-decorate code inside <pre>) ────── */
+[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
+  background: #1a1a1a;
+  border: 1px solid var(--nv-border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: var(--nv-green-l);
+  font-size: 0.85em;
+}
+
+/* ── Code blocks ─────────────────────────────────────────────────────── */
+[data-md-color-scheme="slate"] .md-typeset pre > code {
+  background: #0d0d0d;
+  border: 1px solid var(--nv-border);
+  border-radius: var(--nv-radius);
+  color: #cccccc;
+  font-size: 0.72rem;
+  line-height: 1.65;
+}
+[data-md-color-scheme="slate"] .md-typeset .highlight > pre,
+[data-md-color-scheme="slate"] .md-typeset .highlighttable .linenodiv pre {
+  background: #0d0d0d;
+}
+
+/* ── Tables ──────────────────────────────────────────────────────────── */
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
+  border: 1px solid var(--nv-border);
+  background: var(--nv-bg-card);
+}
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
+  background: var(--nv-bg-card2);
+  color: var(--nv-text-dim);
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border-bottom: 1px solid var(--nv-border);
+}
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
+  border-bottom: 1px solid #181818;
+  color: var(--nv-text-mut);
+}
+
+/* ── Sidebar / Navigation ────────────────────────────────────────────── */
+[data-md-color-scheme="slate"] .md-nav__link {
+  color: var(--nv-text-mut);
+  border-left: 2px solid transparent;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+[data-md-color-scheme="slate"] .md-nav__link:hover {
+  color: var(--nv-text-pri);
+  background: rgba(255, 255, 255, 0.03);
+}
 [data-md-color-scheme="slate"] .md-nav__link--active {
   color: var(--nv-green) !important;
+  border-left: 2px solid var(--nv-green);
+  background: rgba(118, 185, 0, 0.06);
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────── */
+[data-md-color-scheme="slate"] .md-typeset .md-button {
+  background: transparent;
+  color: var(--nv-text-pri);
+  border: 1.5px solid var(--nv-border);
+  border-radius: var(--nv-radius);
+  padding: 0.5rem 1.25rem;
+  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
+  border-color: #444;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--nv-text-pri);
+}
+[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
+  background: var(--nv-green);
+  color: #000;
+  border-color: var(--nv-green);
+}
+[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
+  background: var(--nv-green-l);
+  border-color: var(--nv-green-l);
+  color: #000;
 }
 
-/* ── Admonition accent tweaks ──────────────────────────────────────── */
+/* ── Admonitions ─────────────────────────────────────────────────────── */
+/* note (existing, kept) */
 [data-md-color-scheme="slate"] .md-typeset .admonition.note,
 [data-md-color-scheme="slate"] .md-typeset details.note {
   border-color: var(--nv-green);
@@ -46,12 +193,41 @@
   color: var(--nv-green);
 }
 
-/* ── Footer ────────────────────────────────────────────────────────── */
-[data-md-color-scheme="slate"] .md-footer {
-  background: #111;
+/* warning — amber */
+[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
+[data-md-color-scheme="slate"] .md-typeset details.warning {
+  border-color: rgba(255, 193, 7, 0.4);
+}
+[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title,
+[data-md-color-scheme="slate"] .md-typeset .warning > summary {
+  background-color: rgba(255, 193, 7, 0.07);
+}
+[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title::before,
+[data-md-color-scheme="slate"] .md-typeset .warning > summary::before {
+  color: #ffcb6b;
+}
+
+/* info / tip — soft blue */
+[data-md-color-scheme="slate"] .md-typeset .admonition.info,
+[data-md-color-scheme="slate"] .md-typeset details.info,
+[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
+[data-md-color-scheme="slate"] .md-typeset details.tip {
+  border-color: rgba(130, 170, 255, 0.4);
+}
+[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
+[data-md-color-scheme="slate"] .md-typeset .info > summary,
+[data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title,
+[data-md-color-scheme="slate"] .md-typeset .tip > summary {
+  background-color: rgba(130, 170, 255, 0.07);
+}
+[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title::before,
+[data-md-color-scheme="slate"] .md-typeset .info > summary::before,
+[data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title::before,
+[data-md-color-scheme="slate"] .md-typeset .tip > summary::before {
+  color: #aac4ff;
 }
 
-/* ── Platform tabs (IGX Orin / DGX Spark) — enlarged labels ────────── */
+/* ── Platform tabs (IGX Orin / DGX Spark) — enlarged labels ─────────── */
 /* Scoped to the .platform-tabs wrapper in system_configuration.md and  */
 /* limited to the wrapper's direct tabbed-set so nested sub-tabs        */
 /* (tune_system.py / manual, One-time / Persistent, …) are unaffected.  */

mkdocs.yml

@@ -5,13 +5,24 @@ repo_name: nvidia/daqiri
 
 theme:
   name: material
+  logo: images/logo.svg
+  favicon: images/logo.png
   palette:
-    scheme: slate
-    primary: black
-    accent: light green
+    - scheme: slate
+      primary: black
+      accent: light green
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
+    - scheme: default
+      primary: black
+      accent: light green
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
   font:
-    text: Roboto
-    code: Roboto Mono
+    text: Inter
+    code: JetBrains Mono
   icon:
     repo: fontawesome/brands/github
   features: