From 0e9302653fbf10a1687ff5ce97c3732f89d4ab00 Mon Sep 17 00:00:00 2001 From: Phillip Hoff Date: Sun, 11 Oct 2026 11:03:11 -0700 Subject: [PATCH] Adopt the EncDotNet.S100 docs theme and icon for the standalone site Copy the S100 DocFX theme (docs/template/public/main.css) and the S100 icon so the standalone EncDotNet docs site matches the soundcharts.app docs it is bundled into. Replace the old logo.svg. --- docfx.json | 7 +- docs/images/icon.svg | 55 +++++++++++++ docs/images/logo.svg | 71 ----------------- docs/template/public/main.css | 142 ++++++++++++++++++++++++++++++++++ 4 files changed, 201 insertions(+), 74 deletions(-) create mode 100644 docs/images/icon.svg delete mode 100644 docs/images/logo.svg create mode 100644 docs/template/public/main.css diff --git a/docfx.json b/docfx.json index 8160a08..c200a64 100644 --- a/docfx.json +++ b/docfx.json @@ -53,11 +53,12 @@ "output": "_site", "template": [ "default", - "modern" + "modern", + "docs/template" ], "globalMetadata": { - "_appLogoPath": "docs/images/logo.svg", - "_appFaviconPath": "docs/images/logo.svg", + "_appLogoPath": "docs/images/icon.svg", + "_appFaviconPath": "docs/images/icon.svg", "_appName": "EncDotNet", "_appTitle": "EncDotNet Docs" } diff --git a/docs/images/icon.svg b/docs/images/icon.svg new file mode 100644 index 0000000..06896b4 --- /dev/null +++ b/docs/images/icon.svg @@ -0,0 +1,55 @@ + + + Geometric ENC grammar icon + A geometric nautical chart-inspired icon with angular land shape, stepped depth bands, and simplified contour lines. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/logo.svg b/docs/images/logo.svg deleted file mode 100644 index ab2f1e8..0000000 --- a/docs/images/logo.svg +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - 5 - 9 - 4 - 7 - 2 - 3 - 12 - 11 - 16 - 14 - 6 - 8 - - - - diff --git a/docs/template/public/main.css b/docs/template/public/main.css new file mode 100644 index 0000000..17183d2 --- /dev/null +++ b/docs/template/public/main.css @@ -0,0 +1,142 @@ +/* + * Docs theme, copied from EncDotNet.S100 (docs/template/public/main.css) so + * this standalone site matches the soundcharts.app docs it is bundled into. + * Keep the two in sync. + * The modern DocFX template is Bootstrap 5.3: theme by overriding --bs-* vars. + */ +@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"); + +:root, +[data-bs-theme="light"] { + --sc-accent: #0f8f86; /* sounding teal */ + --sc-accent-rgb: 15, 143, 134; + --sc-accent-hover-rgb: 10, 110, 103; + --sc-surface-2: #eef2f6; + --sc-line: #d9e1e8; + --sc-sea-deep: #0a1826; + --sc-sea-mid: #12304a; + --sc-hero-ink: #e8f1f8; + --sc-hero-ink-2: #9fb6c9; + --sc-hero-accent: #7fe0d4; + + --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; + --bs-body-color: #0e1b28; + --bs-secondary-color: #4a5a6a; + --bs-border-color: var(--sc-line); + --bs-tertiary-bg: var(--sc-surface-2); + --bs-link-color: var(--sc-accent); + --bs-link-color-rgb: var(--sc-accent-rgb); + --bs-link-hover-color-rgb: var(--sc-accent-hover-rgb); + --bs-primary: var(--sc-accent); + --bs-primary-rgb: var(--sc-accent-rgb); +} + +[data-bs-theme="dark"] { + --sc-accent: #3cc3b5; + --sc-accent-rgb: 60, 195, 181; + --sc-accent-hover-rgb: 127, 224, 212; + --sc-surface-2: #162636; + --sc-line: #22374a; + + --bs-body-bg: #0b141d; + --bs-body-bg-rgb: 11, 20, 29; + --bs-body-color: #e6eef5; + --bs-secondary-color: #9db0c1; + --bs-secondary-bg: #111e2a; + --bs-tertiary-bg: var(--sc-surface-2); + --bs-border-color: var(--sc-line); +} + +/* ---------- header: the landing page's dark sea band ---------- */ +body > header { + background: radial-gradient(120% 220% at 70% 0%, var(--sc-sea-mid), var(--sc-sea-deep) 70%) !important; + border-bottom: 0 !important; +} + +body > header .navbar { + --bs-navbar-color: rgba(232, 241, 248, .82); + --bs-navbar-hover-color: #fff; + --bs-navbar-active-color: var(--sc-hero-accent); + --bs-navbar-brand-color: var(--sc-hero-ink); + --bs-navbar-brand-hover-color: #fff; +} + +body > header .navbar-brand { + display: flex; + align-items: center; + gap: 10px; + font: 600 19px/1 "Fraunces", Georgia, serif; +} + +/* The icon SVG has a large intrinsic size; keep it navbar-sized. */ +#logo { + height: 30px; + width: auto; +} + +body > header .btn, +body > header .bi { + color: var(--sc-hero-ink); +} + +body > header .search .form-control { + background-color: rgba(255, 255, 255, .06); + border-color: rgba(255, 255, 255, .18); + color: var(--sc-hero-ink); +} + +body > header .search .form-control::placeholder { + color: var(--sc-hero-ink-2); +} + +/* ---------- article typography ---------- */ +article h1, +article h2, +article h3 { + font-family: "Fraunces", Georgia, serif; + font-weight: 600; + letter-spacing: -.01em; +} + +article h1 { + margin-bottom: 1rem; +} + +article h2 { + font-size: 1.85rem; + margin-top: 2.5rem; + padding-bottom: .35rem; + border-bottom: 1px solid var(--bs-border-color); +} + +article :not(pre) > code { + color: var(--bs-body-color); + background-color: var(--bs-tertiary-bg); + border-radius: 4px; + padding: .1em .35em; +} + +article h3 { + font-size: 1.3rem; + margin-top: 1.75rem; +} + +article h4 { + font-size: 1.05rem; + font-weight: 600; +} + +article table { + border: 1px solid var(--bs-border-color); +} + +article table thead th { + background-color: var(--bs-tertiary-bg); +} + +/* ---------- table of contents ---------- */ +.toc a.active { + color: var(--sc-accent); + font-weight: 600; +}