Skip to content

Commit b2e930a

Browse files
MitchellShiellMitchellShiell
committed
updated styling to match overture.bio
1 parent f583b12 commit b2e930a

File tree

18 files changed

+2917
-966
lines changed

18 files changed

+2917
-966
lines changed

‎website/docs/03-other-software/images/arrangerDev.svg

+1-1
Loading

‎website/docs/03-other-software/images/maestroDev.svg

+1-1
Loading

‎website/docs/03-other-software/images/platform.svg

+1-1
Loading

‎website/docs/03-other-software/images/scoreDev.svg

+1-1
Loading

‎website/docs/03-other-software/images/songDev.svg

+1-1
Loading

‎website/docs/03-other-software/images/stageDev.svg

+1-1
Loading

‎website/docusaurus.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type * as Preset from '@docusaurus/preset-classic';
44

55
const config: Config = {
66
title: 'Overture Docs',
7-
tagline: 'Docs for Developers & Informaticians',
7+
tagline: 'Resources for Developers & Informaticians',
88
favicon: 'img/favicon.ico',
99

1010
// Set the production url of your site here

‎website/guides/images/platform.svg

+1-1
Loading

‎website/package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
"typecheck": "tsc"
1616
},
1717
"dependencies": {
18-
"@docusaurus/core": "3.5.2",
19-
"@docusaurus/preset-classic": "3.5.2",
20-
"@docusaurus/theme-mermaid": "^3.5.2",
21-
"@docusaurus/theme-search-algolia": "^3.5.2",
18+
"@docusaurus/core": "^3.6.2",
19+
"@docusaurus/preset-classic": "^3.6.2",
20+
"@docusaurus/theme-mermaid": "^3.6.2",
21+
"@docusaurus/theme-search-algolia": "^3.6.2",
2222
"@mdx-js/react": "^3.0.0",
2323
"clsx": "^2.0.0",
2424
"prism-react-renderer": "^2.3.0",
@@ -27,9 +27,9 @@
2727
"swagger-ui-react": "^5.17.14"
2828
},
2929
"devDependencies": {
30-
"@docusaurus/module-type-aliases": "3.5.2",
31-
"@docusaurus/tsconfig": "3.5.2",
32-
"@docusaurus/types": "3.5.2",
30+
"@docusaurus/module-type-aliases": "^3.6.2",
31+
"@docusaurus/tsconfig": "^3.6.2",
32+
"@docusaurus/types": "^3.6.2",
3333
"typescript": "~5.5.2"
3434
},
3535
"browserslist": {

‎website/src/components/OvertureButton/index.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import styles from './styles.module.css';
4+
5+
interface ButtonProps {
6+
children: React.ReactNode;
7+
className?: string;
8+
to?: string;
9+
variant?: 'primary' | 'secondary';
10+
size?: 'small' | 'normal' | 'large';
11+
onClick?: () => void;
12+
}
13+
14+
const Button: React.FC<ButtonProps> = ({
15+
children,
16+
className = '',
17+
to,
18+
variant = 'primary',
19+
size = 'normal',
20+
onClick,
21+
}) => {
22+
const classes = [
23+
styles.button,
24+
variant === 'primary' ? styles.primary : styles.secondary,
25+
size === 'small' ? styles.small : size === 'large' ? styles.large : '',
26+
className,
27+
]
28+
.filter(Boolean)
29+
.join(' ');
30+
31+
if (onClick) {
32+
return (
33+
<button className={classes} onClick={onClick} type="button">
34+
{children}
35+
</button>
36+
);
37+
}
38+
39+
if (to) {
40+
return (
41+
<Link className={classes} to={to}>
42+
{children}
43+
</Link>
44+
);
45+
}
46+
47+
return null;
48+
};
49+
50+
export default Button;

‎website/src/components/OvertureButton/styles.module.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.button {
2+
display: inline-flex;
3+
align-items: center;
4+
justify-content: center;
5+
padding: 0.5rem 1rem;
6+
border-radius: 4px;
7+
font-weight: 500;
8+
transition: all 0.2s;
9+
cursor: pointer;
10+
border: none;
11+
text-decoration: none;
12+
color: white;
13+
margin-right: 1rem;
14+
}
15+
16+
.primary {
17+
background: var(--ifm-color-primary-dark);
18+
}
19+
20+
.primary:hover {
21+
background: var(--ifm-color-primary-darkest);
22+
text-decoration: none;
23+
color: white;
24+
}
25+
26+
.secondary {
27+
background: var(--ifm-color-primary-dark);
28+
}
29+
30+
.secondary:hover {
31+
background: var(--ifm-color-primary-darkest);
32+
text-decoration: none;
33+
color: white;
34+
}
35+
36+
.small {
37+
padding: 0.25rem 0.5rem;
38+
font-size: 0.875rem;
39+
}
40+
41+
.large {
42+
padding: 0.75rem 1.5rem;
43+
font-size: 1.125rem;
44+
}

‎website/src/components/SiteMap/icons/icon-lectern.png

-18.7 KB
Loading

‎website/src/components/SiteMap/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ const categories: Record<string, Category> = {
4949
const products: Product[] = [
5050
{ title: 'Deployment Guides', link: '/guides/deployment-guide/', description: 'Deploying to Production', category: 'platform' },
5151
{ title: 'Administration Guides', link: '/guides/administration-guides/', description: 'Management and Customization', category: 'platform' },
52-
{ title: 'User Guides', link: '/guides/user-guides/', description: 'Interacting with the Platorm', category: 'platform' },
53-
{ title: 'API Reference', link: '/guides/api-reference', description: 'Interacting with the Platorms APIs', category: 'platform' },
52+
{ title: 'User Guides', link: '/guides/user-guides/', description: 'Interacting with the PHelveticarm', category: 'platform' },
53+
{ title: 'API Reference', link: '/guides/api-reference', description: 'Interacting with the PHelveticarms APIs', category: 'platform' },
5454
{ title: 'Song', link: 'docs/core-software/song/overview', image: iconSong, description: 'Metadata Management Service', category: 'core' },
5555
{ title: 'Score', link: '/docs/core-software/score/overview', image: iconScore, description: 'File Transfer Service', category: 'core' },
5656
{ title: 'Maestro', link: '/docs/core-software/maestro/overview', image: iconMaestro, description: 'Metadata Indexing Service', category: 'core' },

‎website/src/css/custom.css

+118-39
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,126 @@
11
/**
2-
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
4-
* work well for content-centric websites.
5-
*/
2+
* Any CSS included here will be global. The classic template
3+
* bundles Infima by default. Infima is a CSS framework designed to
4+
* work well for content-centric websites.
5+
*/
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #04518c;
10-
--ifm-color-primary-dark: #03497e;
11-
--ifm-color-primary-darker: #034577;
12-
--ifm-color-primary-darkest: #023962;
13-
--ifm-color-primary-light: #05599a;
14-
--ifm-color-primary-lighter: #055da1;
15-
--ifm-color-primary-lightest: #0669b6;
16-
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18-
19-
/* Front Page category blocks */
20-
--category-title-color: #282A35;
21-
--category-category-color: #f7f7f7;
22-
--category-card-color: #fefefe;
23-
--category-block-shadow: 2px 2px 6px #282a3525;
24-
--category-block-funding: none;
25-
--funding-block-color: #edf9fd;
9+
--ifm-color-primary: #9E005D;
10+
--ifm-color-primary-hero: #71bde8;
11+
--ifm-color-primary-dark: #03497e;
12+
--ifm-color-primary-darker: #034577;
13+
--ifm-color-primary-darkest: #023962;
14+
--ifm-color-primary-light: #05599a;
15+
--ifm-color-primary-lighter: #055da1;
16+
--ifm-color-primary-lightest: #0669b6;
17+
--ifm-code-font-size: 95%;
18+
--ifm-font-color: #003055;
19+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
20+
--ifm-color-primary-search: #fefefe;
21+
--doc-sidebar-background: #f5f6f7;
22+
--ifm-color-footer: #f0f1f3;
23+
24+
25+
/* Top NavBar */
26+
--ifm-navbar-height: 64px;
27+
--ifm-navbar-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
28+
--navbar-item-hover-light: rgba(0, 0, 0, 0.05);
29+
--navbar-item-hover-dark: rgba(255, 255, 255, 0.1);
30+
31+
/* Front Page category blocks */
32+
--category-title-color: #282A35;
33+
--category-category-color: #f7f7f7;
34+
--category-card-color: #fefefe;
35+
--category-block-shadow: 2px 2px 6px #282a3525;
36+
--category-block-funding: none;
37+
--funding-block-color: #edf9fd;
2638
}
2739

2840
/* For readability concerns, you should choose a lighter palette in dark mode. */
2941
[data-theme='dark'] {
30-
--ifm-color-primary: #0767b1;
31-
--ifm-color-primary-dark: #2a2d2f;
32-
--ifm-color-primary-darker: #034577;
33-
--ifm-color-primary-darkest: #023962;
34-
--ifm-color-primary-light: #05599a;
35-
--ifm-color-primary-lighter: #055da1;
36-
--ifm-color-primary-lightest: #0669b6;
37-
--ifm-background-color: #585858;
38-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
39-
40-
/* Front Page category blocks */
41-
--category-title-color: #F2F5F8;
42-
--category-category-color: #1B1B1D;
43-
--category-card-color: #4e5055;
44-
--category-block-shadow: 0px 0px 0px 2px #323845;
45-
--category-block-shadow-funding: 0px 0px 0px 2px #323845;
46-
--funding-block-color: #232324;
47-
}
42+
--ifm-color-primary: #4BC6F0;
43+
--ifm-color-primary-hero: #0767b1;
44+
--ifm-color-primary-dark: #2a2d2f;
45+
--ifm-color-primary-darker: #034577;
46+
--ifm-color-primary-darkest: #023962;
47+
--ifm-color-primary-light: #05599a;
48+
--ifm-color-primary-lighter: #055da1;
49+
--ifm-color-primary-lightest: #0669b6;
50+
--ifm-background-color: #585858;
51+
--ifm-font-color: #ffffff;
52+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
53+
--ifm-color-primary-search: #2a2d2f;
54+
--doc-sidebar-background: #0d0d0d;
55+
--ifm-color-footer: #0d0d0d;
56+
57+
/* Front Page category blocks */
58+
--category-title-color: #F2F5F8;
59+
--category-category-color: #1B1B1D;
60+
--category-card-color: #4e5055;
61+
--category-block-shadow: 0px 0px 0px 2px #323845;
62+
--category-block-shadow-funding: 0px 0px 0px 2px #323845;
63+
--funding-block-color: #232324;
64+
}
65+
66+
/* Custom styles for Docusaurus sidebar */
67+
:root {
68+
--sidebar-item-height: 1.5rem;
69+
--sidebar-border-width: 3px;
70+
}
71+
72+
.theme-doc-sidebar-menu {
73+
padding: 0.5rem;
74+
}
75+
76+
/* Links styling */
77+
.menu__link {
78+
line-height: var(--sidebar-item-height);
79+
border-radius: 0;
80+
transition: background-color 200ms ease;
81+
border-left: var(--sidebar-border-width) solid transparent;
82+
}
83+
84+
.menu__link--active {
85+
border-left: var(--sidebar-border-width) solid;
86+
border-left-color: var(--ifm-color-primary);
87+
}
88+
89+
/* Nested levels */
90+
.menu__list .menu__list {
91+
border-left: 1px solid var(--ifm-color-emphasis-200);
92+
}
93+
94+
.navbar__items .navbar__item:hover {
95+
background-color: var(--navbar-item-hover-light);
96+
border-radius: 4px;
97+
}
98+
99+
[data-theme='dark'] .navbar__items .navbar__item:hover {
100+
background-color: var(--navbar-item-hover-dark);
101+
}
102+
103+
.tableOfContents_bqdL {
104+
border-left: 1px solid var(--ifm-color-primary);
105+
106+
}
107+
108+
.footer {
109+
background-color: var(--ifm-color-footer);
110+
border-top: 1px solid #d5d8dc;
111+
color: var(--ifm-color-primary);
112+
}
113+
114+
[data-theme='dark'] .footer {
115+
background-color: var(--ifm-color-footer);
116+
border-top: 1px solid #44484f;
117+
color: var(--ifm-color-primary);
118+
}
119+
120+
.footer__title {
121+
color: var(--ifm-color-primary);
122+
}
123+
124+
.footer__link-item {
125+
color: var(--ifm-font-color);
126+
}

‎website/src/pages/index.module.css

+4-7
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
position: relative;
1010
overflow: hidden;
1111
background-image: url('../../static/img/cube-hero-desktop.png');
12+
background-color: var(--ifm-color-primary-hero);
1213
background-repeat: no-repeat;
1314
background-size: cover;
14-
color: white;
15+
color: var(--ifm-font-color);
1516
}
1617

