From 6d09a8e1d8ef47785c8b3729ddd3c2c0184d393d Mon Sep 17 00:00:00 2001 From: dc Date: Mon, 28 Sep 2026 22:55:05 +0000 Subject: [PATCH] style(theme): apply the Data Controller brand palette and logo The docs site rendered as stock Material: indigo header, indigo links and Open Sans. Neither colour nor type matched the marketing site (datacontroller.io) or the application itself. - Palette: the slate (#314351) and green (#79a843) already used by the marketing navbar, hero and logo accent, wired up via a `custom` palette and defined in the new docs/dc-brand.css. - Type: Montserrat for text, matching the marketing site's headings. - Logo: the application's own dc-logo.svg mark in the header. The previous `palette:` mapping form (a dict of primary/accent) is no longer honoured by the Material version this repo builds against, so the theme fell through to Material's default indigo - the site was not in fact rendering the White/Amber it asked for. The list form used here is the one Material currently reads. --- docs/dc-brand.css | 27 +++++++++++++++++++++++++++ docs/img/dc-logo.svg | 15 +++++++++++++++ mkdocs.yml | 13 ++++++++----- 3 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 docs/dc-brand.css create mode 100644 docs/img/dc-logo.svg diff --git a/docs/dc-brand.css b/docs/dc-brand.css new file mode 100644 index 0000000..16eaa08 --- /dev/null +++ b/docs/dc-brand.css @@ -0,0 +1,27 @@ +/* + * Data Controller brand overrides for the Material theme. + * + * The values below mirror the marketing site (https://datacontroller.io): the + * slate used for its navbar and hero, and the green used for its logo accent. + * They are wired up through the `custom` palette in mkdocs.yml, which leaves + * these CSS variables for us to define. + */ + +/* Primary - the brand slate, used for the header, the mobile drawer title and body links. */ +:root, +[data-md-color-primary='custom'] { + --md-primary-fg-color: #314351; + --md-primary-fg-color--light: #3d5468; + --md-primary-fg-color--dark: #263542; + --md-primary-bg-color: #fff; + --md-primary-bg-color--light: #ffffffb3; + --md-typeset-a-color: #314351; +} + +/* Accent - the brand green, used for link hover, focus rings and the active search hit. */ +[data-md-color-accent='custom'] { + --md-accent-fg-color: #79a843; + --md-accent-fg-color--transparent: #79a8431a; + --md-accent-bg-color: #fff; + --md-accent-bg-color--light: #ffffffb3; +} diff --git a/docs/img/dc-logo.svg b/docs/img/dc-logo.svg new file mode 100644 index 0000000..79479cc --- /dev/null +++ b/docs/img/dc-logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/mkdocs.yml b/mkdocs.yml index c531a0b..b745308 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -96,7 +96,9 @@ markdown_extensions: extra: manifest: manifest.webmanifest -extra_css: ['font-awesome.css'] +extra_css: + - font-awesome.css + - dc-brand.css plugins: - search: @@ -112,12 +114,13 @@ repo_url: 'https://git.datacontroller.io/dc/docs.datacontroller.io' theme: name: material - logo: 'img/favicon.ico' + logo: 'img/dc-logo.svg' palette: - primary: 'White' - accent: 'Amber' + - scheme: default + primary: custom + accent: custom font: - text: 'Open Sans' + text: 'Montserrat' code: 'Ubuntu Mono' favicon: img/favicon.ico custom_dir: 'theme' -- 2.43.0