diff options
author | 2024-07-27 02:55:05 +0200 | |
---|---|---|
committer | 2024-07-29 17:16:53 +0200 | |
commit | 8ae860a12a320ce24ff7c6128115291f85c5aa69 (patch) | |
tree | 7ee94c50f0e391a3be7778ae4d9af050ec22052d /subprojects | |
parent | docs: enable documentation versioning (diff) | |
download | refinery-8ae860a12a320ce24ff7c6128115291f85c5aa69.tar.gz refinery-8ae860a12a320ce24ff7c6128115291f85c5aa69.tar.zst refinery-8ae860a12a320ce24ff7c6128115291f85c5aa69.zip |
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.
Diffstat (limited to 'subprojects')
-rw-r--r-- | subprojects/docs/src/css/custom.css | 6 | ||||
-rw-r--r-- | subprojects/docs/src/pages/index.module.css | 22 | ||||
-rw-r--r-- | subprojects/docs/src/pages/index.tsx | 12 |
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 { | |||
80 | --ifm-navbar-shadow: var(--ifm-global-shadow-lw) !important; | 80 | --ifm-navbar-shadow: var(--ifm-global-shadow-lw) !important; |
81 | } | 81 | } |
82 | 82 | ||
83 | @media (max-width: 996px) { | ||
84 | .navbar__inner .navbar__logo { | ||
85 | display: none; | ||
86 | } | ||
87 | } | ||
88 | |||
83 | .button, .navbar__link, .footer__link-item { | 89 | .button, .navbar__link, .footer__link-item { |
84 | text-transform: uppercase; | 90 | text-transform: uppercase; |
85 | font-variation-settings: 'wdth' 87.5; | 91 | 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 @@ | |||
39 | padding: 4rem 0; | 39 | padding: 4rem 0; |
40 | background: var(--ifm-background-surface-color); | 40 | background: var(--ifm-background-surface-color); |
41 | } | 41 | } |
42 | |||
43 | .title { | ||
44 | display: flex; | ||
45 | align-items: center; | ||
46 | } | ||
47 | |||
48 | .title__text { | ||
49 | display: block; | ||
50 | } | ||
51 | |||
52 | .logo { | ||
53 | display: none; | ||
54 | height: 1.25em; | ||
55 | width: 1.25em; | ||
56 | margin-right: 0.5rem; | ||
57 | } | ||
58 | |||
59 | @media (max-width: 996px) { | ||
60 | .logo { | ||
61 | display: block; | ||
62 | } | ||
63 | } | ||
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 @@ | |||
5 | */ | 5 | */ |
6 | 6 | ||
7 | import Link from '@docusaurus/Link'; | 7 | import Link from '@docusaurus/Link'; |
8 | import { useColorMode } from '@docusaurus/theme-common'; | ||
8 | import Layout from '@theme/Layout'; | 9 | import Layout from '@theme/Layout'; |
9 | import clsx from 'clsx'; | 10 | import clsx from 'clsx'; |
10 | 11 | ||
@@ -14,11 +15,20 @@ import Features from '@site/src/components/Features'; | |||
14 | import UseCases from '@site/src/components/UseCases'; | 15 | import UseCases from '@site/src/components/UseCases'; |
15 | import Video from '@site/src/components/Video'; | 16 | import Video from '@site/src/components/Video'; |
16 | 17 | ||
18 | function Logo() { | ||
19 | const { colorMode } = useColorMode(); | ||
20 | const logoPath = colorMode === 'dark' ? '/logo-dark.svg' : '/logo.svg'; | ||
21 | return <img src={logoPath} alt="" className={styles['logo']} />; | ||
22 | } | ||
23 | |||
17 | function Hero() { | 24 | function Hero() { |
18 | return ( | 25 | return ( |
19 | <header className={clsx('hero', 'hero--dark', styles['hero'])}> | 26 | <header className={clsx('hero', 'hero--dark', styles['hero'])}> |
20 | <div className="container"> | 27 | <div className="container"> |
21 | <h1 className="hero__title">Refinery</h1> | 28 | <h1 className={clsx('hero__title', styles['title'])}> |
29 | <Logo /> | ||
30 | <span className={styles['title__text']}>Refinery</span> | ||
31 | </h1> | ||
22 | <p className="hero__subtitle"> | 32 | <p className="hero__subtitle"> |
23 | An efficient graph solver for generating well-formed models | 33 | An efficient graph solver for generating well-formed models |
24 | </p> | 34 | </p> |