refactor(docs): no logo in header on small screens

The logo visually clashes with the hamburger menu button.

Now the logo only appears in the hamburger menu and in the landing page hero
title.

3 files changed, 39 insertions, 1 deletions

diff --git a/subprojects/docs/src/css/custom.css b/subprojects/docs/src/css/custom.css
index 62369e49..58fd7cd9 100644
--- a/subprojects/docs/src/css/custom.css
+++ b/subprojects/docs/src/css/custom.css
@@ -80,6 +80,12 @@ code {
   --ifm-navbar-shadow: var(--ifm-global-shadow-lw) !important;
 }
 
+@media (max-width: 996px) {
+  .navbar__inner .navbar__logo {
+    display: none;
+  }
+}
+
 .button, .navbar__link, .footer__link-item {
   text-transform: uppercase;
   font-variation-settings: 'wdth' 87.5;
diff --git a/subprojects/docs/src/pages/index.module.css b/subprojects/docs/src/pages/index.module.css
index 367b78ed..653d96e4 100644
--- a/subprojects/docs/src/pages/index.module.css
+++ b/subprojects/docs/src/pages/index.module.css
@@ -39,3 +39,25 @@
   padding: 4rem 0;
   background: var(--ifm-background-surface-color);
 }
+
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.title__text {
+  display: block;
+}
+
+.logo {
+  display: none;
+  height: 1.25em;
+  width: 1.25em;
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 996px) {
+  .logo {
+    display: block;
+  }
+}
diff --git a/subprojects/docs/src/pages/index.tsx b/subprojects/docs/src/pages/index.tsx
index ff0da38b..5eb994f1 100644
--- a/subprojects/docs/src/pages/index.tsx
+++ b/subprojects/docs/src/pages/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import Link from '@docusaurus/Link';
+import { useColorMode } from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 
@@ -14,11 +15,20 @@ import Features from '@site/src/components/Features';
 import UseCases from '@site/src/components/UseCases';
 import Video from '@site/src/components/Video';
 
+function Logo() {
+  const { colorMode } = useColorMode();
+  const logoPath = colorMode === 'dark' ? '/logo-dark.svg' : '/logo.svg';
+  return <img src={logoPath} alt="" className={styles['logo']} />;
+}
+
 function Hero() {
   return (
     <header className={clsx('hero', 'hero--dark', styles['hero'])}>
       <div className="container">
-        <h1 className="hero__title">Refinery</h1>
+        <h1 className={clsx('hero__title', styles['title'])}>
+          <Logo />
+          <span className={styles['title__text']}>Refinery</span>
+        </h1>
         <p className="hero__subtitle">
           An efficient graph solver for generating well-formed models
         </p>