Update documentation styles

docs/index.md

@@ -1,13 +1,21 @@
-# ![Open Quantum Design](./img/oqd-logo-text.png)
+# 
+
+<p align="center">
+  <img src="img/oqd-logo-black.png#only-light" alt="Logo" style="max-height: 200px;">
+  <img src="img/oqd-logo-white.png#only-dark" alt="Logo" style="max-height: 200px;">
+</p>
 
 <div align="center">
     <h2 align="center">
     Open Quantum Design: Compiler Infrastructure
     </h2>
 </div>
 
-[![black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/ambv/black)
+[![PyPI Version](https://img.shields.io/pypi/v/oqd-compiler-infrastructure)](https://pypi.org/project/oqd-compiler-infrastructure)
+[![CI](https://github.com/OpenQuantumDesign/oqd-compiler-infrastructure/actions/workflows/pytest.yml/badge.svg)](https://github.com/OpenQuantumDesign/oqd-compiler-infrastructure/actions/workflows/pytest.yml)
 ![versions](https://img.shields.io/badge/python-3.10%20%7C%203.11%20%7C%203.12-blue)
+[![License: Apache 2.0](https://img.shields.io/badge/license-Apache%202.0-brightgreen.svg)](https://opensource.org/licenses/Apache-2.0)
+[![Ruff](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/astral-sh/ruff/main/assets/badge/v2.json)](https://github.com/astral-sh/ruff)
 
 <!-- prettier-ignore -->
 /// admonition | Note

docs/stylesheets/brand.css

@@ -0,0 +1,116 @@
+/* Load custom fonts from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&family=Source+Serif+Pro&display=swap');
+
+/* Base typography */
+body, .md-typeset {
+  font-family: 'Source Serif Pro', serif;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6,
+.md-typeset h1, .md-typeset h2, .md-typeset h3,
+.md-typeset h4, .md-typeset h5, .md-typeset h6 {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 700; /* Bold for headings */
+}
+
+/* Subheadings */
+.md-typeset h2, .md-typeset h3 {
+  font-weight: 600; /* SemiBold for subheadings */
+}
+
+/* Light mode overrides */
+[data-md-color-scheme="default"] {
+  --md-default-bg-color: #FFFFFF;
+  --md-primary-fg-color: #23627D; /* blue accent */
+  --md-accent-fg-color: #23627D;
+}
+
+/* Dark mode overrides */
+[data-md-color-scheme="slate"] {
+  --md-default-bg-color: #141414;
+  --md-primary-fg-color: #23627D;
+  --md-accent-fg-color: #23627D;
+}
+
+
+
+/* Apply Raleway to all navigation and sidebar elements */
+.md-nav, 
+.md-nav__title, 
+.md-nav__link, 
+.md-header, 
+.md-tabs, 
+.md-sidebar, 
+.md-sidebar__inner,
+.md-nav__item,
+.md-footer,
+.md-footer__inner {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 600; /* SemiBold for ToC/nav for clarity */
+}
+
+
+
+
+/* Page heading accent color for light mode */
+[data-md-color-scheme="default"] .md-typeset h1,
+[data-md-color-scheme="default"] .md-typeset h2,
+[data-md-color-scheme="default"] .md-typeset h3,
+[data-md-color-scheme="default"] .md-typeset h4,
+[data-md-color-scheme="default"] .md-typeset h5,
+[data-md-color-scheme="default"] .md-typeset h6 {
+  color: #7B2328; /* Warm yellow/orange for light mode */
+}
+
+/* Page heading accent color for dark mode */
+[data-md-color-scheme="slate"] .md-typeset h1,
+[data-md-color-scheme="slate"] .md-typeset h2,
+[data-md-color-scheme="slate"] .md-typeset h3,
+[data-md-color-scheme="slate"] .md-typeset h4,
+[data-md-color-scheme="slate"] .md-typeset h5,
+[data-md-color-scheme="slate"] .md-typeset h6 {
+  /* color: #F19D19; Deep red for dark mode */
+  color: #E45B68; /* Deep red for dark mode */
+}
+
+
+
+
+
+/* Light mode nav/ToC font color */
+[data-md-color-scheme="default"] .md-nav, 
+[data-md-color-scheme="default"] .md-nav__link,
+[data-md-color-scheme="default"] .md-header,
+[data-md-color-scheme="default"] .md-tabs {
+  /*color: #222; /* Dark gray or your preferred shade */
+  color: #141414;
+}
+
+/* Dark mode nav/ToC font color */
+[data-md-color-scheme="slate"] .md-nav, 
+[data-md-color-scheme="slate"] .md-nav__link,
+[data-md-color-scheme="slate"] .md-header,
+[data-md-color-scheme="slate"] .md-tabs {
+  color: #f0f0f0; /* Light gray or white */
+}
+
+
+
+/* Top navigation bar text and icons should be light-colored */
+.md-header,
+.md-header .md-header__title,
+.md-header .md-header__button,
+.md-header .md-tabs,
+.md-header .md-tabs__link,
+.md-header .md-header__topic,
+.md-header .md-header__option {
+  color: #f0f0f0 !important;  /* Light gray or white text */
+  fill: #f0f0f0 !important;   /* Icons (SVG) */
+}
+
+/* Hover state for links in header */
+.md-header .md-tabs__link:hover {
+  color: #ffffff !important;
+  text-decoration: underline;
+}

mkdocs.yaml

@@ -38,26 +38,26 @@ nav:
 
 theme:
   name: material
-
-  logo: img/oqd-logo.png
-  favicon: img/oqd-logo.png
+  logo: img/oqd-icon.png
+  favicon: img/oqd-icon.png
 
   palette:
     - media: "(prefers-color-scheme: light)"
       scheme: default
-      primary: teal
-      accent: pink
+      primary: custom
+      accent: custom
       toggle:
         icon: material/weather-sunny
         name: Switch to dark mode
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
-      primary: teal
-      accent: pink
+      primary: custom
+      accent: custom
       toggle:
         icon: material/weather-night
         name: Switch to light mode
 
+
   features:
     - search.suggest
     - search.highlight
@@ -136,3 +136,4 @@ extra_javascript:
 extra_css:
   - stylesheets/headers.css
   - stylesheets/extra_admonitions.css
+  - stylesheets/brand.css