@vantagecompute/docusaurus-theme 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vantagecompute/docusaurus-theme",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Shared Vantage Compute Docusaurus theme: design system, brand assets, and common theme overrides for all vantagecompute documentation sites.",
   "license": "MIT",
   "main": "lib/index.cjs",

package/src/css/custom.css

@@ -366,20 +366,49 @@ div[class^='codeBlockTitle'] {
 }
 
 /* ── Tables ────────────────────────────────────────────────────────── */
+/* Every markdown table renders inside `.table-scroll` (src/theme/MDXComponents),
+   which carries the rounded frame and scrolls horizontally. The table itself
+   keeps its natural width. The old `display: table; overflow: hidden` on the
+   table removed Docusaurus's own overflow scrolling, and a four-column
+   reference table on a 345px phone column squeezed to 61px columns with
+   171px rows. Cells are capped at 60ch so one long description cannot force
+   a 3000px scroll. */
+.markdown .table-scroll,
+article .table-scroll {
+  margin: 14px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ink-100);
+  border-radius: 8px;
+}
+
+.markdown .table-scroll:focus-visible,
+article .table-scroll:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
 .markdown table,
 article table {
   display: table;
   width: 100%;
+  min-width: max-content;
   border-collapse: collapse;
   font-size: 13px;
-  margin: 14px 0;
+  margin: 0;
   background: var(--ifm-background-surface-color);
-  border: 1px solid var(--ink-100);
-  border-radius: 8px;
-  overflow: hidden;
+  border: 0;
   box-shadow: none;
 }
 
