Skip to content

Commit ec0d246

Browse files
HaudinFlorenceSylvainCorlay
HaudinFlorence
authored and
SylvainCorlay
committed
Start to implement the logics for the dark mode.
Fix style issue and keep on working on dark mode. Fix style issues and keep on working on dark mode.
1 parent af79867 commit ec0d246

56 files changed

Lines changed: 8469 additions & 523 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.docusaurus/docusaurus.config.mjs‎

Lines changed: 3 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ export default {
4646
"title": "",
4747
"logo": {
4848
"alt": "QuantStack Logo",
49-
"src": "img/quantstack/logo-website.svg"
49+
"src": "img/quantstack/logo-website-light.svg",
50+
"srcDark": "img/quantstack/logo-website-dark.svg"
5051
},
5152
"items": [
5253
{
@@ -184,7 +185,7 @@ export default {
184185
},
185186
"colorMode": {
186187
"defaultMode": "light",
187-
"disableSwitch": true,
188+
"disableSwitch": false,
188189
"respectPrefersColorScheme": false
189190
},
190191
"prism": {
@@ -290,142 +291,6 @@ export default {
290291
}
291292
]
292293
},
293-
"darkTheme": {
294-
"plain": {
295-
"backgroundColor": "hsl(220, 13%, 18%)",
296-
"color": "hsl(220, 14%, 71%)",
297-
"textShadow": "0 1px rgba(0, 0, 0, 0.3)"
298-
},
299-
"styles": [
300-
{
301-
"types": [
302-
"comment",
303-
"prolog",
304-
"cdata"
305-
],
306-
"style": {
307-
"color": "hsl(220, 10%, 40%)"
308-
}
309-
},
310-
{
311-
"types": [
312-
"doctype",
313-
"punctuation",
314-
"entity"
315-
],
316-
"style": {
317-
"color": "hsl(220, 14%, 71%)"
318-
}
319-
},
320-
{
321-
"types": [
322-
"attr-name",
323-
"class-name",
324-
"maybe-class-name",
325-
"boolean",
326-
"constant",
327-
"number",
328-
"atrule"
329-
],
330-
"style": {
331-
"color": "hsl(29, 54%, 61%)"
332-
}
333-
},
334-
{
335-
"types": [
336-
"keyword"
337-
],
338-
"style": {
339-
"color": "hsl(286, 60%, 67%)"
340-
}
341-
},
342-
{
343-
"types": [
344-
"property",
345-
"tag",
346-
"symbol",
347-
"deleted",
348-
"important"
349-
],
350-
"style": {
351-
"color": "hsl(355, 65%, 65%)"
352-
}
353-
},
354-
{
355-
"types": [
356-
"selector",
357-
"string",
358-
"char",
359-
"builtin",
360-
"inserted",
361-
"regex",
362-
"attr-value"
363-
],
364-
"style": {
365-
"color": "hsl(95, 38%, 62%)"
366-
}
367-
},
368-
{
369-
"types": [
370-
"variable",
371-
"operator",
372-
"function"
373-
],
374-
"style": {
375-
"color": "hsl(207, 82%, 66%)"
376-
}
377-
},
378-
{
379-
"types": [
380-
"url"
381-
],
382-
"style": {
383-
"color": "hsl(187, 47%, 55%)"
384-
}
385-
},
386-
{
387-
"types": [
388-
"deleted"
389-
],
390-
"style": {
391-
"textDecorationLine": "line-through"
392-
}
393-
},
394-
{
395-
"types": [
396-
"inserted"
397-
],
398-
"style": {
399-
"textDecorationLine": "underline"
400-
}
401-
},
402-
{
403-
"types": [
404-
"italic"
405-
],
406-
"style": {
407-
"fontStyle": "italic"
408-
}
409-
},
410-
{
411-
"types": [
412-
"important",
413-
"bold"
414-
],
415-
"style": {
416-
"fontWeight": "bold"
417-
}
418-
},
419-
{
420-
"types": [
421-
"important"
422-
],
423-
"style": {
424-
"color": "hsl(220, 14%, 71%)"
425-
}
426-
}
427-
]
428-
},
429294
"additionalLanguages": [],
430295
"magicComments": [
431296
{

‎docusaurus.config.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ const config: Config = {
6464
title: "",
6565
logo: {
6666
alt: "QuantStack Logo",
67-
src: "img/quantstack/logo-website.svg",
67+
src: "img/quantstack/logo-website-light.svg",
68+
srcDark: "img/quantstack/logo-website-dark.svg"
6869
},
6970

7071
items: [
@@ -218,14 +219,14 @@ const config: Config = {
218219

219220
colorMode: {
220221
defaultMode: 'light',
221-
disableSwitch: true,
222+
disableSwitch: false,
222223
respectPrefersColorScheme: false,
223224

224225
},
225226

226227
prism: {
227228
theme: prismThemes.github,
228-
darkTheme: prismThemes.oneDark,
229+
/*darkTheme: prismThemes.oneDark,*/
229230
},
230231
} satisfies Preset.ThemeConfig,
231232
};

‎src/components/about/FourValues.tsx‎

Lines changed: 76 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import OpennessMD from "@site/src/components/about/Values/openness.md";
44
import ScienceMD from "@site/src/components/about/Values/science.md";
55
import IntegrityMD from "@site/src/components/about/Values/integrity.md";
66
import OptimismMD from "@site/src/components/about/Values/optimism.md";
7-
import OpennessPicture from "@site/static/img/values/openness.svg";
8-
import SciencePicture from "@site/static/img/values/science.svg";
9-
import OptimismPicture from "@site/static/img/values/optimism.svg";
10-
import IntegrityPicture from "@site/static/img/values/integrity.svg";
7+
//import OpennessPicture from "@site/static/img/values/openness.svg";
8+
//import SciencePicture from "@site/static/img/values/science.svg";
9+
//import OptimismPicture from "@site/static/img/values/optimism.svg";
10+
//import IntegrityPicture from "@site/static/img/values/integrity.svg";
1111
import { ValueCardMobile } from "@site/src/components/about/ValueCard";
1212
import { ValueCardDesktop } from "@site/src/components/about/ValueCard";
1313
import { useEffect, useState } from "react";
14+
import useBaseUrl from "@docusaurus/useBaseUrl";
15+
import ThemedImage from "@theme/ThemedImage";
1416

1517
const valuesDescriptions = [OpennessMD, ScienceMD, IntegrityMD, OptimismMD];
1618
const valuesPictures = [
@@ -19,6 +21,55 @@ const valuesPictures = [
1921
OptimismPicture,
2022
IntegrityPicture,
2123
];
24+
25+
export function SciencePicture() {
26+
return (
27+
<ThemedImage
28+
alt="Icon representing the science value, representing an atom."
29+
sources={{
30+
light: useBaseUrl("/img/values/science-light.svg"),
31+
dark: useBaseUrl("/img/values/science-dark.svg"),
32+
}}
33+
/>
34+
);
35+
}
36+
37+
export function OpennessPicture() {
38+
return (
39+
<ThemedImage
40+
alt="Icon representing the openness value, four people connected together."
41+
sources={{
42+
light: useBaseUrl("/img/values/openness-light.svg"),
43+
dark: useBaseUrl("/img/values/openness-dark.svg"),
44+
}}
45+
/>
46+
);
47+
}
48+
49+
export function IntegrityPicture() {
50+
return (
51+
<ThemedImage
52+
alt="Icon representing the integrity value, with an heart inside a hand ."
53+
sources={{
54+
light: useBaseUrl("/img/values/integrity-light.svg"),
55+
dark: useBaseUrl("/img/values/integrity-dark.svg"),
56+
}}
57+
/>
58+
);
59+
}
60+
61+
export function OptimismPicture() {
62+
return (
63+
<ThemedImage
64+
alt="Icon representing the optimism value, with a smiling face ."
65+
sources={{
66+
light: useBaseUrl("/img/values/optimism-light.svg"),
67+
dark: useBaseUrl("/img/values/optimism-dark.svg"),
68+
}}
69+
/>
70+
);
71+
}
72+
2273
const valuesNames = ["Openness", "Science", "Optimism", "Integrity"];
2374
const cardColors = ["yellow", "white", "yellow", "white"];
2475

@@ -45,20 +96,27 @@ export function FourValuesMobile() {
4596

4697
export function FourValuesDesktop() {
4798
return (
48-
<div className="four_values_container">
49-
<ul className={"row" + " " + styles.row_custom}>
50-
{valuesNames.map((value, index) => (
51-
<li className="cards_list" key={index}>
52-
<div className="col">
53-
<ValueCardDesktop
54-
value={value}
55-
ValuePicture={valuesPictures[index]}
56-
ValueComponent={valuesDescriptions[index]}
57-
/>
58-
</div>
59-
</li>
60-
))}
61-
</ul>
99+
<div className="main-container-with-margins">
100+
<div className="four_values_container">
101+
<div className="row">
102+
<div className="col col--10 col--offset-1">
103+
<h1 className="h1-padding-none">Our values </h1>
104+
</div>
105+
</div>
106+
<ul className={"row" + " " + styles.row_custom}>
107+
{valuesNames.map((value, index) => (
108+
<li className="cards_list" key={index}>
109+
<div className="col">
110+
<ValueCardDesktop
111+
value={value}
112+
ValuePicture={valuesPictures[index]}
113+
ValueComponent={valuesDescriptions[index]}
114+
/>
115+
</div>
116+
</li>
117+
))}
118+
</ul>
119+
</div>
62120
</div>
63121
);
64122
}

‎src/components/about/ValueCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function ValueCardDesktop({ value, ValuePicture, ValueComponent }) {
99
</div>
1010
<div className={styles.value_header}>{value}</div>
1111
<div className={styles.value_text}>
12-
<ValueComponent />
12+
<ValueComponent className={styles.value_component} />
1313
</div>
1414
</div>
1515
);

‎src/components/about/index.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,6 @@ export function AboutDesktop() {
3737
<div>
3838
<div className="main-container-with-margins">
3939
<div className={"container" + " " + styles.about_container}>
40-
<div className="row">
41-
<div className="col col--10 col--offset-1">
42-
<h1 className="h1-padding-none">Our values </h1>
43-
</div>
44-
</div>
4540
<div className="row">
4641
<div className="col col--10 col--offset-1">
4742
<FourValues />
@@ -78,7 +73,19 @@ export function AboutDesktop() {
7873
</div>
7974
</div>
8075
<div className={styles.join_the_team_container}>
81-
<h1 className="h1-centered">Join the team</h1>
76+
<h1
77+
className={
78+
"h1-centered" +
79+
" " +
80+
"h1-padding-none" +
81+
" " +
82+
"h1-margin-none" +
83+
" " +
84+
styles.join_the_team_title
85+
}
86+
>
87+
Join the team
88+
</h1>
8289
<div className={styles.join_the_team_text}>
8390
QuantStack is seeking talents in the open-source scientific computing
8491
community. Join a team committed to open-science and free software.

0 commit comments

Comments
 (0)