diff --git a/docs/assets/favicon.ico b/docs/assets/favicon.ico
index 0b483f1..f143489 100644
Binary files a/docs/assets/favicon.ico and b/docs/assets/favicon.ico differ
diff --git a/docs/assets/favicon.svg b/docs/assets/favicon.svg
new file mode 100644
index 0000000..90228b2
--- /dev/null
+++ b/docs/assets/favicon.svg
@@ -0,0 +1 @@
+
diff --git a/docs/assets/plugrl-lockup-on-dark.png b/docs/assets/plugrl-lockup-on-dark.png
new file mode 100644
index 0000000..1a573bc
Binary files /dev/null and b/docs/assets/plugrl-lockup-on-dark.png differ
diff --git a/docs/assets/plugrl-mark-on-dark.svg b/docs/assets/plugrl-mark-on-dark.svg
deleted file mode 100644
index 959b4e7..0000000
--- a/docs/assets/plugrl-mark-on-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/docs/stylesheets/brand.css b/docs/stylesheets/brand.css
new file mode 100644
index 0000000..2f8d8bd
--- /dev/null
+++ b/docs/stylesheets/brand.css
@@ -0,0 +1,37 @@
+/* The header logo is the PlugRL lockup, which already reads "PlugRL". */
+
+/* Material hides the header logo below 76.25em, where the menu button takes its
+ place; keep it beside the menu button instead, so every width shows the same
+ brand. Same specificity as Material's rule, later in the cascade. */
+.md-header__button.md-logo {
+ display: inline-block;
+}
+/* There, the menu button comes first and the lockup after it. */
+@media screen and (max-width: 76.234375em) {
+ .md-header__button[for="__drawer"] {
+ order: -1;
+ }
+}
+
+/* A wider image than Material's square logo: give it a little more height. */
+.md-header__button.md-logo img,
+.md-header__button.md-logo svg {
+ height: 1.6rem;
+ width: auto;
+}
+
+/* Hide the site name beside it. The page title that replaces the name once
+ the reader scrolls past the heading is the second topic, and stays. */
+.md-header__title .md-header__topic:first-child {
+ visibility: hidden;
+}
+
+/* The mobile drawer shows the logo and the site name together: keep the
+ lockup and drop the text. */
+.md-nav--primary > .md-nav__title {
+ font-size: 0;
+}
+.md-nav--primary > .md-nav__title .md-logo img {
+ height: 2rem;
+ width: auto;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index d471cb9..82a21cb 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -31,9 +31,13 @@ plugins:
- '**/sitemap.xml'
theme:
name: material
- # The PlugRL mark: the light-plate version, for the dark header bar.
- logo: assets/plugrl-mark-on-dark.svg
+ # The PlugRL lockup (mark and wordmark), light version, for the dark header
+ # bar; brand.css hides the site name beside it, which the lockup already says.
+ logo: assets/plugrl-lockup-on-dark.png
+ # The ICO for every browser; overrides/main.html adds the SVG for those that
+ # read it. Both fill their canvas with the plate.
favicon: assets/favicon.ico
+ custom_dir: overrides
features:
- navigation.tracking
- navigation.indexes
@@ -69,6 +73,7 @@ markdown_extensions:
# figures/coverage.
extra_css:
- stylesheets/coverage.css
+ - stylesheets/brand.css
extra_javascript:
- javascripts/coverage.js
diff --git a/overrides/main.html b/overrides/main.html
new file mode 100644
index 0000000..1b03d76
--- /dev/null
+++ b/overrides/main.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{#- The favicon as SVG as well, after theme.favicon's ICO, for browsers that read SVG icons:
+ it is cropped to the plate, and turns light in a dark colour scheme. -#}
+{% block extrahead %}
+
+{% endblock %}