1718
@media screen and (max-width: 1800px) {
1819
.heroBanner {
1920
transition: 1s;
2021
text-align: center;
21-
text-align: l;
2222
padding: 2rem;
2323
background-image: url('../../static/img/cube-hero-mobile.png');
2424
background-repeat: no-repeat;
@@ -60,13 +60,10 @@
6060
.searchBarContainer :global(.DocSearch-Button) {
6161
width: 100%;
6262
height: 40px;
63-
background-color: #E9F6FA;
64-
border: 2px solid #4CC6F1;
63+
background-color: var(--ifm-color-primary-search);
64+
border: 2px solid var(--ifm-color-primary-hero);
6565
}
6666

6767
.searchBarContainer :global(.DocSearch-Button-Placeholder) {
6868
font-size: 1rem;
6969
}
70-
71-
72-

‎website/src/pages/index.tsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import SearchBar from '@theme/SearchBar'; // Import the SearchBar component
77

88
import styles from './index.module.css';
99
import SiteMap from '../components/SiteMap';
10+
import Button from '../components/OvertureButton';
1011

1112
function HomepageHeader() {
1213
const {siteConfig} = useDocusaurusContext();
@@ -17,8 +18,23 @@ function HomepageHeader() {
1718
{siteConfig.title}
1819
</Heading>
1920
<p className="hero__subtitle">{siteConfig.tagline}</p>
21+
<Button
22+
to="https://demo.overture.bio/"
23+
variant="primary"
24+
className={styles.button}
25+
>
26+
Demo Platform
27+
</Button>
28+
<Button
29+
to="/guides/getting-started"
30+
variant="primary"
31+
className={styles.button}
32+
>
33+
Introductory Tutorial
34+
</Button>
35+
2036
<div className={styles.searchBarContainer}>
21-
<SearchBar /> {/* Add the SearchBar component here */}
37+
<SearchBar />
2238
</div>
2339
</div>
2440
</header>

‎website/src/theme/DocSidebar/styles.module.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
.sidebarWrapper {
22
display: flex;
3+
background-color: var(--doc-sidebar-background);
34
flex-direction: column;
45
height: 100%;
56
}
67

78
.fundingStatementContainer {
89
margin-top: auto;
9-
}
10+
}

0 commit comments

Comments
 (0)