From d0a25c7e5bd94af967c10c4984622654fc105638 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 17 Mar 2026 11:29:08 +0100 Subject: [PATCH 1/2] feat(theme): restyle docs to match opentrace.com website - Dark-only slate scheme with matching color palette (#08080d bg, #6C8EFF/#A855F7 accents) - Host Grotesk headings, Inter body font loaded via CSS - Gradient h1s, styled code blocks, admonitions, tables, and scrollbars - "Try Now" button in header linking to oss.opentrace.ai - Updated homepage CTA from "Get Started" to "Try Now" linking to oss.opentrace.ai Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/index.md | 2 +- docs/overrides/main.html | 37 +++++ docs/stylesheets/extra.css | 284 +++++++++++++++++++++++++++++++++++++ mkdocs.yml | 47 +++--- 4 files changed, 342 insertions(+), 28 deletions(-) create mode 100644 docs/overrides/main.html create mode 100644 docs/stylesheets/extra.css diff --git a/docs/index.md b/docs/index.md index be4f0b9..628effe 100644 --- a/docs/index.md +++ b/docs/index.md @@ -12,7 +12,7 @@ Connect OpenTrace to your AI assistant and start asking questions: > "Help me investigate why checkout is failing" -[Get Started](getting-started.md){ .md-button .md-button--primary } +[Try Now](https://oss.opentrace.ai){ .md-button .md-button--primary target="_blank" rel="noopener" } ## Documentation diff --git a/docs/overrides/main.html b/docs/overrides/main.html new file mode 100644 index 0000000..17f1f4b --- /dev/null +++ b/docs/overrides/main.html @@ -0,0 +1,37 @@ +{% extends "base.html" %} + +{% block htmltitle %} + {{ config.site_name }}{% if page.title %} — {{ page.title }}{% endif %} +{% endblock %} + +{% block extrahead %} + +{% endblock %} + +{% block scripts %} + {{ super() }} + +{% endblock %} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css new file mode 100644 index 0000000..a5a2d30 --- /dev/null +++ b/docs/stylesheets/extra.css @@ -0,0 +1,284 @@ +/* ═══════════════════════════════════════════════ + OpenTrace Docs — Custom Theme + Matches opentrace.com website design + ═══════════════════════════════════════════════ */ + +/* ─── Google Fonts ─── */ +@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); + +/* ─── Color Palette (dark-only, matching website) ─── */ +[data-md-color-scheme="slate"] { + --md-default-bg-color: #08080d; + --md-default-fg-color: #f0f0f5; + --md-default-fg-color--light: #a0a0b8; + --md-default-fg-color--lighter: #6b6b80; + --md-default-fg-color--lightest: rgba(255, 255, 255, 0.06); + + --md-primary-fg-color: #6C8EFF; + --md-primary-fg-color--light: #8aa4ff; + --md-primary-fg-color--dark: #5070e0; + --md-primary-bg-color: #f0f0f5; + --md-primary-bg-color--light: #a0a0b8; + + --md-accent-fg-color: #A855F7; + --md-accent-fg-color--transparent: rgba(168, 85, 247, 0.1); + --md-accent-bg-color: #f0f0f5; + + /* Code */ + --md-code-bg-color: #12121c; + --md-code-fg-color: #f0f0f5; + --md-code-hl-color: rgba(108, 142, 255, 0.15); + + /* Typeset */ + --md-typeset-color: #f0f0f5; + --md-typeset-a-color: #6C8EFF; + + /* Footer */ + --md-footer-bg-color: #0e0e16; + --md-footer-bg-color--dark: #08080d; + --md-footer-fg-color: #a0a0b8; + --md-footer-fg-color--light: #6b6b80; + --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.06); +} + +/* ─── Typography ─── */ +:root { + --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; + --md-code-font: "JetBrains Mono", "Fira Code", monospace; +} + +.md-typeset h1, +.md-typeset h2, +.md-typeset h3, +.md-typeset h4, +.md-typeset h5, +.md-typeset h6 { + font-family: "Host Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; + font-weight: 600; +} + +.md-typeset h1 { + font-weight: 700; +} + +/* ─── Header / Nav ─── */ +.md-header { + background: rgba(8, 8, 13, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: none; +} + +.md-header[data-md-state="shadow"] { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); +} + +/* ─── Sidebar / Nav ─── */ +.md-sidebar { + background: transparent; +} + +.md-nav__link { + color: #a0a0b8; + transition: color 0.2s ease; +} + +.md-nav__link:hover, +.md-nav__link--active { + color: #6C8EFF; +} + +.md-nav__item--active > .md-nav__link { + color: #6C8EFF; + font-weight: 500; +} + +/* Active indicator uses gradient */ +.md-nav__link--active { + border-color: #6C8EFF; +} + +/* ─── Tabs (if enabled) ─── */ +.md-tabs { + background: #0e0e16; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +/* ─── Content area ─── */ +.md-main { + background: #08080d; +} + +.md-content { + background: transparent; +} + +/* ─── Links ─── */ +.md-typeset a { + color: #6C8EFF; + transition: color 0.2s ease; +} + +.md-typeset a:hover { + color: #A855F7; +} + +/* ─── Code blocks ─── */ +.md-typeset code { + background: #12121c; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 6px; + color: #f0f0f5; +} + +.md-typeset pre { + background: #12121c; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; +} + +.md-typeset pre > code { + border: none; + background: transparent; +} + +/* Copy button in code blocks */ +.md-clipboard { + color: #6b6b80; +} + +.md-clipboard:hover { + color: #6C8EFF; +} + +/* ─── Admonitions ─── */ +.md-typeset .admonition, +.md-typeset details { + background: #12121c; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; + box-shadow: none; +} + +.md-typeset .admonition-title, +.md-typeset summary { + background: rgba(255, 255, 255, 0.03); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +/* ─── Tables ─── */ +.md-typeset table:not([class]) { + background: #12121c; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; + overflow: hidden; +} + +.md-typeset table:not([class]) th { + background: rgba(255, 255, 255, 0.03); + color: #f0f0f5; + font-family: "Host Grotesk", sans-serif; + font-weight: 600; +} + +.md-typeset table:not([class]) td { + border-top-color: rgba(255, 255, 255, 0.06); +} + +/* ─── Search ─── */ +.md-search__input { + background: #12121c; + border: 1px solid rgba(255, 255, 255, 0.06); + color: #f0f0f5; +} + +.md-search__input::placeholder { + color: #6b6b80; +} + +.md-search-result { + background: #0e0e16; +} + +.md-search-result__link:hover { + background: #12121c; +} + +/* ─── Footer ─── */ +.md-footer { + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +/* ─── Scrollbar ─── */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: #08080d; +} + +::-webkit-scrollbar-thumb { + background: #1a1a2e; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #6C8EFF; +} + +/* ─── Gradient accent for headings ─── */ +.md-typeset h1 { + background: linear-gradient(135deg, #6C8EFF, #A855F7); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ─── Buttons / Primary actions ─── */ +.md-typeset .md-button--primary { + background: linear-gradient(135deg, #6C8EFF, #A855F7); + border: none; + color: #f0f0f5; +} + +.md-typeset .md-button--primary:hover { + opacity: 0.9; +} + +/* ─── Header "Try Now" button ─── */ +.md-header__try-now { + display: inline-flex; + align-items: center; + padding: 6px 16px; + margin-right: 12px; + font-family: "Inter", sans-serif; + font-size: 13px; + font-weight: 500; + color: #f0f0f5; + background: linear-gradient(135deg, #6C8EFF, #A855F7); + border-radius: 6px; + text-decoration: none; + white-space: nowrap; + transition: opacity 0.2s ease; +} + +.md-header__try-now:hover { + opacity: 0.85; + color: #f0f0f5; +} + +/* Hide on very small screens to avoid crowding */ +@media screen and (max-width: 480px) { + .md-header__try-now { + display: none; + } +} + +/* ─── Selection color ─── */ +::selection { + background: rgba(108, 142, 255, 0.3); + color: #f0f0f5; +} diff --git a/mkdocs.yml b/mkdocs.yml index 6ef2030..f75efe9 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,9 +1,9 @@ site_name: OpenTrace Documentation -site_url: https://opentrace.github.io/docs/ +site_url: https://docs.opentrace.com site_description: Documentation for OpenTrace # Copyright -copyright: Copyright © 2025 OpenTrace +copyright: Copyright © 2026 OpenTrace # Development server dev_addr: 127.0.0.1:3009 @@ -13,25 +13,12 @@ repo_url: https://github.com/opentrace/docs theme: name: material + custom_dir: docs/overrides logo: assets/logo.svg favicon: assets/favicon.ico palette: - # Light mode - - media: "(prefers-color-scheme: light)" - scheme: default - primary: deep orange - accent: orange - toggle: - icon: material/brightness-7 - name: Switch to dark mode - # Dark mode - - media: "(prefers-color-scheme: dark)" - scheme: slate - primary: deep orange - accent: orange - toggle: - icon: material/brightness-4 - name: Switch to light mode + scheme: slate + font: false # Loaded via CSS for full control features: - navigation.instant - navigation.tracking @@ -39,6 +26,21 @@ theme: - navigation.top - search.highlight - content.code.copy + - header.autohide + icon: + repo: fontawesome/brands/github + +extra_css: + - stylesheets/extra.css + +extra: + social: + - icon: fontawesome/brands/github + link: https://github.com/opentrace + - icon: fontawesome/brands/x-twitter + link: https://x.com/opentraceai + - icon: fontawesome/brands/linkedin + link: https://www.linkedin.com/company/opentraceai/ plugins: - search @@ -57,15 +59,6 @@ markdown_extensions: - toc: permalink: true -extra: - social: - - icon: fontawesome/brands/github - link: https://github.com/opentrace - - icon: fontawesome/brands/x-twitter - link: https://x.com/opentraceai - - icon: fontawesome/brands/linkedin - link: https://www.linkedin.com/company/opentraceai/ - nav: - Home: index.md - Getting Started: getting-started.md From 3927f06cecd4c50667363b20ae99e4fd18519901 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 17 Mar 2026 11:37:03 +0100 Subject: [PATCH 2/2] feat(theme): update logo to match website wordmark Replace icon-only white logo with full OpenTrace wordmark from the website, including the orange (#f60) icon and "OpenTrace" text. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/assets/logo.svg | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg index 8944dbe..18c7023 100644 --- a/docs/assets/logo.svg +++ b/docs/assets/logo.svg @@ -1,10 +1,10 @@ - - - - + + + @@ -35,5 +35,11 @@ + + \ No newline at end of file