Site: the PlugRL lockup in the header without the repeated name, and a larger tab icon

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;
+}

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
 

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 %}
+  <link rel="icon" type="image/svg+xml" href="{{ 'assets/favicon.svg' | url }}">
+{% endblock %}