+.markdown table td,
+.markdown table th,
+article table td,
+article table th {
+  max-width: 60ch;
+}
+
 .markdown table th,
 article table th {
   font-weight: 600;
@@ -441,7 +470,11 @@ article table td code {
 }
 
 .markdown li::marker {
-  color: var(--ink-300);
+  /* ink-300 was 2.5:1 against the page in both modes. ink-400 is the ramp's
+     fixed point (#6b7494 in both modes) and clears the 3:1 non-text floor:
+     4.6:1 light, 4.1:1 dark. It stays decoration-only; see the note on
+     .sidebar-section-label for why it is not used for text. */
+  color: var(--ink-400);
 }
 
 /* Tab lists should have no left padding (override .markdown ul) */
@@ -450,6 +483,17 @@ article table td code {
   margin-bottom: 0;
 }
 
+/* Infima scrolls the strip, and a strip that ends flush with the edge hides
+   the tabs past it with nothing to say they exist: two of six on a phone.
+   Wrap instead, so every tab is on screen in at most two rows. */
+@media (max-width: 996px) {
+  .markdown .tabs {
+    flex-wrap: wrap;
+    overflow-x: visible;
+    row-gap: 2px;
+  }
+}
+
 /* ── Provider showcase (On-Premises clusters) ───────────────────────── */
 .provider-showcase {
   display: grid;
@@ -645,7 +689,7 @@ html[data-theme='dark'] .provider-showcase-item {
 .guide-meta-label {
   display: block;
   margin-bottom: 0.25rem;
-  color: var(--ink-400);
+  color: var(--ink-500);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -877,8 +921,66 @@ html[data-theme='dark'] .provider-showcase-item {
   color: var(--vantage-navbar-link-hover) !important;
 }
 
-@media (max-width: 1024px) {
-  .navbar__logo { display: none !important; }
+/* The logo used to be hidden at <=1024px, which with an empty navbar.title
+   left every phone and tablet with no brand at all. Keep it; shrink it a
+   little where the hamburger shares the row. */
+@media (max-width: 996px) {
+  .navbar__logo {
+    height: 28px;
+  }
+}
+
+/* Touch targets below the layout break. WCAG 2.5.8 asks for 24px minimum;
+   44px is the comfortable size. The drawer close button measured 21px,
+   sidebar rows and carets 30px, the hamburger 30px. Padding, not larger
+   glyphs, so the visuals do not change. Infima's drawer is also 83vw, which
+   on a 768px tablet is a 637px menu for a list of 14px rows. */
+@media (max-width: 996px) {
+  :root {
+    --ifm-navbar-sidebar-width: min(83vw, 360px);
+  }
+
+  .navbar__toggle {
+    padding: 7px;
+    margin: -7px 0;
+  }
+
+  .navbar-sidebar__close {
+    padding: 12px;
+    margin-right: -12px;
+  }
+
+  .navbar-sidebar .menu__link {
+    padding: 10px 12px;
+  }
+
+  .navbar-sidebar .menu__caret {
+    padding: 12px 10px;
+  }
+
+  .breadcrumbs__link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+  }
+
+  .theme-doc-toc-mobile > button {
+    min-height: 44px;
+  }
+}
+
+/* Two 165px pagination cards side by side on a phone truncate their titles.
+   Infima pins the next card to `grid-column: 2 / 3`, which would open an
+   implicit second track even with one column declared, so it is reset too. */
+@media (max-width: 600px) {
+  .pagination-nav {
+    grid-template-columns: 1fr;
+  }
+
+  .pagination-nav__link--next {
+    grid-column: auto;
+    text-align: left;
+  }
 }
 
 /* ── Sidebar (left) ────────────────────────────────────────────────── */
@@ -1029,7 +1131,7 @@ html[data-theme='dark'] .provider-showcase-item {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--ink-400);
+  color: var(--ink-500);
   margin-bottom: 10px;
   content: 'On this page';
 }
@@ -1085,7 +1187,7 @@ html[data-theme='dark'] .provider-showcase-item {
 }
 
 .breadcrumbs__link {
-  color: var(--ink-400);
+  color: var(--ink-500);
   font-weight: 500;
   border-bottom: 0 !important;
 }
@@ -1210,7 +1312,7 @@ a.button--secondary:focus {
 }
 
 .pagination-nav__sublabel {
-  color: var(--ink-400);
+  color: var(--ink-500);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -1378,7 +1480,7 @@ details summary[onclick]:hover {
   --docsearch-spacing:                12px;
   --docsearch-icon-stroke-width:      1.4;
   --docsearch-highlight-color:        var(--iris-700);
-  --docsearch-muted-color:            var(--ink-400);
+  --docsearch-muted-color:            var(--ink-500);
   /* Backdrop */
   --docsearch-container-background:   rgba(11, 16, 32, 0.48);
   /* Modal */
@@ -1407,7 +1509,7 @@ details summary[onclick]:hover {
   --docsearch-primary-color:          #818cf8;
   --docsearch-text-color:             var(--ink-700);
   --docsearch-highlight-color:        #818cf8;
-  --docsearch-muted-color:            var(--ink-400);
+  --docsearch-muted-color:            var(--ink-500);
   /* Backdrop */
   --docsearch-container-background:   rgba(0, 0, 0, 0.65);
   /* Modal */
@@ -1501,7 +1603,8 @@ button.DocSearch-Button {
 .DocSearch-Button-Key {
   background: transparent !important;
   box-shadow: none !important;
-  color: rgba(255, 255, 255, 0.7) !important;
+  /* .7 measured 3.91:1 on the keys' doubly tinted background; .85 is 5.1:1. */
+  color: rgba(255, 255, 255, 0.85) !important;
   font-family: var(--ifm-font-family-monospace) !important;
   font-size: 10px !important;
   font-weight: 500 !important;
@@ -1510,30 +1613,6 @@ button.DocSearch-Button {
   line-height: 1 !important;
 }
 
-/* Medium: hide AskAI, shrink search pill */
-@media (max-width: 1050px) {
-  .navbar__items [data-navbar-ask-ai] { display: none !important; }
-
-  .DocSearch-Button {
-    min-width: 180px !important;
-  }
-}
-
-/* Small: search pill drops to icon-only */
-@media (max-width: 800px) {
-  .DocSearch-Button {
-    min-width: 0 !important;
-    width: 36px !important;
-    padding: 0 !important;
-    justify-content: center !important;
-  }
-  .DocSearch-Button-Placeholder,
-  .DocSearch-Button-Keys { display: none !important; }
-  .DocSearch-Button .DocSearch-Search-Icon {
-    color: rgba(255, 255, 255, 0.9) !important;
-  }
-}
-
 /* Dark mode: same squared style */
 [data-theme='dark'] .DocSearch-Button,
 [data-theme='dark'] button.DocSearch-Button {
@@ -1558,9 +1637,103 @@ button.DocSearch-Button {
 }
 
 [data-theme='dark'] .DocSearch-Button-Key {
-  color: rgba(255, 255, 255, 0.7) !important;
+  /* Same 3.91:1 to 5.1:1 lift as the light rule above. */
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+
+/* ── Search below 1200: a bare magnifying glass ─────────────────────── */
+/* The 400px pill above is a desktop design. Below 1200 the navbar also holds
+   the hamburger or the logo, Ask AI and the theme toggle, and below 997
+   Docusaurus parks the search container in a zero-width absolute box at the
+   right edge, which centred the pill on that edge and hung it 185px off
+   screen. Here search is a 44px transparent box with an 18px white icon at
+   85% opacity, the same treatment the Ask AI sparkle uses, so the two read
+   as one row of icon controls. Selectors are (0,3,1) so they outrank the
+   dark-mode rules above, which are (0,2,1). */
+@media (max-width: 1199px) {
+  .navbar .navbar__items button.DocSearch-Button {
+    width: 44px !important;
+    min-width: 0 !important;
+    height: 44px !important;
+    padding: 0 !important;
+    justify-content: center !important;
+    position: static !important;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+    background: transparent !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+  }
+
+  .navbar .navbar__items button.DocSearch-Button:hover,
+  .navbar .navbar__items button.DocSearch-Button:focus-visible {
+    background: transparent !important;
+    border-color: transparent !important;
+    color: #ffffff !important;
+  }
+
+  .navbar .navbar__items button.DocSearch-Button .DocSearch-Button-Container {
+    flex: 0 0 auto;
+  }
+
+  .navbar .navbar__items button.DocSearch-Button .DocSearch-Button-Placeholder,
+  .navbar .navbar__items button.DocSearch-Button .DocSearch-Button-Keys {
+    display: none !important;
+  }
+
+  .navbar .navbar__items button.DocSearch-Button .DocSearch-Search-Icon {
+    width: 18px !important;
+    height: 18px !important;
+    color: inherit !important;
+  }
+
+  /* Let the container flow with the other right-hand items instead of
+     Docusaurus's `position: absolute; right: 15px`. */
+  .navbar .navbar__items--right [class*="navbarSearchContainer"] {
+    position: static !important;
+    right: auto !important;
+  }
+
+  /* A site's Ask AI navbar item (data-navbar-ask-ai) takes the same box. It
+     used to be hidden at <=1050px, which below 997 left phones with no
+     persistent entry point to the assistant. */
+  .navbar .navbar__items [data-navbar-ask-ai] {
+    display: inline-flex !important;
+  }
+
+  .navbar .navbar__items [data-navbar-ask-ai] button {
+    width: 44px;
+    height: 44px;
+  }
 }
 
+/* DocSearch goes full screen below 768. The modal keeps no radius there, the
+   input is 16px so iOS does not zoom on focus, and the Cancel control and the
+   result rows reach touch size. */
+@media (max-width: 768px) {
+  .DocSearch-Container .DocSearch-Modal {
+    border-radius: 0 !important;
+    max-width: none !important;
+  }
+
+  .DocSearch-Container .DocSearch-Input {
+    font-size: 16px !important;
+  }
+
+  .DocSearch-Container .DocSearch-Close {
+    min-width: 44px;
+    min-height: 44px;
+    justify-content: center;
+  }
+
+  .DocSearch-Container .DocSearch-Hit a {
+    min-height: 48px;
+  }
+}
 /* ── Search modal ───────────────────────────────────────────────────── */
 .DocSearch-Modal {
   border-radius: 12px !important;
@@ -1583,7 +1756,7 @@ button.DocSearch-Button {
 }
 
 [data-theme='dark'] .DocSearch-Hit-source {
-  color: #6b7494 !important;
+  color: var(--ink-500) !important;
 }
 
 .DocSearch-Form {
@@ -1733,7 +1906,7 @@ button.DocSearch-Button {
   box-shadow: none !important;
   border: 1px solid var(--ink-300) !important;
   border-radius: 4px !important;
-  color: var(--ink-400) !important;
+  color: var(--ink-500) !important;
   font-family: var(--ifm-font-family-monospace) !important;
   font-size: 10px !important;
   padding: 2px 5px !important;
@@ -1744,12 +1917,12 @@ button.DocSearch-Button {
 
 [data-theme='dark'] .DocSearch-Commands-Key {
   border-color: #2a3157 !important;
-  color: #6b7494 !important;
+  color: var(--ink-500) !important;
 }
 
 .DocSearch-Label {
   font-size: 11px !important;
-  color: var(--ink-400) !important;
+  color: var(--ink-500) !important;
 }
 
 /* Empty / no results state */
@@ -1846,12 +2019,18 @@ article {
 *::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
 
 /* ── Sidebar section labels (Products / Platform / Reference / About) ─ */
+/* ink-500, not ink-400, for every muted label in the theme. ink-400 is the
+   ramp's fixed point, #6b7494 in both modes, and as text it measures 4.46:1
+   on the light page, 4.24:1 on a light ink-50 surface and 3.68 to 4.10:1
+   everywhere in dark, all under the 4.5:1 floor. ink-500 is mirrored
+   (#4a5375 light, #9aa1bd dark) and clears 6.6:1 on every surface it is
+   used on. ink-400 stays for decoration only: markers, separators, chevrons. */
 .sidebar-section-label {
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--ink-400);
+  color: var(--ink-500);
   padding: 14px 0 6px;
   margin-top: 8px;
   border-top: 1px solid var(--ink-100);
@@ -1863,7 +2042,7 @@ article {
   padding: 10px 0 4px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--ink-400);
+  color: var(--ink-500);
   text-align: left;
 }
 .menu > .menu__list > li:first-child .sidebar-section-label,
@@ -1937,17 +2116,55 @@ article {
   }
 }
 
-/* Chat sidebar  -  push layout (navbar excluded) */
-.main-wrapper {
-  transition: margin-right 0.3s ease-in-out;
+/* A site with no navbar.title still gets the version badge, alone in the
+   centre. Between 997 and 1024 that is a bare git hash beside the logo on a
+   tablet; hide it there. On wider screens the lone centred badge stays. */
+@media (max-width: 1024px) {
+  .navbar__center-title:not(:has(.navbar__center-title-text)) {
+    display: none;
+  }
 }
 
-body.chat-open .main-wrapper {
-  margin-right: 400px;
+/* ── Tablet landscape (997 to 1199) ────────────────────────────────── */
+/* Docusaurus treats this band as desktop: a 300px sidebar, a right-hand TOC
+   column and the article between them. At 1024 the article is 505px and the
+   TOC has about 60px of text, so headings break letter by letter. Treat the
+   band as a wide tablet: a narrower sidebar, and the collapsible TOC in the
+   article instead of the right column. The column is hidden through :has so
+   the article regains the 25% it held. */
+@media (min-width: 997px) and (max-width: 1199px) {
+  .theme-doc-sidebar-container,
+  [class*="docsWrapper"] {
+    --doc-sidebar-width: 260px;
+  }
+
+  .row > .col.col--3:has(.theme-doc-toc-desktop) {
+    display: none;
+  }
+
+  [class*="docItemCol"] {
+    max-width: 100% !important;
+  }
+
+  /* theme-classic hides the collapsible TOC from 997 up (tocMobile module).
+     It is server-rendered on every page, so showing it here costs nothing. */
+  article .theme-doc-toc-mobile {
+    display: block;
+  }
 }
 
-@media (max-width: 480px) {
-  body.chat-open .main-wrapper {
-    margin-right: 0;
+/* ── Phone rhythm ──────────────────────────────────────────────────── */
+/* The 3rem h2 and 2rem h3 top margins above are sized for a wide screen. On
+   a 375px phone a 45px gap before every section reads as a page break. */
+@media (max-width: 600px) {
+  .theme-doc-markdown .markdown h2,
+  .theme-doc-markdown article h2 {
+    margin-top: 2.25rem;
+    font-size: 1.45rem;
+  }
+
+  .theme-doc-markdown .markdown h3,
+  .theme-doc-markdown article h3 {
+    margin-top: 1.5rem;
   }
 }

package/src/theme/MDXComponents/TableScroll.jsx

@@ -0,0 +1,19 @@
+/**
+ * A markdown table inside a horizontal scroll region.
+ *
+ * The theme frames tables with a border and a radius. Doing that on the table
+ * itself needed `overflow: hidden`, which removed the `display: block;
+ * overflow-x: auto` Docusaurus ships for wide tables, and on a 345px phone
+ * column a four-column reference table squeezed to 61px columns and 171px
+ * rows. The wrapper carries the frame now (see `.table-scroll` in
+ * src/css/custom.css); the table keeps its natural width and scrolls.
+ *
+ * `role="region"` plus `tabIndex` so a keyboard user can reach and scroll it.
+ */
+export default function TableScroll(props) {
+  return (
+    <div className="table-scroll" role="region" aria-label="Table, scrolls horizontally" tabIndex={0}>
+      <table {...props} />
+    </div>
+  );
+}

package/src/theme/MDXComponents/index.js

@@ -0,0 +1,17 @@
+// Routes every markdown `table` through TableScroll. Docusaurus's own map has
+// no `table` entry, so this adds one rather than replacing anything.
+//
+// @theme-init, not @theme-original: this file ships inside a theme package that
+// sits in the theme stack, so @theme-original/MDXComponents would resolve back
+// to this same module and recurse. See src/theme/Navbar/Logo for the same note.
+//
+// A site that already wraps `table` itself (vantage-docs did, before this
+// shipped) must drop its own wrapper, or every table renders in two scroll
+// regions. MIGRATION.md, Part 3.
+import MDXComponents from '@theme-init/MDXComponents';
+import TableScroll from './TableScroll';
+
+export default {
+  ...MDXComponents,
+  table: TableScroll,
+};