branding

style: gradient header/nav with theme-aware colors

Author: simonaglover95

docs/assets/branding.css

@@ -0,0 +1,47 @@
+/* ============================= */
+/* Pirate MIDI gradient headers  */
+/* ============================= */
+
+/* LIGHT THEME — blue gradient @ 45deg */
+:root {
+  /* Header & top tabs gradient */
+  --pm-header-gradient: linear-gradient(45deg, #5b8dca 0%, #85d1d4 100%);
+  /* Ensure header text/icons are readable on the gradient */
+  --pm-header-fg: #ffffff;
+}
+
+/* DARK THEME — pink gradient @ 45deg */
+[data-md-color-scheme="slate"] {
+  --pm-header-gradient: linear-gradient(45deg, #ef5280 0%, #f15a5b 100%);
+  --pm-header-fg: #ffffff;
+}
+
+/* Apply the gradient */
+.md-header,
+.md-tabs {
+  background: var(--pm-header-gradient) !important;
+  color: var(--pm-header-fg);
+}
+
+/* Make sure header icons/text inherit the contrast color */
+.md-header .md-header__button,
+.md-header .md-header__button .md-icon,
+.md-header .md-header__title,
+.md-header .md-search__input,
+.md-header .md-search__icon,
+.md-tabs__link,
+.md-tabs__item .md-icon {
+  color: var(--pm-header-fg);
+  fill: var(--pm-header-fg);
+}
+
+/* Keep the default sticky header shadow (optional polish) */
+.md-header {
+  box-shadow: var(--md-shadow-z2);
+}
+
+/* Optional: hover state tweaks for tabs on gradients */
+.md-tabs__link:hover,
+.md-tabs__link--active {
+  opacity: 0.9;
+}

docs/assets/extra.css

@@ -15,15 +15,15 @@ theme:
   palette:
     - media: "(prefers-color-scheme: light)"
       scheme: default
-      primary: indigo
-      accent: deep orange
+      primary: cyan
+      accent: blue
       toggle:
         icon: material/weather-night
         name: Switch to dark mode
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
-      primary: teal
-      accent: lime
+      primary: blue
+      accent: light blue
       toggle:
         icon: material/weather-sunny
         name: Switch to light mode
@@ -55,7 +55,7 @@ nav:
   - Support: support/index.md
 
 extra_css:
-  - assets/extra.css
+  - assets/branding.css
 
 extra_javascript:
   - assets/logo-switch.js